diff --git a/dashboards-observability/.cypress/integration/trace_analytics_dashboard.spec.js b/dashboards-observability/.cypress/integration/trace_analytics_dashboard.spec.js
index 5512635ca..6e510a8d8 100644
--- a/dashboards-observability/.cypress/integration/trace_analytics_dashboard.spec.js
+++ b/dashboards-observability/.cypress/integration/trace_analytics_dashboard.spec.js
@@ -77,7 +77,7 @@ describe('Testing dashboard table empty state', () => {
 
   it('Renders empty state', () => {
     cy.contains(' (0)').should('exist');
-    cy.get('h2.euiTitle').contains('No matches').should('exist');
+    cy.contains('No matches').should('exist');
   });
 });
 
@@ -163,17 +163,18 @@ describe('Testing plots', () => {
   });
 
   it('Renders service map', () => {
+    // plotly scale texts are in attribute "data-unformatted"
     cy.get('text.ytitle[data-unformatted="Latency (ms)"]').should('exist');
     cy.get('text[data-unformatted="200"]').should('exist');
     cy.get('.vis-network').should('exist');
 
-    cy.get('.euiToggle__input[title="Error rate"]').click();
+    cy.get('.euiButton__text[title="Error rate"]').click();
     cy.get('text.ytitle[data-unformatted="Error rate"]').should('exist');
     cy.get('text[data-unformatted="10%"]').should('exist');
 
-    cy.get('.euiToggle__input[title="Throughput"]').click();
+    cy.get('.euiButton__text[title="Throughput"]').click();
     cy.get('text.ytitle[data-unformatted="Throughput"]').should('exist');
-    cy.get('text[data-unformatted="60"]').should('exist');
+    cy.get('text[data-unformatted="50"]').should('exist');
 
     cy.get('input[type="search"]').eq(1).focus().type('payment{enter}');
     cy.wait(delay);
@@ -181,8 +182,8 @@ describe('Testing plots', () => {
 
   it('Renders plots', () => {
     cy.get('text.ytitle[data-unformatted="Error rate (%)"]').should('exist');
-    cy.get('text.annotation-text[data-unformatted="Now: 0%"]').should('exist');
+    cy.get('text.annotation-text[data-unformatted="Now: 14.81%"]').should('exist');
     cy.get('text.ytitle[data-unformatted="Throughput (n)"]').should('exist');
-    cy.get('text.annotation-text[data-unformatted="Now: 62"]').should('exist');
+    cy.get('text.annotation-text[data-unformatted="Now: 108"]').should('exist');
   });
 });
diff --git a/dashboards-observability/.cypress/integration/trace_analytics_services.spec.js b/dashboards-observability/.cypress/integration/trace_analytics_services.spec.js
index bb3c43490..6421982a9 100644
--- a/dashboards-observability/.cypress/integration/trace_analytics_services.spec.js
+++ b/dashboards-observability/.cypress/integration/trace_analytics_services.spec.js
@@ -5,7 +5,7 @@
 
 /// <reference types="cypress" />
 
-import { delay, SERVICE_NAME, setTimeFilter } from '../utils/constants';
+import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter } from '../utils/constants';
 
 describe('Testing services table empty state', () => {
   beforeEach(() => {
@@ -19,7 +19,7 @@ describe('Testing services table empty state', () => {
 
   it('Renders empty state', () => {
     cy.contains(' (0)').should('exist');
-    cy.get('h2.euiTitle').contains('No matches').should('exist');
+    cy.contains('No matches').should('exist');
   });
 });
 
@@ -43,7 +43,6 @@ describe('Testing services table', () => {
   it('Searches correctly', () => {
     cy.get('input[type="search"]').first().focus().type(`${SERVICE_NAME}{enter}`);
     cy.get('.euiButton__text').contains('Refresh').click();
-    cy.wait(delay);
     cy.contains(' (1)').should('exist');
     cy.contains('3.57%').should('exist');
   });
@@ -61,11 +60,10 @@ describe('Testing service view empty state', () => {
         win.sessionStorage.clear();
       },
     });
-    cy.wait(delay * 3);
   });
 
   it('Renders service view empty state', () => {
-    cy.get('h2.euiTitle').contains('frontend-client').should('exist');
+    cy.contains('frontend-client').should('exist');
     cy.get('.euiText').contains('0').should('exist');
     cy.get('.euiText').contains('-').should('exist');
   });
@@ -109,6 +107,7 @@ describe('Testing service view', () => {
   });
 
   it('Renders spans data grid, flyout, filters', () => {
+    cy.get('.euiLink').contains(SERVICE_SPAN_ID).trigger('mouseover', { force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
     cy.wait(delay);
     cy.contains('Span detail').should('exist');
diff --git a/dashboards-observability/.cypress/integration/trace_analytics_traces.spec.js b/dashboards-observability/.cypress/integration/trace_analytics_traces.spec.js
index 2f96fab54..d8c5735fc 100644
--- a/dashboards-observability/.cypress/integration/trace_analytics_traces.spec.js
+++ b/dashboards-observability/.cypress/integration/trace_analytics_traces.spec.js
@@ -19,7 +19,7 @@ describe('Testing traces table empty state', () => {
 
   it('Renders empty state', () => {
     cy.contains(' (0)').should('exist');
-    cy.get('h2.euiTitle').contains('No matches').should('exist');
+    cy.contains('No matches').should('exist');
   });
 });
 
@@ -54,7 +54,6 @@ describe('Testing traces table', () => {
   it('Searches correctly', () => {
     cy.get('input[type="search"]').focus().type(`${TRACE_ID}{enter}`);
     cy.get('.euiButton__text').contains('Refresh').click();
-    cy.wait(delay);
     cy.contains(' (1)').should('exist');
     cy.contains('03/25/2021 10:21:22').should('exist');
   });
@@ -67,14 +66,13 @@ describe('Testing trace view', () => {
         win.sessionStorage.clear();
       },
     });
-    cy.wait(delay * 3);
   });
 
   it('Renders the trace view', () => {
     cy.contains('43.75%').should('exist');
     cy.contains('42.58%').should('exist');
     cy.contains('03/25/2021 10:21:22').should('exist');
-    cy.get('h2.euiTitle').contains(TRACE_ID).should('exist');
+    cy.contains(TRACE_ID).should('exist');
 
     cy.get('div.js-plotly-plot').should('have.length.gte', 2);
     cy.get('text[data-unformatted="database <br>mysql.APM "]').should('exist');
@@ -82,25 +80,28 @@ describe('Testing trace view', () => {
   });
 
   it('Has working breadcrumbs', () => {
-    cy.get('.euiBreadcrumb').contains(TRACE_ID).click();
+    cy.get(`.euiBreadcrumb[href="#/trace_analytics/traces/${TRACE_ID}"]`).click();
     cy.wait(delay);
     cy.get('h2.euiTitle').contains(TRACE_ID).should('exist');
-    cy.get('.euiBreadcrumb').contains('Traces').click();
+    cy.get('.euiBreadcrumb[href="#/trace_analytics/traces"]').click();
     cy.wait(delay);
     cy.get('.euiTitle').contains('Traces').should('exist');
-    cy.get('.euiBreadcrumb').contains('Trace analytics').click();
+    cy.get('.euiBreadcrumb[href="#/trace_analytics/home"]').click();
     cy.wait(delay);
     cy.get('.euiTitle').contains('Dashboard').should('exist');
-    cy.get('.euiBreadcrumb').contains('Observability').click();
+    cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').click();
     cy.wait(delay);
     cy.get('.euiTitle').contains('Event analytics').should('exist');
   });
 
   it('Renders data grid, flyout and filters', () => {
-    cy.get('.euiToggle__input[title="Span list"]').click({ force: true });
+    cy.get('.euiButton__text[title="Span list"]').click({ force: true });
     cy.contains('2 columns hidden').should('exist');
 
+    cy.wait(delay);
+    cy.get('.euiLink').contains(SPAN_ID).trigger('mouseover', { force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
+    cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true }); // first click doesn't go through eui data grid
     cy.wait(delay);
     cy.contains('Span detail').should('exist');
     cy.contains('Span attributes').should('exist');
diff --git a/dashboards-observability/.cypress/utils/constants.js b/dashboards-observability/.cypress/utils/constants.js
index 56506b842..75e343086 100644
--- a/dashboards-observability/.cypress/utils/constants.js
+++ b/dashboards-observability/.cypress/utils/constants.js
@@ -9,6 +9,7 @@ export const delay = 1500;
 export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
 export const SPAN_ID = 'a673bc074b438374';
 export const SERVICE_NAME = 'frontend-client';
+export const SERVICE_SPAN_ID = '7df5609a6d104736';
 
 export const testDataSet = [
   {
@@ -40,7 +41,7 @@ export const setTimeFilter = (setEndTime = false, refresh = true) => {
   cy.get('.euiTab__content').contains('Absolute').click();
   cy.get('input[data-test-subj="superDatePickerAbsoluteDateInput"]')
     .focus()
-    .type('{selectall}' + startTime);
+    .type('{selectall}' + startTime, { force: true });
   if (setEndTime) {
     cy.wait(delay);
     cy.get(
@@ -50,7 +51,7 @@ export const setTimeFilter = (setEndTime = false, refresh = true) => {
     cy.get('.euiTab__content').contains('Absolute').click();
     cy.get('input[data-test-subj="superDatePickerAbsoluteDateInput"]')
       .focus()
-      .type('{selectall}' + endTime);
+      .type('{selectall}' + endTime, { force: true });
   }
   if (refresh) cy.get('.euiButton__text').contains('Refresh').click();
   cy.wait(delay);
@@ -98,4 +99,4 @@ export const supressResizeObserverIssue = () => {
   cy.on('uncaught:exception', (err, runnable) => {
     if (err.message.includes('ResizeObserver loop')) return false;
   });
-};
\ No newline at end of file
+};
diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx
index 3cc0da4de..b4d164331 100644
--- a/dashboards-observability/public/components/app.tsx
+++ b/dashboards-observability/public/components/app.tsx
@@ -13,7 +13,7 @@ import store from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
 import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
 import { Home as CustomPanelsHome } from './custom_panels/home';
-import { EventAnalytics } from './explorer/event_analytics';
+import { EventAnalytics } from './event_analytics';
 import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
 
diff --git a/dashboards-observability/public/components/application_analytics/components/application.tsx b/dashboards-observability/public/components/application_analytics/components/application.tsx
index 582d181cd..08ab10f22 100644
--- a/dashboards-observability/public/components/application_analytics/components/application.tsx
+++ b/dashboards-observability/public/components/application_analytics/components/application.tsx
@@ -36,7 +36,7 @@ import {
   PanelTitle,
 } from '../../../../public/components/trace_analytics/components/common/helper_functions';
 import { SpanDetailTable } from '../../../../public/components/trace_analytics/components/traces/span_detail_table';
-import { Explorer } from '../../explorer/explorer';
+import { Explorer } from '../../event_analytics/explorer/explorer';
 import { Configuration } from './configuration';
 import {
   TAB_CONFIG_ID_TXT_PFX,
diff --git a/dashboards-observability/public/components/application_analytics/helpers/utils.tsx b/dashboards-observability/public/components/application_analytics/helpers/utils.tsx
index 57c4bf768..40f8e1f98 100644
--- a/dashboards-observability/public/components/application_analytics/helpers/utils.tsx
+++ b/dashboards-observability/public/components/application_analytics/helpers/utils.tsx
@@ -18,21 +18,21 @@ import { VisualizationType } from '../../../../common/types/custom_panels';
 import { NEW_SELECTED_QUERY_TAB, TAB_CREATED_TYPE } from '../../../../common/constants/explorer';
 import { APP_ANALYTICS_API_PREFIX } from '../../../../common/constants/application_analytics';
 import { HttpSetup } from '../../../../../../src/core/public';
-import { init as initFields, remove as removefields } from '../../explorer/slices/field_slice';
+import { init as initFields, remove as removefields } from '../../event_analytics/redux/slices/field_slice';
 import {
   init as initVisualizationConfig,
   reset as resetVisualizationConfig,
-} from '../../explorer/slices/viualization_config_slice';
+} from '../../event_analytics/redux/slices/viualization_config_slice';
 import {
   init as initQuery,
   remove as removeQuery,
   changeQuery,
-} from '../../explorer/slices/query_slice';
+} from '../../event_analytics/redux/slices/query_slice';
 import {
   init as initQueryResult,
   remove as removeQueryResult,
-} from '../../explorer/slices/query_result_slice';
-import { addTab, removeTab } from '../../explorer/slices/query_tab_slice';
+} from '../../event_analytics/redux/slices/query_result_slice';
+import { addTab, removeTab } from '../../event_analytics/redux/slices/query_tab_slice';
 
 // Name validation
 export const isNameValid = (name: string, existingNames: string[]) => {
diff --git a/dashboards-observability/public/components/common/search/search.tsx b/dashboards-observability/public/components/common/search/search.tsx
index 6995b6945..799ae2688 100644
--- a/dashboards-observability/public/components/common/search/search.tsx
+++ b/dashboards-observability/public/components/common/search/search.tsx
@@ -21,7 +21,7 @@ import _ from 'lodash';
 import { DatePicker } from './date_picker';
 import '@algolia/autocomplete-theme-classic';
 import { Autocomplete } from './autocomplete';
-import { SavePanel } from '../../explorer/save_panel';
+import { SavePanel } from '../../event_analytics/explorer/save_panel';
 import { PPLReferenceFlyout } from '../helpers';
 import { uiSettingsService } from '../../../../common/utils';
 import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
diff --git a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
index 8d81dec7f..1ae063c63 100644
--- a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
+++ b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -72,11 +72,20 @@ exports[`Panels View Component renders panel view container with visualizations
   }
   cloneCustomPanel={[MockFunction]}
   deleteCustomPanel={[MockFunction]}
+  dslService={
+    DSLService {
+      "fetch": [Function],
+      "fetchFields": [Function],
+      "fetchIndices": [Function],
+      "http": [MockFunction],
+    }
+  }
   endTime="now"
   http={[MockFunction]}
+  onEditClick={[Function]}
   page="operationalPanels"
   panelId="L8Sx53wBDp0rvEg3yoLb"
-  parentBreadcrumb={
+  parentBreadcrumbs={
     Array [
       Object {
         "href": "#/operational_panels/",
@@ -101,19 +110,22 @@ exports[`Panels View Component renders panel view container with visualizations
   startTime="now-30m"
 >
   <div>
-    <EuiPage>
+    <EuiPage
+      id="panelView"
+    >
       <div
-        className="euiPage"
+        className="euiPage euiPage--paddingMedium euiPage--grow"
+        id="panelView"
       >
         <EuiPageBody
           component="div"
         >
           <div
-            className="euiPageBody"
+            className="euiPageBody euiPageBody--borderRadiusNone"
           >
             <EuiPageHeader>
-              <div
-                className="euiPageHeader euiPageHeader--responsive"
+              <header
+                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
               >
                 <EuiPageHeaderSection>
                   <div
@@ -163,6 +175,7 @@ exports[`Panels View Component renders panel view container with visualizations
                               onClick={[Function]}
                             >
                               <EuiButtonDisplay
+                                baseClassName="euiButton"
                                 disabled={true}
                                 element="button"
                                 iconType="pencil"
@@ -174,6 +187,11 @@ exports[`Panels View Component renders panel view container with visualizations
                                   className="euiButton euiButton--primary euiButton-isDisabled"
                                   disabled={true}
                                   onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
                                   type="button"
                                 >
                                   <EuiButtonContent
@@ -191,19 +209,20 @@ exports[`Panels View Component renders panel view container with visualizations
                                     >
                                       <EuiIcon
                                         className="euiButtonContent__icon"
+                                        color="inherit"
                                         size="m"
                                         type="pencil"
                                       >
                                         <EuiIconPencil
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                           focusable="false"
                                           role="img"
                                           style={null}
                                         >
                                           <svg
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                             focusable="false"
                                             height={16}
                                             role="img"
@@ -252,102 +271,100 @@ exports[`Panels View Component renders panel view container with visualizations
                               display="inlineBlock"
                               hasArrow={true}
                               isOpen={false}
-                              ownFocus={false}
+                              ownFocus={true}
                               panelPaddingSize="none"
                               withTitle={true}
                             >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
+                              <div
+                                className="euiPopover euiPopover--anchorDownCenter"
+                                withTitle={true}
                               >
                                 <div
-                                  className="euiPopover euiPopover--anchorDownCenter euiPopover--withTitle"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
+                                  className="euiPopover__anchor"
                                 >
-                                  <div
-                                    className="euiPopover__anchor"
+                                  <EuiButton
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
                                   >
-                                    <EuiButton
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
                                       disabled={false}
+                                      element="button"
                                       iconSide="right"
                                       iconType="arrowDown"
+                                      isDisabled={false}
                                       onClick={[Function]}
+                                      type="button"
                                     >
-                                      <EuiButtonDisplay
+                                      <button
+                                        className="euiButton euiButton--primary"
                                         disabled={false}
-                                        element="button"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        isDisabled={false}
                                         onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "minWidth": undefined,
+                                          }
+                                        }
                                         type="button"
                                       >
-                                        <button
-                                          className="euiButton euiButton--primary"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text",
-                                              }
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
                                             }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="arrowDown"
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                size="m"
-                                                type="arrowDown"
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
                                               >
-                                                <EuiIconArrowDown
+                                                <svg
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                   focusable="false"
+                                                  height={16}
                                                   role="img"
                                                   style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
                                                 >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                      fillRule="non-zero"
-                                                    />
-                                                  </svg>
-                                                </EuiIconArrowDown>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text"
-                                              >
-                                                Panel actions
-                                              </span>
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Panel actions
                                             </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
-                                  </div>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
                                 </div>
-                              </EuiOutsideClickDetector>
+                              </div>
                             </EuiPopover>
                           </div>
                         </EuiFlexItem>
@@ -357,38 +374,33 @@ exports[`Panels View Component renders panel view container with visualizations
                           <div
                             className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
-                            <EuiPopover
-                              anchorPosition="downLeft"
-                              button={
-                                <EuiButton
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Add Visualization
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              id="addVisualizationContextMenu"
-                              isOpen={false}
-                              ownFocus={false}
-                              panelPaddingSize="none"
+                            <AddVisualizationPopover
+                              addVizDisabled={false}
+                              showFlyout={[Function]}
                             >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
+                              <EuiPopover
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButton
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    Add visualization
+                                  </EuiButton>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="addVisualizationContextMenu"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
                               >
                                 <div
                                   className="euiPopover euiPopover--anchorDownLeft"
                                   id="addVisualizationContextMenu"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
                                 >
                                   <div
                                     className="euiPopover__anchor"
@@ -400,6 +412,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                       onClick={[Function]}
                                     >
                                       <EuiButtonDisplay
+                                        baseClassName="euiButton"
                                         disabled={false}
                                         element="button"
                                         iconSide="right"
@@ -412,6 +425,11 @@ exports[`Panels View Component renders panel view container with visualizations
                                           className="euiButton euiButton--primary"
                                           disabled={false}
                                           onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
                                           type="button"
                                         >
                                           <EuiButtonContent
@@ -429,19 +447,20 @@ exports[`Panels View Component renders panel view container with visualizations
                                             >
                                               <EuiIcon
                                                 className="euiButtonContent__icon"
+                                                color="inherit"
                                                 size="m"
                                                 type="arrowDown"
                                               >
                                                 <EuiIconArrowDown
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
                                                 >
                                                   <svg
                                                     aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                     focusable="false"
                                                     height={16}
                                                     role="img"
@@ -460,7 +479,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                               <span
                                                 className="euiButton__text"
                                               >
-                                                Add Visualization
+                                                Add visualization
                                               </span>
                                             </span>
                                           </EuiButtonContent>
@@ -469,15 +488,15 @@ exports[`Panels View Component renders panel view container with visualizations
                                     </EuiButton>
                                   </div>
                                 </div>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
+                              </EuiPopover>
+                            </AddVisualizationPopover>
                           </div>
                         </EuiFlexItem>
                       </div>
                     </EuiFlexGroup>
                   </div>
                 </EuiPageHeaderSection>
-              </div>
+              </header>
             </EuiPageHeader>
             <EuiPageContentBody>
               <div
@@ -493,7 +512,7 @@ exports[`Panels View Component renders panel view container with visualizations
                       <div
                         className="euiFlexItem"
                       >
-                        <EuiFieldText
+                        <Autocomplete
                           append={
                             <EuiLink
                               aria-label="ppl-info"
@@ -507,77 +526,158 @@ exports[`Panels View Component renders panel view container with visualizations
                               PPL
                             </EuiLink>
                           }
-                          disabled={true}
-                          fullWidth={true}
-                          onChange={[Function]}
-                          onKeyPress={[Function]}
+                          baseQuery="source = "
+                          dslService={
+                            DSLService {
+                              "fetch": [Function],
+                              "fetchFields": [Function],
+                              "fetchIndices": [Function],
+                              "http": [MockFunction],
+                            }
+                          }
+                          getSuggestions={[Function]}
+                          handleQueryChange={[Function]}
+                          handleQuerySearch={[Function]}
+                          isDisabled={true}
+                          key="autocomplete-search-bar"
+                          onItemSelect={[Function]}
                           placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                          value=""
+                          possibleCommands={
+                            Array [
+                              Object {
+                                "label": "where",
+                              },
+                            ]
+                          }
+                          query=""
+                          tabId="panels-filter"
+                          tempQuery=""
                         >
-                          <EuiFormControlLayout
-                            append={
-                              <EuiLink
-                                aria-label="ppl-info"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "padding": "10px",
-                                  }
-                                }
-                              >
-                                PPL
-                              </EuiLink>
-                            }
-                            fullWidth={true}
+                          <div
+                            aria-expanded={false}
+                            aria-haspopup="listbox"
+                            aria-labelledby="autocomplete-4-label"
+                            className="aa-Autocomplete"
+                            id="autocomplete-root"
+                            role="combobox"
                           >
-                            <div
-                              className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
-                            >
-                              <div
-                                className="euiFormControlLayout__childrenWrapper"
-                              >
-                                <EuiValidatableControl>
-                                  <input
-                                    className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                                    disabled={true}
-                                    onChange={[Function]}
-                                    onKeyPress={[Function]}
-                                    placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                                    type="text"
-                                    value=""
-                                  />
-                                </EuiValidatableControl>
-                                <EuiFormControlLayoutIcons />
-                              </div>
-                              <EuiLink
-                                aria-label="ppl-info"
-                                className="euiFormControlLayout__append"
-                                key="0/.0"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "padding": "10px",
-                                  }
-                                }
-                              >
-                                <button
+                            <EuiFieldText
+                              append={
+                                <EuiLink
                                   aria-label="ppl-info"
-                                  className="euiLink euiLink--primary euiFormControlLayout__append"
-                                  disabled={false}
                                   onClick={[Function]}
                                   style={
                                     Object {
                                       "padding": "10px",
                                     }
                                   }
-                                  type="button"
                                 >
                                   PPL
-                                </button>
-                              </EuiLink>
-                            </div>
-                          </EuiFormControlLayout>
-                        </EuiFieldText>
+                                </EuiLink>
+                              }
+                              aria-autocomplete="both"
+                              aria-labelledby="autocomplete-4-label"
+                              autoCapitalize="off"
+                              autoComplete="off"
+                              autoCorrect="off"
+                              autoFocus={false}
+                              data-test-subj="searchAutocompleteTextArea"
+                              disabled={true}
+                              enterKeyHint="search"
+                              fullWidth={true}
+                              id="autocomplete-textarea"
+                              maxLength={512}
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                              spellCheck="false"
+                              type="search"
+                              value=""
+                            >
+                              <EuiFormControlLayout
+                                append={
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
+                                    }
+                                  >
+                                    PPL
+                                  </EuiLink>
+                                }
+                                fullWidth={true}
+                                inputId="autocomplete-textarea"
+                              >
+                                <div
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <input
+                                        aria-autocomplete="both"
+                                        aria-labelledby="autocomplete-4-label"
+                                        autoCapitalize="off"
+                                        autoComplete="off"
+                                        autoCorrect="off"
+                                        autoFocus={false}
+                                        className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                        data-test-subj="searchAutocompleteTextArea"
+                                        disabled={true}
+                                        enterKeyHint="search"
+                                        id="autocomplete-textarea"
+                                        maxLength={512}
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                        spellCheck="false"
+                                        type="search"
+                                        value=""
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons />
+                                  </div>
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    className="euiFormControlLayout__append"
+                                    key="0/.0"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
+                                    }
+                                  >
+                                    <button
+                                      aria-label="ppl-info"
+                                      className="euiLink euiLink--primary euiFormControlLayout__append"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                      style={
+                                        Object {
+                                          "padding": "10px",
+                                        }
+                                      }
+                                      type="button"
+                                    >
+                                      PPL
+                                    </button>
+                                  </EuiLink>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiFieldText>
+                          </div>
+                        </Autocomplete>
                       </div>
                     </EuiFlexItem>
                     <EuiFlexItem
@@ -803,78 +903,100 @@ exports[`Panels View Component renders panel view container with visualizations
                                           closePopover={[Function]}
                                           display="inlineBlock"
                                           hasArrow={true}
-                                          id="QuickSelectPopover"
                                           isOpen={false}
                                           ownFocus={true}
                                           panelPaddingSize="m"
                                         >
-                                          <EuiOutsideClickDetector
-                                            isDisabled={true}
-                                            onOutsideClick={[Function]}
+                                          <div
+                                            className="euiPopover euiPopover--anchorDownLeft"
                                           >
                                             <div
-                                              className="euiPopover euiPopover--anchorDownLeft"
-                                              id="QuickSelectPopover"
-                                              onKeyDown={[Function]}
-                                              onMouseDown={[Function]}
-                                              onMouseUp={[Function]}
-                                              onTouchEnd={[Function]}
-                                              onTouchStart={[Function]}
+                                              className="euiPopover__anchor euiQuickSelectPopover__anchor"
                                             >
-                                              <div
-                                                className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                              <EuiButtonEmpty
+                                                aria-label="Date quick select"
+                                                className="euiFormControlLayout__prepend"
+                                                data-test-subj="superDatePickerToggleQuickMenuButton"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                isDisabled={false}
+                                                onClick={[Function]}
+                                                size="xs"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiQuickSelectPopover__buttonText",
+                                                  }
+                                                }
                                               >
-                                                <EuiButtonEmpty
+                                                <button
                                                   aria-label="Date quick select"
-                                                  className="euiFormControlLayout__prepend"
+                                                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                                                   data-test-subj="superDatePickerToggleQuickMenuButton"
-                                                  iconSide="right"
-                                                  iconType="arrowDown"
-                                                  isDisabled={false}
+                                                  disabled={false}
                                                   onClick={[Function]}
-                                                  size="xs"
-                                                  textProps={
-                                                    Object {
-                                                      "className": "euiQuickSelectPopover__buttonText",
-                                                    }
-                                                  }
+                                                  type="button"
                                                 >
-                                                  <button
-                                                    aria-label="Date quick select"
-                                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
-                                                    data-test-subj="superDatePickerToggleQuickMenuButton"
-                                                    disabled={false}
-                                                    onClick={[Function]}
-                                                    type="button"
-                                                  >
-                                                    <EuiButtonContent
-                                                      className="euiButtonEmpty__content"
-                                                      iconSide="right"
-                                                      iconType="arrowDown"
-                                                      textProps={
-                                                        Object {
-                                                          "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                                        }
+                                                  <EuiButtonContent
+                                                    className="euiButtonEmpty__content"
+                                                    iconSide="right"
+                                                    iconSize="s"
+                                                    iconType="arrowDown"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
                                                       }
+                                                    }
+                                                  >
+                                                    <span
+                                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                                     >
+                                                      <EuiIcon
+                                                        className="euiButtonContent__icon"
+                                                        color="inherit"
+                                                        size="s"
+                                                        type="arrowDown"
+                                                      >
+                                                        <EuiIconArrowDown
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                          focusable="false"
+                                                          role="img"
+                                                          style={null}
+                                                        >
+                                                          <svg
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                            focusable="false"
+                                                            height={16}
+                                                            role="img"
+                                                            style={null}
+                                                            viewBox="0 0 16 16"
+                                                            width={16}
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                          >
+                                                            <path
+                                                              d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                              fillRule="non-zero"
+                                                            />
+                                                          </svg>
+                                                        </EuiIconArrowDown>
+                                                      </EuiIcon>
                                                       <span
-                                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                        className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
                                                       >
                                                         <EuiIcon
-                                                          className="euiButtonContent__icon"
-                                                          size="m"
-                                                          type="arrowDown"
+                                                          type="calendar"
                                                         >
-                                                          <EuiIconArrowDown
+                                                          <EuiIconCalendar
                                                             aria-hidden={true}
-                                                            className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                            className="euiIcon euiIcon--medium"
                                                             focusable="false"
                                                             role="img"
                                                             style={null}
                                                           >
                                                             <svg
                                                               aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                              className="euiIcon euiIcon--medium"
                                                               focusable="false"
                                                               height={16}
                                                               role="img"
@@ -884,51 +1006,19 @@ exports[`Panels View Component renders panel view container with visualizations
                                                               xmlns="http://www.w3.org/2000/svg"
                                                             >
                                                               <path
-                                                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                                fillRule="non-zero"
+                                                                d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                                fillRule="evenodd"
                                                               />
                                                             </svg>
-                                                          </EuiIconArrowDown>
+                                                          </EuiIconCalendar>
                                                         </EuiIcon>
-                                                        <span
-                                                          className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                                        >
-                                                          <EuiIcon
-                                                            type="calendar"
-                                                          >
-                                                            <EuiIconCalendar
-                                                              aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium"
-                                                              focusable="false"
-                                                              role="img"
-                                                              style={null}
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                className="euiIcon euiIcon--medium"
-                                                                focusable="false"
-                                                                height={16}
-                                                                role="img"
-                                                                style={null}
-                                                                viewBox="0 0 16 16"
-                                                                width={16}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
-                                                                  fillRule="evenodd"
-                                                                />
-                                                              </svg>
-                                                            </EuiIconCalendar>
-                                                          </EuiIcon>
-                                                        </span>
                                                       </span>
-                                                    </EuiButtonContent>
-                                                  </button>
-                                                </EuiButtonEmpty>
-                                              </div>
+                                                    </span>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonEmpty>
                                             </div>
-                                          </EuiOutsideClickDetector>
+                                          </div>
                                         </EuiPopover>
                                       </EuiQuickSelectPopover>
                                       <div
@@ -1012,6 +1102,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                           }
                                         >
                                           <EuiButtonDisplay
+                                            baseClassName="euiButton"
                                             className="euiSuperUpdateButton"
                                             color="primary"
                                             data-test-subj="superDatePickerApplyTimeButton"
@@ -1032,12 +1123,17 @@ exports[`Panels View Component renders panel view container with visualizations
                                             type="button"
                                           >
                                             <button
-                                              className="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
+                                              className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                                               data-test-subj="superDatePickerApplyTimeButton"
                                               disabled={false}
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
                                               type="button"
                                             >
                                               <EuiButtonContent
@@ -1056,19 +1152,20 @@ exports[`Panels View Component renders panel view container with visualizations
                                                 >
                                                   <EuiIcon
                                                     className="euiButtonContent__icon"
+                                                    color="inherit"
                                                     size="m"
                                                     type="refresh"
                                                   >
                                                     <EuiIconRefresh
                                                       aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                       focusable="false"
                                                       role="img"
                                                       style={null}
                                                     >
                                                       <svg
                                                         aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                         focusable="false"
                                                         height={16}
                                                         role="img"
@@ -1119,8 +1216,7 @@ exports[`Panels View Component renders panel view container with visualizations
                 </EuiSpacer>
                 <EmptyPanelView
                   addVizDisabled={false}
-                  getVizContextPanels={[Function]}
-                  page="operationalPanels"
+                  showFlyout={[Function]}
                 >
                   <div>
                     <EuiSpacer
@@ -1143,8 +1239,7 @@ exports[`Panels View Component renders panel view container with visualizations
                             className="euiTextAlign euiTextAlign--center"
                           >
                             <h2>
-                              Start by adding 
-                              your first visualization
+                              Start by adding your first visualization
                             </h2>
                             <EuiSpacer
                               size="m"
@@ -1167,8 +1262,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                   <div
                                     className="euiTextColor euiTextColor--subdued"
                                   >
-                                    Use PPL Queries to fetch & filter observability data and create
-                                     visualizations
+                                    Use PPL Queries to fetch & filter observability data and create visualizations
                                   </div>
                                 </EuiTextColor>
                               </div>
@@ -1196,38 +1290,33 @@ exports[`Panels View Component renders panel view container with visualizations
                           <div
                             className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
-                            <EuiPopover
-                              anchorPosition="downLeft"
-                              button={
-                                <EuiButton
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Add Visualization
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              id="addVisualizationContextMenu"
-                              isOpen={false}
-                              ownFocus={false}
-                              panelPaddingSize="none"
+                            <AddVisualizationPopover
+                              addVizDisabled={false}
+                              showFlyout={[Function]}
                             >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
+                              <EuiPopover
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButton
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    Add visualization
+                                  </EuiButton>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="addVisualizationContextMenu"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
                               >
                                 <div
                                   className="euiPopover euiPopover--anchorDownLeft"
                                   id="addVisualizationContextMenu"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
                                 >
                                   <div
                                     className="euiPopover__anchor"
@@ -1239,6 +1328,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                       onClick={[Function]}
                                     >
                                       <EuiButtonDisplay
+                                        baseClassName="euiButton"
                                         disabled={false}
                                         element="button"
                                         iconSide="right"
@@ -1251,6 +1341,11 @@ exports[`Panels View Component renders panel view container with visualizations
                                           className="euiButton euiButton--primary"
                                           disabled={false}
                                           onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
                                           type="button"
                                         >
                                           <EuiButtonContent
@@ -1268,19 +1363,20 @@ exports[`Panels View Component renders panel view container with visualizations
                                             >
                                               <EuiIcon
                                                 className="euiButtonContent__icon"
+                                                color="inherit"
                                                 size="m"
                                                 type="arrowDown"
                                               >
                                                 <EuiIconArrowDown
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
                                                 >
                                                   <svg
                                                     aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiButtonContent__icon"
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                     focusable="false"
                                                     height={16}
                                                     role="img"
@@ -1299,7 +1395,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                               <span
                                                 className="euiButton__text"
                                               >
-                                                Add Visualization
+                                                Add visualization
                                               </span>
                                             </span>
                                           </EuiButtonContent>
@@ -1308,8 +1404,8 @@ exports[`Panels View Component renders panel view container with visualizations
                                     </EuiButton>
                                   </div>
                                 </div>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
+                              </EuiPopover>
+                            </AddVisualizationPopover>
                           </div>
                         </EuiFlexItem>
                       </div>
@@ -1397,6 +1493,7 @@ exports[`Panels View Component renders panel view container with visualizations
                   editMode={false}
                   endTime="now"
                   http={[MockFunction]}
+                  onEditClick={[Function]}
                   onRefresh={false}
                   panelId="L8Sx53wBDp0rvEg3yoLb"
                   panelVisualizations={Array []}
@@ -1527,7 +1624,7 @@ exports[`Panels View Component renders panel view container with visualizations
 </CustomPanelView>
 `;
 
-exports[`Panels View Component renders panel view container with visualizations 2`] = `
+exports[`Panels View Component renders panel view container without visualizations 1`] = `
 <CustomPanelView
   chrome={
     Object {
@@ -1537,13 +1634,6 @@ exports[`Panels View Component renders panel view container with visualizations
           Array [],
           Array [],
           Array [],
-          Array [],
-          Array [],
-          Array [],
-          Array [],
-          Array [],
-          Array [],
-          Array [],
         ],
         "results": Array [
           Object {
@@ -1574,1731 +1664,31 @@ exports[`Panels View Component renders panel view container with visualizations
               "_subscribe": [Function],
             },
           },
+        ],
+      },
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "#/operational_panels/",
+                "text": "Operational panels",
+              },
+              Object {
+                "href": "observability#/",
+                "text": "Observability",
+              },
+              Object {
+                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                "text": "",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
           Object {
             "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-        ],
-      },
-      "setBreadcrumbs": [MockFunction] {
-        "calls": Array [
-          Array [
-            Array [
-              Object {
-                "href": "#/operational_panels/",
-                "text": "Operational panels",
-              },
-              Object {
-                "href": "observability#/",
-                "text": "Observability",
-              },
-              Object {
-                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                "text": "",
-              },
-            ],
-          ],
-          Array [
-            Array [
-              Object {
-                "href": "#/operational_panels/",
-                "text": "Operational panels",
-              },
-              Object {
-                "href": "observability#/",
-                "text": "Observability",
-              },
-              Object {
-                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                "text": "Test Panel 1",
-              },
-            ],
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      },
-    }
-  }
-  cloneCustomPanel={[MockFunction]}
-  deleteCustomPanel={[MockFunction]}
-  endTime="now"
-  http={[MockFunction]}
-  page="operationalPanels"
-  panelId="L8Sx53wBDp0rvEg3yoLb"
-  parentBreadcrumb={
-    Array [
-      Object {
-        "href": "#/operational_panels/",
-        "text": "Operational panels",
-      },
-      Object {
-        "href": "observability#/",
-        "text": "Observability",
-      },
-    ]
-  }
-  pplService={
-    PPLService {
-      "fetch": [Function],
-      "http": [MockFunction],
-    }
-  }
-  renameCustomPanel={[MockFunction]}
-  setEndTime={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          "now",
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  setStartTime={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          "now-30m",
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  setToast={[MockFunction]}
-  startTime="now-30m"
->
-  <div>
-    <EuiPage>
-      <div
-        className="euiPage"
-      >
-        <EuiPageBody
-          component="div"
-        >
-          <div
-            className="euiPageBody"
-          >
-            <EuiPageHeader>
-              <div
-                className="euiPageHeader euiPageHeader--responsive"
-              >
-                <EuiPageHeaderSection>
-                  <div
-                    className="euiPageHeaderSection"
-                  >
-                    <EuiTitle
-                      size="l"
-                    >
-                      <h1
-                        className="euiTitle euiTitle--large"
-                      />
-                    </EuiTitle>
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                      </div>
-                    </EuiFlexItem>
-                    Created on 
-                    Invalid date
-                  </div>
-                </EuiPageHeaderSection>
-                <EuiPageHeaderSection>
-                  <div
-                    className="euiPageHeaderSection"
-                  >
-                    <EuiFlexGroup
-                      gutterSize="s"
-                    >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      >
-                        <EuiFlexItem>
-                          <div
-                            className="euiFlexItem"
-                          >
-                            <EuiButton
-                              disabled={true}
-                              iconType="pencil"
-                              onClick={[Function]}
-                            >
-                              <EuiButtonDisplay
-                                disabled={true}
-                                element="button"
-                                iconType="pencil"
-                                isDisabled={true}
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <button
-                                  className="euiButton euiButton--primary euiButton-isDisabled"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="left"
-                                    iconType="pencil"
-                                    textProps={
-                                      Object {
-                                        "className": "euiButton__text",
-                                      }
-                                    }
-                                  >
-                                    <span
-                                      className="euiButtonContent euiButton__content"
-                                    >
-                                      <EuiIcon
-                                        className="euiButtonContent__icon"
-                                        size="m"
-                                        type="pencil"
-                                      >
-                                        <EuiIconPencil
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                            focusable="false"
-                                            height={16}
-                                            role="img"
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 01-.708 0 .502.502 0 010-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 010 1.414l-9 9A.997.997 0 015 15H2a1 1 0 01-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0111 1zM5 14H2v-3l3 3z"
-                                            />
-                                          </svg>
-                                        </EuiIconPencil>
-                                      </EuiIcon>
-                                      <span
-                                        className="euiButton__text"
-                                      >
-                                        Edit
-                                      </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <EuiPopover
-                              anchorPosition="downCenter"
-                              button={
-                                <EuiButton
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Panel actions
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              isOpen={false}
-                              ownFocus={false}
-                              panelPaddingSize="none"
-                              withTitle={true}
-                            >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
-                              >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownCenter euiPopover--withTitle"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
-                                >
-                                  <div
-                                    className="euiPopover__anchor"
-                                  >
-                                    <EuiButton
-                                      disabled={false}
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      onClick={[Function]}
-                                    >
-                                      <EuiButtonDisplay
-                                        disabled={false}
-                                        element="button"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        isDisabled={false}
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <button
-                                          className="euiButton euiButton--primary"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                                            >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                size="m"
-                                                type="arrowDown"
-                                              >
-                                                <EuiIconArrowDown
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                      fillRule="non-zero"
-                                                    />
-                                                  </svg>
-                                                </EuiIconArrowDown>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text"
-                                              >
-                                                Panel actions
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
-                                  </div>
-                                </div>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <EuiPopover
-                              anchorPosition="downLeft"
-                              button={
-                                <EuiButton
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Add Visualization
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              id="addVisualizationContextMenu"
-                              isOpen={false}
-                              ownFocus={false}
-                              panelPaddingSize="none"
-                            >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
-                              >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                  id="addVisualizationContextMenu"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
-                                >
-                                  <div
-                                    className="euiPopover__anchor"
-                                  >
-                                    <EuiButton
-                                      disabled={false}
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      onClick={[Function]}
-                                    >
-                                      <EuiButtonDisplay
-                                        disabled={false}
-                                        element="button"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        isDisabled={false}
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <button
-                                          className="euiButton euiButton--primary"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                                            >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                size="m"
-                                                type="arrowDown"
-                                              >
-                                                <EuiIconArrowDown
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                      fillRule="non-zero"
-                                                    />
-                                                  </svg>
-                                                </EuiIconArrowDown>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text"
-                                              >
-                                                Add Visualization
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
-                                  </div>
-                                </div>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </div>
-                </EuiPageHeaderSection>
-              </div>
-            </EuiPageHeader>
-            <EuiPageContentBody>
-              <div
-                className="euiPageContentBody"
-              >
-                <EuiFlexGroup
-                  gutterSize="s"
-                >
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  >
-                    <EuiFlexItem>
-                      <div
-                        className="euiFlexItem"
-                      >
-                        <EuiFieldText
-                          append={
-                            <EuiLink
-                              aria-label="ppl-info"
-                              onClick={[Function]}
-                              style={
-                                Object {
-                                  "padding": "10px",
-                                }
-                              }
-                            >
-                              PPL
-                            </EuiLink>
-                          }
-                          disabled={true}
-                          fullWidth={true}
-                          onChange={[Function]}
-                          onKeyPress={[Function]}
-                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                          value=""
-                        >
-                          <EuiFormControlLayout
-                            append={
-                              <EuiLink
-                                aria-label="ppl-info"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "padding": "10px",
-                                  }
-                                }
-                              >
-                                PPL
-                              </EuiLink>
-                            }
-                            fullWidth={true}
-                          >
-                            <div
-                              className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
-                            >
-                              <div
-                                className="euiFormControlLayout__childrenWrapper"
-                              >
-                                <EuiValidatableControl>
-                                  <input
-                                    className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                                    disabled={true}
-                                    onChange={[Function]}
-                                    onKeyPress={[Function]}
-                                    placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                                    type="text"
-                                    value=""
-                                  />
-                                </EuiValidatableControl>
-                                <EuiFormControlLayoutIcons />
-                              </div>
-                              <EuiLink
-                                aria-label="ppl-info"
-                                className="euiFormControlLayout__append"
-                                key="0/.0"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "padding": "10px",
-                                  }
-                                }
-                              >
-                                <button
-                                  aria-label="ppl-info"
-                                  className="euiLink euiLink--primary euiFormControlLayout__append"
-                                  disabled={false}
-                                  onClick={[Function]}
-                                  style={
-                                    Object {
-                                      "padding": "10px",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  PPL
-                                </button>
-                              </EuiLink>
-                            </div>
-                          </EuiFormControlLayout>
-                        </EuiFieldText>
-                      </div>
-                    </EuiFlexItem>
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <div
-                        className="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
-                        <EuiSuperDatePicker
-                          commonlyUsedRanges={
-                            Array [
-                              Object {
-                                "end": "now/d",
-                                "label": "Today",
-                                "start": "now/d",
-                              },
-                              Object {
-                                "end": "now/w",
-                                "label": "This week",
-                                "start": "now/w",
-                              },
-                              Object {
-                                "end": "now/M",
-                                "label": "This month",
-                                "start": "now/M",
-                              },
-                              Object {
-                                "end": "now/y",
-                                "label": "This year",
-                                "start": "now/y",
-                              },
-                              Object {
-                                "end": "now-1d/d",
-                                "label": "Yesterday",
-                                "start": "now-1d/d",
-                              },
-                              Object {
-                                "end": "now",
-                                "label": "Week to date",
-                                "start": "now/w",
-                              },
-                              Object {
-                                "end": "now",
-                                "label": "Month to date",
-                                "start": "now/M",
-                              },
-                              Object {
-                                "end": "now",
-                                "label": "Year to date",
-                                "start": "now/y",
-                              },
-                            ]
-                          }
-                          dateFormat=""
-                          end="now"
-                          isAutoRefreshOnly={false}
-                          isDisabled={false}
-                          isPaused={true}
-                          onTimeChange={[Function]}
-                          recentlyUsedRanges={Array []}
-                          refreshInterval={0}
-                          showUpdateButton={true}
-                          start="now-30m"
-                          timeFormat="HH:mm"
-                        >
-                          <EuiFlexGroup
-                            className="euiSuperDatePicker__flexWrapper"
-                            gutterSize="s"
-                            responsive={false}
-                          >
-                            <div
-                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
-                            >
-                              <EuiFlexItem>
-                                <div
-                                  className="euiFlexItem"
-                                >
-                                  <EuiFormControlLayout
-                                    className="euiSuperDatePicker"
-                                    isDisabled={false}
-                                    prepend={
-                                      <EuiQuickSelectPopover
-                                        applyTime={[Function]}
-                                        commonlyUsedRanges={
-                                          Array [
-                                            Object {
-                                              "end": "now/d",
-                                              "label": "Today",
-                                              "start": "now/d",
-                                            },
-                                            Object {
-                                              "end": "now/w",
-                                              "label": "This week",
-                                              "start": "now/w",
-                                            },
-                                            Object {
-                                              "end": "now/M",
-                                              "label": "This month",
-                                              "start": "now/M",
-                                            },
-                                            Object {
-                                              "end": "now/y",
-                                              "label": "This year",
-                                              "start": "now/y",
-                                            },
-                                            Object {
-                                              "end": "now-1d/d",
-                                              "label": "Yesterday",
-                                              "start": "now-1d/d",
-                                            },
-                                            Object {
-                                              "end": "now",
-                                              "label": "Week to date",
-                                              "start": "now/w",
-                                            },
-                                            Object {
-                                              "end": "now",
-                                              "label": "Month to date",
-                                              "start": "now/M",
-                                            },
-                                            Object {
-                                              "end": "now",
-                                              "label": "Year to date",
-                                              "start": "now/y",
-                                            },
-                                          ]
-                                        }
-                                        dateFormat=""
-                                        end="now"
-                                        isAutoRefreshOnly={false}
-                                        isDisabled={false}
-                                        isPaused={true}
-                                        recentlyUsedRanges={Array []}
-                                        refreshInterval={0}
-                                        start="now-30m"
-                                      />
-                                    }
-                                  >
-                                    <div
-                                      className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
-                                    >
-                                      <EuiQuickSelectPopover
-                                        applyTime={[Function]}
-                                        className="euiFormControlLayout__prepend"
-                                        commonlyUsedRanges={
-                                          Array [
-                                            Object {
-                                              "end": "now/d",
-                                              "label": "Today",
-                                              "start": "now/d",
-                                            },
-                                            Object {
-                                              "end": "now/w",
-                                              "label": "This week",
-                                              "start": "now/w",
-                                            },
-                                            Object {
-                                              "end": "now/M",
-                                              "label": "This month",
-                                              "start": "now/M",
-                                            },
-                                            Object {
-                                              "end": "now/y",
-                                              "label": "This year",
-                                              "start": "now/y",
-                                            },
-                                            Object {
-                                              "end": "now-1d/d",
-                                              "label": "Yesterday",
-                                              "start": "now-1d/d",
-                                            },
-                                            Object {
-                                              "end": "now",
-                                              "label": "Week to date",
-                                              "start": "now/w",
-                                            },
-                                            Object {
-                                              "end": "now",
-                                              "label": "Month to date",
-                                              "start": "now/M",
-                                            },
-                                            Object {
-                                              "end": "now",
-                                              "label": "Year to date",
-                                              "start": "now/y",
-                                            },
-                                          ]
-                                        }
-                                        dateFormat=""
-                                        end="now"
-                                        isAutoRefreshOnly={false}
-                                        isDisabled={false}
-                                        isPaused={true}
-                                        key="0/.0"
-                                        recentlyUsedRanges={Array []}
-                                        refreshInterval={0}
-                                        start="now-30m"
-                                      >
-                                        <EuiPopover
-                                          anchorClassName="euiQuickSelectPopover__anchor"
-                                          anchorPosition="downLeft"
-                                          button={
-                                            <EuiButtonEmpty
-                                              aria-label="Date quick select"
-                                              className="euiFormControlLayout__prepend"
-                                              data-test-subj="superDatePickerToggleQuickMenuButton"
-                                              iconSide="right"
-                                              iconType="arrowDown"
-                                              isDisabled={false}
-                                              onClick={[Function]}
-                                              size="xs"
-                                              textProps={
-                                                Object {
-                                                  "className": "euiQuickSelectPopover__buttonText",
-                                                }
-                                              }
-                                            >
-                                              <EuiIcon
-                                                type="calendar"
-                                              />
-                                            </EuiButtonEmpty>
-                                          }
-                                          closePopover={[Function]}
-                                          display="inlineBlock"
-                                          hasArrow={true}
-                                          id="QuickSelectPopover"
-                                          isOpen={false}
-                                          ownFocus={true}
-                                          panelPaddingSize="m"
-                                        >
-                                          <EuiOutsideClickDetector
-                                            isDisabled={true}
-                                            onOutsideClick={[Function]}
-                                          >
-                                            <div
-                                              className="euiPopover euiPopover--anchorDownLeft"
-                                              id="QuickSelectPopover"
-                                              onKeyDown={[Function]}
-                                              onMouseDown={[Function]}
-                                              onMouseUp={[Function]}
-                                              onTouchEnd={[Function]}
-                                              onTouchStart={[Function]}
-                                            >
-                                              <div
-                                                className="euiPopover__anchor euiQuickSelectPopover__anchor"
-                                              >
-                                                <EuiButtonEmpty
-                                                  aria-label="Date quick select"
-                                                  className="euiFormControlLayout__prepend"
-                                                  data-test-subj="superDatePickerToggleQuickMenuButton"
-                                                  iconSide="right"
-                                                  iconType="arrowDown"
-                                                  isDisabled={false}
-                                                  onClick={[Function]}
-                                                  size="xs"
-                                                  textProps={
-                                                    Object {
-                                                      "className": "euiQuickSelectPopover__buttonText",
-                                                    }
-                                                  }
-                                                >
-                                                  <button
-                                                    aria-label="Date quick select"
-                                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
-                                                    data-test-subj="superDatePickerToggleQuickMenuButton"
-                                                    disabled={false}
-                                                    onClick={[Function]}
-                                                    type="button"
-                                                  >
-                                                    <EuiButtonContent
-                                                      className="euiButtonEmpty__content"
-                                                      iconSide="right"
-                                                      iconType="arrowDown"
-                                                      textProps={
-                                                        Object {
-                                                          "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                                        }
-                                                      }
-                                                    >
-                                                      <span
-                                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                                                      >
-                                                        <EuiIcon
-                                                          className="euiButtonContent__icon"
-                                                          size="m"
-                                                          type="arrowDown"
-                                                        >
-                                                          <EuiIconArrowDown
-                                                            aria-hidden={true}
-                                                            className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                            focusable="false"
-                                                            role="img"
-                                                            style={null}
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                              focusable="false"
-                                                              height={16}
-                                                              role="img"
-                                                              style={null}
-                                                              viewBox="0 0 16 16"
-                                                              width={16}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                                fillRule="non-zero"
-                                                              />
-                                                            </svg>
-                                                          </EuiIconArrowDown>
-                                                        </EuiIcon>
-                                                        <span
-                                                          className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                                        >
-                                                          <EuiIcon
-                                                            type="calendar"
-                                                          >
-                                                            <EuiIconCalendar
-                                                              aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium"
-                                                              focusable="false"
-                                                              role="img"
-                                                              style={null}
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                className="euiIcon euiIcon--medium"
-                                                                focusable="false"
-                                                                height={16}
-                                                                role="img"
-                                                                style={null}
-                                                                viewBox="0 0 16 16"
-                                                                width={16}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
-                                                                  fillRule="evenodd"
-                                                                />
-                                                              </svg>
-                                                            </EuiIconCalendar>
-                                                          </EuiIcon>
-                                                        </span>
-                                                      </span>
-                                                    </EuiButtonContent>
-                                                  </button>
-                                                </EuiButtonEmpty>
-                                              </div>
-                                            </div>
-                                          </EuiOutsideClickDetector>
-                                        </EuiPopover>
-                                      </EuiQuickSelectPopover>
-                                      <div
-                                        className="euiFormControlLayout__childrenWrapper"
-                                      >
-                                        <EuiDatePickerRange
-                                          className="euiDatePickerRange--inGroup"
-                                          endDateControl={<div />}
-                                          iconType={false}
-                                          isCustom={true}
-                                          startDateControl={<div />}
-                                        >
-                                          <div
-                                            className="euiDatePickerRange euiDatePickerRange--inGroup"
-                                          >
-                                            <button
-                                              className="euiSuperDatePicker__prettyFormat"
-                                              data-test-subj="superDatePickerShowDatesButton"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                            >
-                                              Last 30 minutes
-                                              <span
-                                                className="euiSuperDatePicker__prettyFormatLink"
-                                              >
-                                                <EuiI18n
-                                                  default="Show dates"
-                                                  token="euiSuperDatePicker.showDatesButtonLabel"
-                                                >
-                                                  Show dates
-                                                </EuiI18n>
-                                              </span>
-                                            </button>
-                                          </div>
-                                        </EuiDatePickerRange>
-                                        <EuiFormControlLayoutIcons />
-                                      </div>
-                                    </div>
-                                  </EuiFormControlLayout>
-                                </div>
-                              </EuiFlexItem>
-                              <EuiFlexItem
-                                grow={false}
-                              >
-                                <div
-                                  className="euiFlexItem euiFlexItem--flexGrowZero"
-                                >
-                                  <EuiSuperUpdateButton
-                                    data-test-subj="superDatePickerApplyTimeButton"
-                                    isDisabled={false}
-                                    isLoading={false}
-                                    needsUpdate={false}
-                                    onClick={[Function]}
-                                    showTooltip={true}
-                                  >
-                                    <EuiToolTip
-                                      delay="regular"
-                                      position="bottom"
-                                    >
-                                      <span
-                                        className="euiToolTipAnchor"
-                                        onKeyUp={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                      >
-                                        <EuiButton
-                                          className="euiSuperUpdateButton"
-                                          color="primary"
-                                          data-test-subj="superDatePickerApplyTimeButton"
-                                          fill={true}
-                                          iconType="refresh"
-                                          isDisabled={false}
-                                          isLoading={false}
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          textProps={
-                                            Object {
-                                              "className": "euiSuperUpdateButton__text",
-                                            }
-                                          }
-                                        >
-                                          <EuiButtonDisplay
-                                            className="euiSuperUpdateButton"
-                                            color="primary"
-                                            data-test-subj="superDatePickerApplyTimeButton"
-                                            disabled={false}
-                                            element="button"
-                                            fill={true}
-                                            iconType="refresh"
-                                            isDisabled={false}
-                                            isLoading={false}
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            textProps={
-                                              Object {
-                                                "className": "euiSuperUpdateButton__text",
-                                              }
-                                            }
-                                            type="button"
-                                          >
-                                            <button
-                                              className="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
-                                              data-test-subj="superDatePickerApplyTimeButton"
-                                              disabled={false}
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                iconType="refresh"
-                                                isLoading={false}
-                                                textProps={
-                                                  Object {
-                                                    "className": "euiButton__text euiSuperUpdateButton__text",
-                                                  }
-                                                }
-                                              >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
-                                                >
-                                                  <EuiIcon
-                                                    className="euiButtonContent__icon"
-                                                    size="m"
-                                                    type="refresh"
-                                                  >
-                                                    <EuiIconRefresh
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                        focusable="false"
-                                                        height={16}
-                                                        role="img"
-                                                        style={null}
-                                                        viewBox="0 0 16 16"
-                                                        width={16}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
-                                                        />
-                                                      </svg>
-                                                    </EuiIconRefresh>
-                                                  </EuiIcon>
-                                                  <span
-                                                    className="euiButton__text euiSuperUpdateButton__text"
-                                                  >
-                                                    <EuiI18n
-                                                      default="Refresh"
-                                                      token="euiSuperUpdateButton.refreshButtonLabel"
-                                                    >
-                                                      Refresh
-                                                    </EuiI18n>
-                                                  </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
-                                      </span>
-                                    </EuiToolTip>
-                                  </EuiSuperUpdateButton>
-                                </div>
-                              </EuiFlexItem>
-                            </div>
-                          </EuiFlexGroup>
-                        </EuiSuperDatePicker>
-                      </div>
-                    </EuiFlexItem>
-                  </div>
-                </EuiFlexGroup>
-                <EuiSpacer
-                  size="l"
-                >
-                  <div
-                    className="euiSpacer euiSpacer--l"
-                  />
-                </EuiSpacer>
-                <EmptyPanelView
-                  addVizDisabled={false}
-                  getVizContextPanels={[Function]}
-                  page="operationalPanels"
-                >
-                  <div>
-                    <EuiSpacer
-                      size="xxl"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--xxl"
-                      />
-                    </EuiSpacer>
-                    <EuiText
-                      textAlign="center"
-                    >
-                      <div
-                        className="euiText euiText--medium"
-                      >
-                        <EuiTextAlign
-                          textAlign="center"
-                        >
-                          <div
-                            className="euiTextAlign euiTextAlign--center"
-                          >
-                            <h2>
-                              Start by adding 
-                              your first visualization
-                            </h2>
-                            <EuiSpacer
-                              size="m"
-                            >
-                              <div
-                                className="euiSpacer euiSpacer--m"
-                              />
-                            </EuiSpacer>
-                            <EuiText
-                              color="subdued"
-                              size="m"
-                            >
-                              <div
-                                className="euiText euiText--medium"
-                              >
-                                <EuiTextColor
-                                  color="subdued"
-                                  component="div"
-                                >
-                                  <div
-                                    className="euiTextColor euiTextColor--subdued"
-                                  >
-                                    Use PPL Queries to fetch & filter observability data and create
-                                     visualizations
-                                  </div>
-                                </EuiTextColor>
-                              </div>
-                            </EuiText>
-                          </div>
-                        </EuiTextAlign>
-                      </div>
-                    </EuiText>
-                    <EuiSpacer
-                      size="m"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--m"
-                      />
-                    </EuiSpacer>
-                    <EuiFlexGroup
-                      justifyContent="center"
-                    >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                      >
-                        <EuiFlexItem
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                          >
-                            <EuiPopover
-                              anchorPosition="downLeft"
-                              button={
-                                <EuiButton
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Add Visualization
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              id="addVisualizationContextMenu"
-                              isOpen={false}
-                              ownFocus={false}
-                              panelPaddingSize="none"
-                            >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
-                              >
-                                <div
-                                  className="euiPopover euiPopover--anchorDownLeft"
-                                  id="addVisualizationContextMenu"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
-                                >
-                                  <div
-                                    className="euiPopover__anchor"
-                                  >
-                                    <EuiButton
-                                      disabled={false}
-                                      iconSide="right"
-                                      iconType="arrowDown"
-                                      onClick={[Function]}
-                                    >
-                                      <EuiButtonDisplay
-                                        disabled={false}
-                                        element="button"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        isDisabled={false}
-                                        onClick={[Function]}
-                                        type="button"
-                                      >
-                                        <button
-                                          className="euiButton euiButton--primary"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                                            >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                size="m"
-                                                type="arrowDown"
-                                              >
-                                                <EuiIconArrowDown
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiButtonContent__icon"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                      fillRule="non-zero"
-                                                    />
-                                                  </svg>
-                                                </EuiIconArrowDown>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text"
-                                              >
-                                                Add Visualization
-                                              </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
-                                  </div>
-                                </div>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                    <EuiSpacer
-                      size="xxl"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--xxl"
-                      />
-                    </EuiSpacer>
-                  </div>
-                </EmptyPanelView>
-                <PanelGrid
-                  chrome={
-                    Object {
-                      "getIsNavDrawerLocked$": [MockFunction] {
-                        "calls": Array [
-                          Array [],
-                          Array [],
-                          Array [],
-                          Array [],
-                          Array [],
-                          Array [],
-                          Array [],
-                          Array [],
-                          Array [],
-                          Array [],
-                          Array [],
-                        ],
-                        "results": Array [
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                          Object {
-                            "type": "return",
-                            "value": Observable {
-                              "_isScalar": false,
-                              "_subscribe": [Function],
-                            },
-                          },
-                        ],
-                      },
-                      "setBreadcrumbs": [MockFunction] {
-                        "calls": Array [
-                          Array [
-                            Array [
-                              Object {
-                                "href": "#/operational_panels/",
-                                "text": "Operational panels",
-                              },
-                              Object {
-                                "href": "observability#/",
-                                "text": "Observability",
-                              },
-                              Object {
-                                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                                "text": "",
-                              },
-                            ],
-                          ],
-                          Array [
-                            Array [
-                              Object {
-                                "href": "#/operational_panels/",
-                                "text": "Operational panels",
-                              },
-                              Object {
-                                "href": "observability#/",
-                                "text": "Observability",
-                              },
-                              Object {
-                                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                                "text": "Test Panel 1",
-                              },
-                            ],
-                          ],
-                        ],
-                        "results": Array [
-                          Object {
-                            "type": "return",
-                            "value": undefined,
-                          },
-                          Object {
-                            "type": "return",
-                            "value": undefined,
-                          },
-                        ],
-                      },
-                    }
-                  }
-                  cloneVisualization={[Function]}
-                  editActionType=""
-                  editMode={false}
-                  endTime="now"
-                  http={[MockFunction]}
-                  onRefresh={false}
-                  panelId="L8Sx53wBDp0rvEg3yoLb"
-                  panelVisualizations={Array []}
-                  pplFilterValue=""
-                  pplService={
-                    PPLService {
-                      "fetch": [Function],
-                      "http": [MockFunction],
-                    }
-                  }
-                  setPanelVisualizations={[Function]}
-                  showFlyout={[Function]}
-                  startTime="now-30m"
-                >
-                  <WidthProvider
-                    breakpoints={
-                      Object {
-                        "lg": 1200,
-                        "md": 996,
-                        "sm": 768,
-                        "xs": 480,
-                        "xxs": 0,
-                      }
-                    }
-                    className="layout full-width"
-                    cols={
-                      Object {
-                        "lg": 12,
-                        "md": 12,
-                        "sm": 12,
-                        "xs": 1,
-                        "xxs": 1,
-                      }
-                    }
-                    layouts={
-                      Object {
-                        "lg": Array [],
-                        "md": Array [],
-                        "sm": Array [],
-                      }
-                    }
-                    measureBeforeMount={false}
-                    onLayoutChange={[Function]}
-                  >
-                    <ResponsiveReactGridLayout
-                      breakpoints={
-                        Object {
-                          "lg": 1200,
-                          "md": 996,
-                          "sm": 768,
-                          "xs": 480,
-                          "xxs": 0,
-                        }
-                      }
-                      className="layout full-width"
-                      cols={
-                        Object {
-                          "lg": 12,
-                          "md": 12,
-                          "sm": 12,
-                          "xs": 1,
-                          "xxs": 1,
-                        }
-                      }
-                      layouts={
-                        Object {
-                          "lg": Array [],
-                          "md": Array [],
-                          "sm": Array [],
-                        }
-                      }
-                      onBreakpointChange={[Function]}
-                      onLayoutChange={[Function]}
-                      onWidthChange={[Function]}
-                      width={0}
-                    >
-                      <ReactGridLayout
-                        autoSize={true}
-                        className="layout full-width"
-                        cols={1}
-                        compactType="vertical"
-                        containerPadding={null}
-                        draggableCancel=""
-                        draggableHandle=""
-                        isDraggable={true}
-                        isResizable={true}
-                        layout={Array []}
-                        margin={
-                          Array [
-                            10,
-                            10,
-                          ]
-                        }
-                        maxRows={Infinity}
-                        onDrag={[Function]}
-                        onDragStart={[Function]}
-                        onDragStop={[Function]}
-                        onLayoutChange={[Function]}
-                        onResize={[Function]}
-                        onResizeStart={[Function]}
-                        onResizeStop={[Function]}
-                        preventCollision={false}
-                        rowHeight={150}
-                        style={Object {}}
-                        useCSSTransforms={true}
-                        verticalCompact={true}
-                        width={0}
-                      >
-                        <div
-                          className="react-grid-layout layout full-width"
-                          style={
-                            Object {
-                              "height": "10px",
-                            }
-                          }
-                        />
-                      </ReactGridLayout>
-                    </ResponsiveReactGridLayout>
-                  </WidthProvider>
-                </PanelGrid>
-              </div>
-            </EuiPageContentBody>
-          </div>
-        </EuiPageBody>
-      </div>
-    </EuiPage>
-  </div>
-</CustomPanelView>
-`;
-
-exports[`Panels View Component renders panel view container without visualizations 1`] = `
-<CustomPanelView
-  chrome={
-    Object {
-      "getIsNavDrawerLocked$": [MockFunction] {
-        "calls": Array [
-          Array [],
-          Array [],
-          Array [],
-          Array [],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-          Object {
-            "type": "return",
-            "value": Observable {
-              "_isScalar": false,
-              "_subscribe": [Function],
-            },
-          },
-        ],
-      },
-      "setBreadcrumbs": [MockFunction] {
-        "calls": Array [
-          Array [
-            Array [
-              Object {
-                "href": "#/operational_panels/",
-                "text": "Operational panels",
-              },
-              Object {
-                "href": "observability#/",
-                "text": "Observability",
-              },
-              Object {
-                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
-                "text": "",
-              },
-            ],
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
+            "value": undefined,
           },
         ],
       },
@@ -3306,11 +1696,20 @@ exports[`Panels View Component renders panel view container without visualizatio
   }
   cloneCustomPanel={[MockFunction]}
   deleteCustomPanel={[MockFunction]}
+  dslService={
+    DSLService {
+      "fetch": [Function],
+      "fetchFields": [Function],
+      "fetchIndices": [Function],
+      "http": [MockFunction],
+    }
+  }
   endTime="now"
   http={[MockFunction]}
+  onEditClick={[Function]}
   page="operationalPanels"
   panelId="L8Sx53wBDp0rvEg3yoLb"
-  parentBreadcrumb={
+  parentBreadcrumbs={
     Array [
       Object {
         "href": "#/operational_panels/",
@@ -3335,19 +1734,22 @@ exports[`Panels View Component renders panel view container without visualizatio
   startTime="now-30m"
 >
   <div>
-    <EuiPage>
+    <EuiPage
+      id="panelView"
+    >
       <div
-        className="euiPage"
+        className="euiPage euiPage--paddingMedium euiPage--grow"
+        id="panelView"
       >
         <EuiPageBody
           component="div"
         >
           <div
-            className="euiPageBody"
+            className="euiPageBody euiPageBody--borderRadiusNone"
           >
             <EuiPageHeader>
-              <div
-                className="euiPageHeader euiPageHeader--responsive"
+              <header
+                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
               >
                 <EuiPageHeaderSection>
                   <div
@@ -3397,6 +1799,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                               onClick={[Function]}
                             >
                               <EuiButtonDisplay
+                                baseClassName="euiButton"
                                 disabled={true}
                                 element="button"
                                 iconType="pencil"
@@ -3408,6 +1811,11 @@ exports[`Panels View Component renders panel view container without visualizatio
                                   className="euiButton euiButton--primary euiButton-isDisabled"
                                   disabled={true}
                                   onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
                                   type="button"
                                 >
                                   <EuiButtonContent
@@ -3425,19 +1833,20 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     >
                                       <EuiIcon
                                         className="euiButtonContent__icon"
+                                        color="inherit"
                                         size="m"
                                         type="pencil"
                                       >
                                         <EuiIconEmpty
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                           focusable="false"
                                           role="img"
                                           style={null}
                                         >
                                           <svg
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                             focusable="false"
                                             height={16}
                                             role="img"
@@ -3482,97 +1891,95 @@ exports[`Panels View Component renders panel view container without visualizatio
                               display="inlineBlock"
                               hasArrow={true}
                               isOpen={false}
-                              ownFocus={false}
+                              ownFocus={true}
                               panelPaddingSize="none"
                               withTitle={true}
                             >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
+                              <div
+                                className="euiPopover euiPopover--anchorDownCenter"
+                                withTitle={true}
                               >
                                 <div
-                                  className="euiPopover euiPopover--anchorDownCenter euiPopover--withTitle"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
+                                  className="euiPopover__anchor"
                                 >
-                                  <div
-                                    className="euiPopover__anchor"
+                                  <EuiButton
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
                                   >
-                                    <EuiButton
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
                                       disabled={false}
+                                      element="button"
                                       iconSide="right"
                                       iconType="arrowDown"
+                                      isDisabled={false}
                                       onClick={[Function]}
+                                      type="button"
                                     >
-                                      <EuiButtonDisplay
+                                      <button
+                                        className="euiButton euiButton--primary"
                                         disabled={false}
-                                        element="button"
-                                        iconSide="right"
-                                        iconType="arrowDown"
-                                        isDisabled={false}
                                         onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "minWidth": undefined,
+                                          }
+                                        }
                                         type="button"
                                       >
-                                        <button
-                                          className="euiButton euiButton--primary"
-                                          disabled={false}
-                                          onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
-                                              Object {
-                                                "className": "euiButton__text",
-                                              }
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
                                             }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="arrowDown"
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                size="m"
-                                                type="arrowDown"
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
                                               >
-                                                <EuiIconEmpty
+                                                <svg
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                   focusable="false"
+                                                  height={16}
                                                   role="img"
                                                   style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text"
-                                              >
-                                                Panel actions
-                                              </span>
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Panel actions
                                             </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
-                                  </div>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
                                 </div>
-                              </EuiOutsideClickDetector>
+                              </div>
                             </EuiPopover>
                           </div>
                         </EuiFlexItem>
@@ -3582,38 +1989,33 @@ exports[`Panels View Component renders panel view container without visualizatio
                           <div
                             className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
-                            <EuiPopover
-                              anchorPosition="downLeft"
-                              button={
-                                <EuiButton
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Add Visualization
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              id="addVisualizationContextMenu"
-                              isOpen={false}
-                              ownFocus={false}
-                              panelPaddingSize="none"
+                            <AddVisualizationPopover
+                              addVizDisabled={false}
+                              showFlyout={[Function]}
                             >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
+                              <EuiPopover
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButton
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    Add visualization
+                                  </EuiButton>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="addVisualizationContextMenu"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
                               >
                                 <div
                                   className="euiPopover euiPopover--anchorDownLeft"
                                   id="addVisualizationContextMenu"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
                                 >
                                   <div
                                     className="euiPopover__anchor"
@@ -3625,6 +2027,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                       onClick={[Function]}
                                     >
                                       <EuiButtonDisplay
+                                        baseClassName="euiButton"
                                         disabled={false}
                                         element="button"
                                         iconSide="right"
@@ -3637,6 +2040,11 @@ exports[`Panels View Component renders panel view container without visualizatio
                                           className="euiButton euiButton--primary"
                                           disabled={false}
                                           onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
                                           type="button"
                                         >
                                           <EuiButtonContent
@@ -3654,19 +2062,20 @@ exports[`Panels View Component renders panel view container without visualizatio
                                             >
                                               <EuiIcon
                                                 className="euiButtonContent__icon"
+                                                color="inherit"
                                                 size="m"
                                                 type="arrowDown"
                                               >
                                                 <EuiIconEmpty
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
                                                 >
                                                   <svg
                                                     aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                     focusable="false"
                                                     height={16}
                                                     role="img"
@@ -3680,7 +2089,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                               <span
                                                 className="euiButton__text"
                                               >
-                                                Add Visualization
+                                                Add visualization
                                               </span>
                                             </span>
                                           </EuiButtonContent>
@@ -3689,15 +2098,15 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     </EuiButton>
                                   </div>
                                 </div>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
+                              </EuiPopover>
+                            </AddVisualizationPopover>
                           </div>
                         </EuiFlexItem>
                       </div>
                     </EuiFlexGroup>
                   </div>
                 </EuiPageHeaderSection>
-              </div>
+              </header>
             </EuiPageHeader>
             <EuiPageContentBody>
               <div
@@ -3713,7 +2122,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                       <div
                         className="euiFlexItem"
                       >
-                        <EuiFieldText
+                        <Autocomplete
                           append={
                             <EuiLink
                               aria-label="ppl-info"
@@ -3727,77 +2136,158 @@ exports[`Panels View Component renders panel view container without visualizatio
                               PPL
                             </EuiLink>
                           }
-                          disabled={true}
-                          fullWidth={true}
-                          onChange={[Function]}
-                          onKeyPress={[Function]}
+                          baseQuery="source = "
+                          dslService={
+                            DSLService {
+                              "fetch": [Function],
+                              "fetchFields": [Function],
+                              "fetchIndices": [Function],
+                              "http": [MockFunction],
+                            }
+                          }
+                          getSuggestions={[Function]}
+                          handleQueryChange={[Function]}
+                          handleQuerySearch={[Function]}
+                          isDisabled={true}
+                          key="autocomplete-search-bar"
+                          onItemSelect={[Function]}
                           placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                          value=""
+                          possibleCommands={
+                            Array [
+                              Object {
+                                "label": "where",
+                              },
+                            ]
+                          }
+                          query=""
+                          tabId="panels-filter"
+                          tempQuery=""
                         >
-                          <EuiFormControlLayout
-                            append={
-                              <EuiLink
-                                aria-label="ppl-info"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "padding": "10px",
-                                  }
-                                }
-                              >
-                                PPL
-                              </EuiLink>
-                            }
-                            fullWidth={true}
+                          <div
+                            aria-expanded={false}
+                            aria-haspopup="listbox"
+                            aria-labelledby="autocomplete-1-label"
+                            className="aa-Autocomplete"
+                            id="autocomplete-root"
+                            role="combobox"
                           >
-                            <div
-                              className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
-                            >
-                              <div
-                                className="euiFormControlLayout__childrenWrapper"
-                              >
-                                <EuiValidatableControl>
-                                  <input
-                                    className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                                    disabled={true}
-                                    onChange={[Function]}
-                                    onKeyPress={[Function]}
-                                    placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                                    type="text"
-                                    value=""
-                                  />
-                                </EuiValidatableControl>
-                                <EuiFormControlLayoutIcons />
-                              </div>
-                              <EuiLink
-                                aria-label="ppl-info"
-                                className="euiFormControlLayout__append"
-                                key="0/.0"
-                                onClick={[Function]}
-                                style={
-                                  Object {
-                                    "padding": "10px",
-                                  }
-                                }
-                              >
-                                <button
+                            <EuiFieldText
+                              append={
+                                <EuiLink
                                   aria-label="ppl-info"
-                                  className="euiLink euiLink--primary euiFormControlLayout__append"
-                                  disabled={false}
                                   onClick={[Function]}
                                   style={
                                     Object {
                                       "padding": "10px",
                                     }
                                   }
-                                  type="button"
                                 >
                                   PPL
-                                </button>
-                              </EuiLink>
-                            </div>
-                          </EuiFormControlLayout>
-                        </EuiFieldText>
+                                </EuiLink>
+                              }
+                              aria-autocomplete="both"
+                              aria-labelledby="autocomplete-1-label"
+                              autoCapitalize="off"
+                              autoComplete="off"
+                              autoCorrect="off"
+                              autoFocus={false}
+                              data-test-subj="searchAutocompleteTextArea"
+                              disabled={true}
+                              enterKeyHint="search"
+                              fullWidth={true}
+                              id="autocomplete-textarea"
+                              maxLength={512}
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                              spellCheck="false"
+                              type="search"
+                              value=""
+                            >
+                              <EuiFormControlLayout
+                                append={
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
+                                    }
+                                  >
+                                    PPL
+                                  </EuiLink>
+                                }
+                                fullWidth={true}
+                                inputId="autocomplete-textarea"
+                              >
+                                <div
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <input
+                                        aria-autocomplete="both"
+                                        aria-labelledby="autocomplete-1-label"
+                                        autoCapitalize="off"
+                                        autoComplete="off"
+                                        autoCorrect="off"
+                                        autoFocus={false}
+                                        className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                        data-test-subj="searchAutocompleteTextArea"
+                                        disabled={true}
+                                        enterKeyHint="search"
+                                        id="autocomplete-textarea"
+                                        maxLength={512}
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                        spellCheck="false"
+                                        type="search"
+                                        value=""
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons />
+                                  </div>
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    className="euiFormControlLayout__append"
+                                    key="0/.0"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
+                                    }
+                                  >
+                                    <button
+                                      aria-label="ppl-info"
+                                      className="euiLink euiLink--primary euiFormControlLayout__append"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                      style={
+                                        Object {
+                                          "padding": "10px",
+                                        }
+                                      }
+                                      type="button"
+                                    >
+                                      PPL
+                                    </button>
+                                  </EuiLink>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiFieldText>
+                          </div>
+                        </Autocomplete>
                       </div>
                     </EuiFlexItem>
                     <EuiFlexItem
@@ -4023,78 +2513,95 @@ exports[`Panels View Component renders panel view container without visualizatio
                                           closePopover={[Function]}
                                           display="inlineBlock"
                                           hasArrow={true}
-                                          id="QuickSelectPopover"
                                           isOpen={false}
                                           ownFocus={true}
                                           panelPaddingSize="m"
                                         >
-                                          <EuiOutsideClickDetector
-                                            isDisabled={true}
-                                            onOutsideClick={[Function]}
+                                          <div
+                                            className="euiPopover euiPopover--anchorDownLeft"
                                           >
                                             <div
-                                              className="euiPopover euiPopover--anchorDownLeft"
-                                              id="QuickSelectPopover"
-                                              onKeyDown={[Function]}
-                                              onMouseDown={[Function]}
-                                              onMouseUp={[Function]}
-                                              onTouchEnd={[Function]}
-                                              onTouchStart={[Function]}
+                                              className="euiPopover__anchor euiQuickSelectPopover__anchor"
                                             >
-                                              <div
-                                                className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                              <EuiButtonEmpty
+                                                aria-label="Date quick select"
+                                                className="euiFormControlLayout__prepend"
+                                                data-test-subj="superDatePickerToggleQuickMenuButton"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                isDisabled={false}
+                                                onClick={[Function]}
+                                                size="xs"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiQuickSelectPopover__buttonText",
+                                                  }
+                                                }
                                               >
-                                                <EuiButtonEmpty
+                                                <button
                                                   aria-label="Date quick select"
-                                                  className="euiFormControlLayout__prepend"
+                                                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                                                   data-test-subj="superDatePickerToggleQuickMenuButton"
-                                                  iconSide="right"
-                                                  iconType="arrowDown"
-                                                  isDisabled={false}
+                                                  disabled={false}
                                                   onClick={[Function]}
-                                                  size="xs"
-                                                  textProps={
-                                                    Object {
-                                                      "className": "euiQuickSelectPopover__buttonText",
-                                                    }
-                                                  }
+                                                  type="button"
                                                 >
-                                                  <button
-                                                    aria-label="Date quick select"
-                                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
-                                                    data-test-subj="superDatePickerToggleQuickMenuButton"
-                                                    disabled={false}
-                                                    onClick={[Function]}
-                                                    type="button"
-                                                  >
-                                                    <EuiButtonContent
-                                                      className="euiButtonEmpty__content"
-                                                      iconSide="right"
-                                                      iconType="arrowDown"
-                                                      textProps={
-                                                        Object {
-                                                          "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
-                                                        }
+                                                  <EuiButtonContent
+                                                    className="euiButtonEmpty__content"
+                                                    iconSide="right"
+                                                    iconSize="s"
+                                                    iconType="arrowDown"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
                                                       }
+                                                    }
+                                                  >
+                                                    <span
+                                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                                     >
+                                                      <EuiIcon
+                                                        className="euiButtonContent__icon"
+                                                        color="inherit"
+                                                        size="s"
+                                                        type="arrowDown"
+                                                      >
+                                                        <EuiIconEmpty
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                          focusable="false"
+                                                          role="img"
+                                                          style={null}
+                                                        >
+                                                          <svg
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                            focusable="false"
+                                                            height={16}
+                                                            role="img"
+                                                            style={null}
+                                                            viewBox="0 0 16 16"
+                                                            width={16}
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                          />
+                                                        </EuiIconEmpty>
+                                                      </EuiIcon>
                                                       <span
-                                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                        className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
                                                       >
                                                         <EuiIcon
-                                                          className="euiButtonContent__icon"
-                                                          size="m"
-                                                          type="arrowDown"
+                                                          type="calendar"
                                                         >
                                                           <EuiIconEmpty
                                                             aria-hidden={true}
-                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                             focusable="false"
                                                             role="img"
                                                             style={null}
                                                           >
                                                             <svg
                                                               aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                               focusable="false"
                                                               height={16}
                                                               role="img"
@@ -4105,40 +2612,13 @@ exports[`Panels View Component renders panel view container without visualizatio
                                                             />
                                                           </EuiIconEmpty>
                                                         </EuiIcon>
-                                                        <span
-                                                          className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
-                                                        >
-                                                          <EuiIcon
-                                                            type="calendar"
-                                                          >
-                                                            <EuiIconEmpty
-                                                              aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                              focusable="false"
-                                                              role="img"
-                                                              style={null}
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                focusable="false"
-                                                                height={16}
-                                                                role="img"
-                                                                style={null}
-                                                                viewBox="0 0 16 16"
-                                                                width={16}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              />
-                                                            </EuiIconEmpty>
-                                                          </EuiIcon>
-                                                        </span>
                                                       </span>
-                                                    </EuiButtonContent>
-                                                  </button>
-                                                </EuiButtonEmpty>
-                                              </div>
+                                                    </span>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonEmpty>
                                             </div>
-                                          </EuiOutsideClickDetector>
+                                          </div>
                                         </EuiPopover>
                                       </EuiQuickSelectPopover>
                                       <div
@@ -4222,6 +2702,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                           }
                                         >
                                           <EuiButtonDisplay
+                                            baseClassName="euiButton"
                                             className="euiSuperUpdateButton"
                                             color="primary"
                                             data-test-subj="superDatePickerApplyTimeButton"
@@ -4242,12 +2723,17 @@ exports[`Panels View Component renders panel view container without visualizatio
                                             type="button"
                                           >
                                             <button
-                                              className="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
+                                              className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
                                               data-test-subj="superDatePickerApplyTimeButton"
                                               disabled={false}
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
                                               type="button"
                                             >
                                               <EuiButtonContent
@@ -4266,19 +2752,20 @@ exports[`Panels View Component renders panel view container without visualizatio
                                                 >
                                                   <EuiIcon
                                                     className="euiButtonContent__icon"
+                                                    color="inherit"
                                                     size="m"
                                                     type="refresh"
                                                   >
                                                     <EuiIconEmpty
                                                       aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                       focusable="false"
                                                       role="img"
                                                       style={null}
                                                     >
                                                       <svg
                                                         aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                         focusable="false"
                                                         height={16}
                                                         role="img"
@@ -4325,8 +2812,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                 </EuiSpacer>
                 <EmptyPanelView
                   addVizDisabled={false}
-                  getVizContextPanels={[Function]}
-                  page="operationalPanels"
+                  showFlyout={[Function]}
                 >
                   <div>
                     <EuiSpacer
@@ -4349,8 +2835,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                             className="euiTextAlign euiTextAlign--center"
                           >
                             <h2>
-                              Start by adding 
-                              your first visualization
+                              Start by adding your first visualization
                             </h2>
                             <EuiSpacer
                               size="m"
@@ -4373,8 +2858,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                   <div
                                     className="euiTextColor euiTextColor--subdued"
                                   >
-                                    Use PPL Queries to fetch & filter observability data and create
-                                     visualizations
+                                    Use PPL Queries to fetch & filter observability data and create visualizations
                                   </div>
                                 </EuiTextColor>
                               </div>
@@ -4402,38 +2886,33 @@ exports[`Panels View Component renders panel view container without visualizatio
                           <div
                             className="euiFlexItem euiFlexItem--flexGrowZero"
                           >
-                            <EuiPopover
-                              anchorPosition="downLeft"
-                              button={
-                                <EuiButton
-                                  disabled={false}
-                                  iconSide="right"
-                                  iconType="arrowDown"
-                                  onClick={[Function]}
-                                >
-                                  Add Visualization
-                                </EuiButton>
-                              }
-                              closePopover={[Function]}
-                              display="inlineBlock"
-                              hasArrow={true}
-                              id="addVisualizationContextMenu"
-                              isOpen={false}
-                              ownFocus={false}
-                              panelPaddingSize="none"
+                            <AddVisualizationPopover
+                              addVizDisabled={false}
+                              showFlyout={[Function]}
                             >
-                              <EuiOutsideClickDetector
-                                isDisabled={true}
-                                onOutsideClick={[Function]}
+                              <EuiPopover
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButton
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    Add visualization
+                                  </EuiButton>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="addVisualizationContextMenu"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
                               >
                                 <div
                                   className="euiPopover euiPopover--anchorDownLeft"
                                   id="addVisualizationContextMenu"
-                                  onKeyDown={[Function]}
-                                  onMouseDown={[Function]}
-                                  onMouseUp={[Function]}
-                                  onTouchEnd={[Function]}
-                                  onTouchStart={[Function]}
                                 >
                                   <div
                                     className="euiPopover__anchor"
@@ -4445,6 +2924,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                       onClick={[Function]}
                                     >
                                       <EuiButtonDisplay
+                                        baseClassName="euiButton"
                                         disabled={false}
                                         element="button"
                                         iconSide="right"
@@ -4457,6 +2937,11 @@ exports[`Panels View Component renders panel view container without visualizatio
                                           className="euiButton euiButton--primary"
                                           disabled={false}
                                           onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
                                           type="button"
                                         >
                                           <EuiButtonContent
@@ -4474,19 +2959,20 @@ exports[`Panels View Component renders panel view container without visualizatio
                                             >
                                               <EuiIcon
                                                 className="euiButtonContent__icon"
+                                                color="inherit"
                                                 size="m"
                                                 type="arrowDown"
                                               >
                                                 <EuiIconEmpty
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
                                                 >
                                                   <svg
                                                     aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                     focusable="false"
                                                     height={16}
                                                     role="img"
@@ -4500,7 +2986,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                               <span
                                                 className="euiButton__text"
                                               >
-                                                Add Visualization
+                                                Add visualization
                                               </span>
                                             </span>
                                           </EuiButtonContent>
@@ -4509,8 +2995,8 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     </EuiButton>
                                   </div>
                                 </div>
-                              </EuiOutsideClickDetector>
-                            </EuiPopover>
+                              </EuiPopover>
+                            </AddVisualizationPopover>
                           </div>
                         </EuiFlexItem>
                       </div>
@@ -4598,6 +3084,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                   editMode={false}
                   endTime="now"
                   http={[MockFunction]}
+                  onEditClick={[Function]}
                   onRefresh={false}
                   panelId="L8Sx53wBDp0rvEg3yoLb"
                   panelVisualizations={Array []}
diff --git a/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx b/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
index 3ad38f26d..81cb151cd 100644
--- a/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
+++ b/dashboards-observability/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
@@ -21,7 +21,7 @@ import DSLService from '../../../../public/services/requests/dsl';
 import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
 import { HttpResponse } from '../../../../../../src/core/public';
 
-describe.skip('Panels View Component', () => {
+describe('Panels View Component', () => {
   configure({ adapter: new Adapter() });
 
   it('renders panel view container without visualizations', async () => {
diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index 2657b951e..ee8985c12 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -2,374 +2,1295 @@
 
 exports[`Utils helper functions renders displayVisualization function 1`] = `
 <div>
-  <Bar
-    layoutConfig={
-      Object {
-        "xaxis": Object {
-          "fixedrange": false,
-          "showgrid": false,
-        },
-        "yaxis": Object {
-          "fixedrange": false,
-          "showgrid": false,
-        },
-      }
-    }
+  <Visualization
     visualizations={
       Object {
         "data": Object {
-          "Carrier": Array [
-            "BeatsWest",
-            "Logstash Airways",
-            "OpenSearch Dashboards Airlines",
-            "OpenSearch-Air",
-          ],
-          "avg(FlightDelayMin)": Array [
-            53.65384615384615,
-            45.36144578313253,
-            63.1578947368421,
-            46.81318681318681,
-          ],
-        },
-        "jsonData": Array [
-          Object {
-            "Carrier": "BeatsWest",
-            "avg(FlightDelayMin)": 53.65384615384615,
+          "appData": Object {},
+          "defaultAxes": Object {
+            "xaxis": Array [
+              Object {
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+            "yaxis": Array [
+              Object {
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+            ],
           },
-          Object {
-            "Carrier": "Logstash Airways",
-            "avg(FlightDelayMin)": 45.36144578313253,
+          "indexFields": Object {},
+          "query": Object {},
+          "rawVizData": Object {
+            "data": Object {
+              "Carrier": Array [
+                "BeatsWest",
+                "Logstash Airways",
+                "OpenSearch Dashboards Airlines",
+                "OpenSearch-Air",
+              ],
+              "avg(FlightDelayMin)": Array [
+                53.65384615384615,
+                45.36144578313253,
+                63.1578947368421,
+                46.81318681318681,
+              ],
+            },
+            "jsonData": Array [
+              Object {
+                "Carrier": "BeatsWest",
+                "avg(FlightDelayMin)": 53.65384615384615,
+              },
+              Object {
+                "Carrier": "Logstash Airways",
+                "avg(FlightDelayMin)": 45.36144578313253,
+              },
+              Object {
+                "Carrier": "OpenSearch Dashboards Airlines",
+                "avg(FlightDelayMin)": 63.1578947368421,
+              },
+              Object {
+                "Carrier": "OpenSearch-Air",
+                "avg(FlightDelayMin)": 46.81318681318681,
+              },
+            ],
+            "metadata": Object {
+              "fields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "size": 4,
+            "status": 200,
           },
-          Object {
-            "Carrier": "OpenSearch Dashboards Airlines",
-            "avg(FlightDelayMin)": 63.1578947368421,
+          "userConfigs": Object {},
+        },
+        "vis": Object {
+          "category": "Visualizations",
+          "categoryAxis": "xaxis",
+          "component": [Function],
+          "editorConfig": Object {
+            "panelTabs": Array [
+              Object {
+                "editor": [Function],
+                "id": "data-panel",
+                "mapTo": "dataConfig",
+                "name": "Data",
+                "sections": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "value_options",
+                    "mapTo": "valueOptions",
+                    "name": "Value options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "isSingleSelection": false,
+                        "mapTo": "xaxis",
+                        "name": "X-axis",
+                      },
+                      Object {
+                        "component": null,
+                        "isSingleSelection": false,
+                        "mapTo": "yaxis",
+                        "name": "Y-axis",
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_options",
+                    "mapTo": "chartOptions",
+                    "name": "Chart options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "isSingleSelection": true,
+                        "mapTo": "orientation",
+                        "name": "Orientation",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "name": "Vertical",
+                              "orientationId": "v",
+                            },
+                          ],
+                          "dropdownList": Array [
+                            Object {
+                              "name": "Vertical",
+                              "orientationId": "v",
+                            },
+                            Object {
+                              "name": "Horizontal",
+                              "orientationId": "h",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "isSingleSelection": true,
+                        "mapTo": "mode",
+                        "name": "Mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "modeId": "group",
+                              "name": "Group",
+                            },
+                          ],
+                          "dropdownList": Array [
+                            Object {
+                              "modeId": "group",
+                              "name": "Group",
+                            },
+                            Object {
+                              "modeId": "stack",
+                              "name": "Stack",
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
+              Object {
+                "content": Array [],
+                "editor": [Function],
+                "id": "style-panel",
+                "mapTo": "layoutConfig",
+                "name": "Layout",
+              },
+            ],
           },
-          Object {
-            "Carrier": "OpenSearch-Air",
-            "avg(FlightDelayMin)": 46.81318681318681,
+          "fullLabel": "Bar",
+          "icon": [Function],
+          "iconType": "visBarVerticalStacked",
+          "id": "bar",
+          "label": "Bar",
+          "name": "bar",
+          "orientation": "v",
+          "selection": Object {
+            "dataLoss": "nothing",
           },
-        ],
-        "metadata": Object {
-          "fields": Array [
-            Object {
-              "name": "avg(FlightDelayMin)",
-              "type": "double",
+          "seriesAxis": "yaxis",
+          "type": "bar",
+          "visConfig": Object {
+            "config": Object {
+              "displaylogo": false,
+              "responsive": true,
             },
-            Object {
-              "name": "Carrier",
-              "type": "keyword",
+            "isUniColor": false,
+            "layout": Object {
+              "height": 500,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "showlegend": true,
             },
-          ],
+          },
         },
-        "size": 4,
-        "status": 200,
       }
     }
   >
-    <Plt
-      config={Object {}}
-      data={
-        Array [
-          Object {
-            "marker": Object {
-              "color": Array [
-                "#3CA1C7",
-                "#8C55A3",
-                "#DB748A",
-                "#F2BE4B",
+    <VisualizationChart
+      visualizations={
+        Object {
+          "data": Object {
+            "appData": Object {},
+            "defaultAxes": Object {
+              "xaxis": Array [
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+              "yaxis": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
               ],
             },
-            "name": "avg(FlightDelayMin)",
-            "type": "bar",
-            "x": Array [
-              "BeatsWest",
-              "Logstash Airways",
-              "OpenSearch Dashboards Airlines",
-              "OpenSearch-Air",
-            ],
-            "y": Array [
-              53.65384615384615,
-              45.36144578313253,
-              63.1578947368421,
-              46.81318681318681,
-            ],
-          },
-        ]
-      }
-      layout={
-        Object {
-          "colorway": Array [
-            "#3CA1C7",
-            "#8C55A3",
-            "#DB748A",
-            "#F2BE4B",
-            "#68CCC2",
-            "#2A7866",
-            "#843769",
-            "#374FB8",
-            "#BD6F26",
-            "#4C636F",
-          ],
-          "xaxis": Object {
-            "automargin": true,
-            "fixedrange": false,
-            "showgrid": false,
+            "indexFields": Object {},
+            "query": Object {},
+            "rawVizData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "userConfigs": Object {},
           },
-          "yaxis": Object {
-            "automargin": true,
-            "fixedrange": false,
-            "showgrid": false,
+          "vis": Object {
+            "category": "Visualizations",
+            "categoryAxis": "xaxis",
+            "component": [Function],
+            "editorConfig": Object {
+              "panelTabs": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Data",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "value_options",
+                      "mapTo": "valueOptions",
+                      "name": "Value options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "isSingleSelection": false,
+                          "mapTo": "xaxis",
+                          "name": "X-axis",
+                        },
+                        Object {
+                          "component": null,
+                          "isSingleSelection": false,
+                          "mapTo": "yaxis",
+                          "name": "Y-axis",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_options",
+                      "mapTo": "chartOptions",
+                      "name": "Chart options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "isSingleSelection": true,
+                          "mapTo": "orientation",
+                          "name": "Orientation",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "name": "Vertical",
+                                "orientationId": "v",
+                              },
+                            ],
+                            "dropdownList": Array [
+                              Object {
+                                "name": "Vertical",
+                                "orientationId": "v",
+                              },
+                              Object {
+                                "name": "Horizontal",
+                                "orientationId": "h",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "isSingleSelection": true,
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "modeId": "group",
+                                "name": "Group",
+                              },
+                            ],
+                            "dropdownList": Array [
+                              Object {
+                                "modeId": "group",
+                                "name": "Group",
+                              },
+                              Object {
+                                "modeId": "stack",
+                                "name": "Stack",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                Object {
+                  "content": Array [],
+                  "editor": [Function],
+                  "id": "style-panel",
+                  "mapTo": "layoutConfig",
+                  "name": "Layout",
+                },
+              ],
+            },
+            "fullLabel": "Bar",
+            "icon": [Function],
+            "iconType": "visBarVerticalStacked",
+            "id": "bar",
+            "label": "Bar",
+            "name": "bar",
+            "orientation": "v",
+            "selection": Object {
+              "dataLoss": "nothing",
+            },
+            "seriesAxis": "yaxis",
+            "type": "bar",
+            "visConfig": Object {
+              "config": Object {
+                "displaylogo": false,
+                "responsive": true,
+              },
+              "isUniColor": false,
+              "layout": Object {
+                "height": 500,
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
+              },
+            },
           },
         }
       }
     >
-      <PlotlyComponent
+      <Bar
         config={
           Object {
-            "displayModeBar": false,
+            "displaylogo": false,
+            "responsive": true,
           }
         }
-        data={
-          Array [
-            Object {
-              "marker": Object {
-                "color": Array [
-                  "#3CA1C7",
-                  "#8C55A3",
-                  "#DB748A",
-                  "#F2BE4B",
-                ],
-              },
-              "name": "avg(FlightDelayMin)",
-              "type": "bar",
-              "x": Array [
-                "BeatsWest",
-                "Logstash Airways",
-                "OpenSearch Dashboards Airlines",
-                "OpenSearch-Air",
-              ],
-              "y": Array [
-                53.65384615384615,
-                45.36144578313253,
-                63.1578947368421,
-                46.81318681318681,
-              ],
-            },
-          ]
-        }
-        debug={false}
         layout={
           Object {
-            "autosize": true,
-            "barmode": "stack",
-            "colorway": Array [
-              "#3CA1C7",
-              "#8C55A3",
-              "#DB748A",
-              "#F2BE4B",
-              "#68CCC2",
-              "#2A7866",
-              "#843769",
-              "#374FB8",
-              "#BD6F26",
-              "#4C636F",
-            ],
-            "hovermode": "closest",
+            "height": 500,
             "legend": Object {
-              "orientation": "h",
+              "orientation": "v",
               "traceorder": "normal",
             },
             "margin": Object {
               "b": 30,
-              "l": 30,
-              "pad": 4,
-              "r": 5,
-              "t": 5,
-            },
-            "showlegend": false,
-            "xaxis": Object {
-              "automargin": true,
-              "fixedrange": false,
-              "showgrid": false,
-            },
-            "yaxis": Object {
-              "automargin": true,
-              "fixedrange": false,
-              "showgrid": false,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
             },
+            "showlegend": true,
           }
         }
-        style={
+        visualizations={
           Object {
-            "height": "100%",
-            "width": "100%",
+            "data": Object {
+              "appData": Object {},
+              "defaultAxes": Object {
+                "xaxis": Array [
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+                "yaxis": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {},
+              "rawVizData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "userConfigs": Object {},
+            },
+            "vis": Object {
+              "category": "Visualizations",
+              "categoryAxis": "xaxis",
+              "component": [Function],
+              "editorConfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Data",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "value_options",
+                        "mapTo": "valueOptions",
+                        "name": "Value options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "isSingleSelection": false,
+                            "mapTo": "xaxis",
+                            "name": "X-axis",
+                          },
+                          Object {
+                            "component": null,
+                            "isSingleSelection": false,
+                            "mapTo": "yaxis",
+                            "name": "Y-axis",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_options",
+                        "mapTo": "chartOptions",
+                        "name": "Chart options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "isSingleSelection": true,
+                            "mapTo": "orientation",
+                            "name": "Orientation",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "name": "Vertical",
+                                  "orientationId": "v",
+                                },
+                              ],
+                              "dropdownList": Array [
+                                Object {
+                                  "name": "Vertical",
+                                  "orientationId": "v",
+                                },
+                                Object {
+                                  "name": "Horizontal",
+                                  "orientationId": "h",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "isSingleSelection": true,
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "modeId": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "dropdownList": Array [
+                                Object {
+                                  "modeId": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "modeId": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  Object {
+                    "content": Array [],
+                    "editor": [Function],
+                    "id": "style-panel",
+                    "mapTo": "layoutConfig",
+                    "name": "Layout",
+                  },
+                ],
+              },
+              "fullLabel": "Bar",
+              "icon": [Function],
+              "iconType": "visBarVerticalStacked",
+              "id": "bar",
+              "label": "Bar",
+              "name": "bar",
+              "orientation": "v",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesAxis": "yaxis",
+              "type": "bar",
+              "visConfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 500,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
+            },
           }
         }
-        useResizeHandler={true}
       >
-        <div
-          style={
+        <Plt
+          config={
             Object {
-              "height": "100%",
-              "width": "100%",
+              "displaylogo": false,
+              "responsive": true,
             }
           }
-        />
-      </PlotlyComponent>
-    </Plt>
-  </Bar>
+          data={
+            Array [
+              Object {
+                "marker": Object {
+                  "color": Array [
+                    "#3CA1C7",
+                    "#8C55A3",
+                    "#DB748A",
+                    "#F2BE4B",
+                  ],
+                },
+                "name": "avg(FlightDelayMin)",
+                "orientation": "v",
+                "type": "bar",
+                "x": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "y": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+            ]
+          }
+          layout={
+            Object {
+              "barmode": "",
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "height": 500,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "showlegend": true,
+              "title": "",
+            }
+          }
+        >
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "marker": Object {
+                    "color": Array [
+                      "#3CA1C7",
+                      "#8C55A3",
+                      "#DB748A",
+                      "#F2BE4B",
+                    ],
+                  },
+                  "name": "avg(FlightDelayMin)",
+                  "orientation": "v",
+                  "type": "bar",
+                  "x": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "y": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+              ]
+            }
+            debug={false}
+            layout={
+              Object {
+                "autosize": true,
+                "barmode": "",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "height": 500,
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
+                "title": "",
+                "xaxis": Object {
+                  "automargin": true,
+                  "rangemode": "normal",
+                  "showgrid": true,
+                  "zeroline": false,
+                },
+                "yaxis": Object {
+                  "rangemode": "normal",
+                  "showgrid": true,
+                  "zeroline": false,
+                },
+              }
+            }
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
+          >
+            <div
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </Bar>
+    </VisualizationChart>
+  </Visualization>
 </div>
 `;
 
 exports[`Utils helper functions renders displayVisualization function 2`] = `
 <div>
-  <Line
-    layoutConfig={
-      Object {
-        "xaxis": Object {
-          "fixedrange": true,
-          "showgrid": false,
-        },
-        "yaxis": Object {
-          "fixedrange": true,
-          "showgrid": false,
-        },
-      }
-    }
+  <Visualization
     visualizations={
       Object {
         "data": Object {
-          "Carrier": Array [
-            "BeatsWest",
-            "Logstash Airways",
-            "OpenSearch Dashboards Airlines",
-            "OpenSearch-Air",
-          ],
-          "avg(FlightDelayMin)": Array [
-            53.65384615384615,
-            45.36144578313253,
-            63.1578947368421,
-            46.81318681318681,
-          ],
-        },
-        "jsonData": Array [
-          Object {
-            "Carrier": "BeatsWest",
-            "avg(FlightDelayMin)": 53.65384615384615,
+          "appData": Object {},
+          "defaultAxes": Object {
+            "xaxis": Array [
+              Object {
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+            "yaxis": Array [
+              Object {
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+            ],
           },
-          Object {
-            "Carrier": "Logstash Airways",
-            "avg(FlightDelayMin)": 45.36144578313253,
+          "indexFields": Object {},
+          "query": Object {},
+          "rawVizData": Object {
+            "data": Object {
+              "Carrier": Array [
+                "BeatsWest",
+                "Logstash Airways",
+                "OpenSearch Dashboards Airlines",
+                "OpenSearch-Air",
+              ],
+              "avg(FlightDelayMin)": Array [
+                53.65384615384615,
+                45.36144578313253,
+                63.1578947368421,
+                46.81318681318681,
+              ],
+            },
+            "jsonData": Array [
+              Object {
+                "Carrier": "BeatsWest",
+                "avg(FlightDelayMin)": 53.65384615384615,
+              },
+              Object {
+                "Carrier": "Logstash Airways",
+                "avg(FlightDelayMin)": 45.36144578313253,
+              },
+              Object {
+                "Carrier": "OpenSearch Dashboards Airlines",
+                "avg(FlightDelayMin)": 63.1578947368421,
+              },
+              Object {
+                "Carrier": "OpenSearch-Air",
+                "avg(FlightDelayMin)": 46.81318681318681,
+              },
+            ],
+            "metadata": Object {
+              "fields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "size": 4,
+            "status": 200,
           },
-          Object {
-            "Carrier": "OpenSearch Dashboards Airlines",
-            "avg(FlightDelayMin)": 63.1578947368421,
+          "userConfigs": Object {},
+        },
+        "vis": Object {
+          "category": "Visualizations",
+          "categoryAxis": "xaxis",
+          "component": [Function],
+          "editorConfig": Object {
+            "panelTabs": Array [
+              Object {
+                "editor": [Function],
+                "id": "data-panel",
+                "mapTo": "dataConfig",
+                "name": "Data",
+                "sections": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "value_options",
+                    "mapTo": "valueOptions",
+                    "name": "Value options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "isSingleSelection": true,
+                        "mapTo": "xaxis",
+                        "name": "X-axis",
+                      },
+                      Object {
+                        "component": null,
+                        "isSingleSelection": false,
+                        "mapTo": "yaxis",
+                        "name": "Y-axis",
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_options",
+                    "mapTo": "chartOptions",
+                    "name": "Chart options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "isSingleSelection": true,
+                        "mapTo": "mode",
+                        "name": "Mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "modeId": "lines",
+                              "name": "Lines",
+                            },
+                          ],
+                          "dropdownList": Array [
+                            Object {
+                              "modeId": "markers",
+                              "name": "Markers",
+                            },
+                            Object {
+                              "modeId": "lines",
+                              "name": "Lines",
+                            },
+                            Object {
+                              "modeId": "lines+markers",
+                              "name": "Lines + Markers",
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "defaultState": Array [],
+                    "editor": [Function],
+                    "id": "thresholds",
+                    "mapTo": "thresholds",
+                    "name": "Thresholds",
+                    "schemas": Array [],
+                  },
+                ],
+              },
+              Object {
+                "content": Array [],
+                "editor": [Function],
+                "id": "style-panel",
+                "mapTo": "layoutConfig",
+                "name": "Layout",
+              },
+            ],
           },
-          Object {
-            "Carrier": "OpenSearch-Air",
-            "avg(FlightDelayMin)": 46.81318681318681,
+          "fullLabel": "Line",
+          "icon": [Function],
+          "iconType": "visLine",
+          "id": "line",
+          "label": "Line",
+          "name": "line",
+          "selection": Object {
+            "dataLoss": "nothing",
           },
-        ],
-        "metadata": Object {
-          "fields": Array [
-            Object {
-              "name": "avg(FlightDelayMin)",
-              "type": "double",
+          "seriesAxis": "yaxis",
+          "type": "line",
+          "visConfig": Object {
+            "config": Object {
+              "barmode": "line",
+              "displaylogo": false,
+              "responsive": true,
+              "xaxis": Object {
+                "automargin": true,
+              },
+              "yaxis": Object {
+                "automargin": true,
+              },
             },
-            Object {
-              "name": "Carrier",
-              "type": "keyword",
+            "layout": Object {
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "height": 500,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "paper_bgcolor": "rgba(0, 0, 0, 0)",
+              "plot_bgcolor": "rgba(0, 0, 0, 0)",
+              "showlegend": true,
+              "xaxis": Object {
+                "fixedrange": true,
+                "showgrid": false,
+                "visible": true,
+              },
+              "yaxis": Object {
+                "fixedrange": true,
+                "showgrid": false,
+                "visible": true,
+              },
             },
-          ],
+          },
         },
-        "size": 4,
-        "status": 200,
       }
     }
   >
-    <Plt
-      config={Object {}}
-      data={
-        Array [
-          Object {
-            "name": "avg(FlightDelayMin)",
-            "type": "line",
-            "x": Array [
-              "BeatsWest",
-              "Logstash Airways",
-              "OpenSearch Dashboards Airlines",
-              "OpenSearch-Air",
-            ],
-            "y": Array [
-              53.65384615384615,
-              45.36144578313253,
-              63.1578947368421,
-              46.81318681318681,
-            ],
-          },
-        ]
-      }
-      layout={
+    <VisualizationChart
+      visualizations={
         Object {
-          "barmode": "line",
-          "colorway": Array [
-            "#3CA1C7",
-            "#8C55A3",
-            "#DB748A",
-            "#F2BE4B",
-            "#68CCC2",
-            "#2A7866",
-            "#843769",
-            "#374FB8",
-            "#BD6F26",
-            "#4C636F",
-          ],
-          "paper_bgcolor": "rgba(0, 0, 0, 0)",
-          "plot_bgcolor": "rgba(0, 0, 0, 0)",
-          "xaxis": Object {
-            "automargin": true,
-            "fixedrange": true,
-            "showgrid": false,
+          "data": Object {
+            "appData": Object {},
+            "defaultAxes": Object {
+              "xaxis": Array [
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+              "yaxis": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+              ],
+            },
+            "indexFields": Object {},
+            "query": Object {},
+            "rawVizData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "userConfigs": Object {},
           },
-          "yaxis": Object {
-            "automargin": true,
-            "fixedrange": true,
-            "showgrid": false,
+          "vis": Object {
+            "category": "Visualizations",
+            "categoryAxis": "xaxis",
+            "component": [Function],
+            "editorConfig": Object {
+              "panelTabs": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Data",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "value_options",
+                      "mapTo": "valueOptions",
+                      "name": "Value options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "isSingleSelection": true,
+                          "mapTo": "xaxis",
+                          "name": "X-axis",
+                        },
+                        Object {
+                          "component": null,
+                          "isSingleSelection": false,
+                          "mapTo": "yaxis",
+                          "name": "Y-axis",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_options",
+                      "mapTo": "chartOptions",
+                      "name": "Chart options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "isSingleSelection": true,
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "modeId": "lines",
+                                "name": "Lines",
+                              },
+                            ],
+                            "dropdownList": Array [
+                              Object {
+                                "modeId": "markers",
+                                "name": "Markers",
+                              },
+                              Object {
+                                "modeId": "lines",
+                                "name": "Lines",
+                              },
+                              Object {
+                                "modeId": "lines+markers",
+                                "name": "Lines + Markers",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "defaultState": Array [],
+                      "editor": [Function],
+                      "id": "thresholds",
+                      "mapTo": "thresholds",
+                      "name": "Thresholds",
+                      "schemas": Array [],
+                    },
+                  ],
+                },
+                Object {
+                  "content": Array [],
+                  "editor": [Function],
+                  "id": "style-panel",
+                  "mapTo": "layoutConfig",
+                  "name": "Layout",
+                },
+              ],
+            },
+            "fullLabel": "Line",
+            "icon": [Function],
+            "iconType": "visLine",
+            "id": "line",
+            "label": "Line",
+            "name": "line",
+            "selection": Object {
+              "dataLoss": "nothing",
+            },
+            "seriesAxis": "yaxis",
+            "type": "line",
+            "visConfig": Object {
+              "config": Object {
+                "barmode": "line",
+                "displaylogo": false,
+                "responsive": true,
+                "xaxis": Object {
+                  "automargin": true,
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                },
+              },
+              "layout": Object {
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "height": 500,
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                "showlegend": true,
+                "xaxis": Object {
+                  "fixedrange": true,
+                  "showgrid": false,
+                  "visible": true,
+                },
+                "yaxis": Object {
+                  "fixedrange": true,
+                  "showgrid": false,
+                  "visible": true,
+                },
+              },
+            },
           },
         }
       }
     >
-      <PlotlyComponent
+      <Line
         config={
           Object {
-            "displayModeBar": false,
-          }
-        }
-        data={
-          Array [
-            Object {
-              "name": "avg(FlightDelayMin)",
-              "type": "line",
-              "x": Array [
-                "BeatsWest",
-                "Logstash Airways",
-                "OpenSearch Dashboards Airlines",
-                "OpenSearch-Air",
-              ],
-              "y": Array [
-                53.65384615384615,
-                45.36144578313253,
-                63.1578947368421,
-                46.81318681318681,
-              ],
+            "barmode": "line",
+            "displaylogo": false,
+            "responsive": true,
+            "xaxis": Object {
+              "automargin": true,
+            },
+            "yaxis": Object {
+              "automargin": true,
             },
-          ]
+          }
         }
-        debug={false}
         layout={
           Object {
-            "autosize": true,
-            "barmode": "line",
             "colorway": Array [
               "#3CA1C7",
               "#8C55A3",
@@ -382,258 +1303,1095 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "#BD6F26",
               "#4C636F",
             ],
-            "hovermode": "closest",
+            "height": 500,
             "legend": Object {
-              "orientation": "h",
+              "orientation": "v",
               "traceorder": "normal",
             },
             "margin": Object {
               "b": 30,
-              "l": 30,
-              "pad": 4,
-              "r": 5,
-              "t": 5,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
             },
             "paper_bgcolor": "rgba(0, 0, 0, 0)",
             "plot_bgcolor": "rgba(0, 0, 0, 0)",
-            "showlegend": false,
+            "showlegend": true,
             "xaxis": Object {
-              "automargin": true,
               "fixedrange": true,
               "showgrid": false,
+              "visible": true,
             },
             "yaxis": Object {
-              "automargin": true,
               "fixedrange": true,
               "showgrid": false,
+              "visible": true,
             },
           }
         }
-        style={
+        visualizations={
           Object {
-            "height": "100%",
-            "width": "100%",
+            "data": Object {
+              "appData": Object {},
+              "defaultAxes": Object {
+                "xaxis": Array [
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+                "yaxis": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {},
+              "rawVizData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "userConfigs": Object {},
+            },
+            "vis": Object {
+              "category": "Visualizations",
+              "categoryAxis": "xaxis",
+              "component": [Function],
+              "editorConfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Data",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "value_options",
+                        "mapTo": "valueOptions",
+                        "name": "Value options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "isSingleSelection": true,
+                            "mapTo": "xaxis",
+                            "name": "X-axis",
+                          },
+                          Object {
+                            "component": null,
+                            "isSingleSelection": false,
+                            "mapTo": "yaxis",
+                            "name": "Y-axis",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_options",
+                        "mapTo": "chartOptions",
+                        "name": "Chart options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "isSingleSelection": true,
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "modeId": "lines",
+                                  "name": "Lines",
+                                },
+                              ],
+                              "dropdownList": Array [
+                                Object {
+                                  "modeId": "markers",
+                                  "name": "Markers",
+                                },
+                                Object {
+                                  "modeId": "lines",
+                                  "name": "Lines",
+                                },
+                                Object {
+                                  "modeId": "lines+markers",
+                                  "name": "Lines + Markers",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "defaultState": Array [],
+                        "editor": [Function],
+                        "id": "thresholds",
+                        "mapTo": "thresholds",
+                        "name": "Thresholds",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                  Object {
+                    "content": Array [],
+                    "editor": [Function],
+                    "id": "style-panel",
+                    "mapTo": "layoutConfig",
+                    "name": "Layout",
+                  },
+                ],
+              },
+              "fullLabel": "Line",
+              "icon": [Function],
+              "iconType": "visLine",
+              "id": "line",
+              "label": "Line",
+              "name": "line",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesAxis": "yaxis",
+              "type": "line",
+              "visConfig": Object {
+                "config": Object {
+                  "barmode": "line",
+                  "displaylogo": false,
+                  "responsive": true,
+                  "xaxis": Object {
+                    "automargin": true,
+                  },
+                  "yaxis": Object {
+                    "automargin": true,
+                  },
+                },
+                "layout": Object {
+                  "colorway": Array [
+                    "#3CA1C7",
+                    "#8C55A3",
+                    "#DB748A",
+                    "#F2BE4B",
+                    "#68CCC2",
+                    "#2A7866",
+                    "#843769",
+                    "#374FB8",
+                    "#BD6F26",
+                    "#4C636F",
+                  ],
+                  "height": 500,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                  "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                  "showlegend": true,
+                  "xaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                  "yaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                },
+              },
+            },
           }
         }
-        useResizeHandler={true}
       >
-        <div
-          style={
+        <Plt
+          config={
+            Object {
+              "barmode": "line",
+              "displaylogo": false,
+              "responsive": true,
+              "xaxis": Object {
+                "automargin": true,
+              },
+              "yaxis": Object {
+                "automargin": true,
+              },
+            }
+          }
+          data={
+            Array [
+              Object {
+                "mode": "line",
+                "name": "avg(FlightDelayMin)",
+                "type": "line",
+                "x": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "y": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+            ]
+          }
+          layout={
             Object {
-              "height": "100%",
-              "width": "100%",
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "height": 500,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "paper_bgcolor": "rgba(0, 0, 0, 0)",
+              "plot_bgcolor": "rgba(0, 0, 0, 0)",
+              "showlegend": true,
+              "title": "",
+              "xaxis": Object {
+                "fixedrange": true,
+                "showgrid": false,
+                "visible": true,
+              },
+              "yaxis": Object {
+                "fixedrange": true,
+                "showgrid": false,
+                "visible": true,
+              },
             }
           }
-        />
-      </PlotlyComponent>
-    </Plt>
-  </Line>
+        >
+          <PlotlyComponent
+            config={
+              Object {
+                "barmode": "line",
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+                "xaxis": Object {
+                  "automargin": true,
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                },
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "mode": "line",
+                  "name": "avg(FlightDelayMin)",
+                  "type": "line",
+                  "x": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "y": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+              ]
+            }
+            debug={false}
+            layout={
+              Object {
+                "autosize": true,
+                "barmode": "stack",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "height": 500,
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                "showlegend": true,
+                "title": "",
+                "xaxis": Object {
+                  "fixedrange": true,
+                  "showgrid": false,
+                  "visible": true,
+                },
+                "yaxis": Object {
+                  "fixedrange": true,
+                  "showgrid": false,
+                  "visible": true,
+                },
+              }
+            }
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
+          >
+            <div
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </Line>
+    </VisualizationChart>
+  </Visualization>
 </div>
 `;
 
 exports[`Utils helper functions renders displayVisualization function 3`] = `
 <div>
-  <HorizontalBar
-    layoutConfig={
-      Object {
-        "xaxis": Object {
-          "fixedrange": false,
-          "showgrid": false,
-        },
-        "yaxis": Object {
-          "fixedrange": false,
-          "showgrid": false,
-        },
-      }
-    }
+  <Visualization
     visualizations={
       Object {
         "data": Object {
-          "Carrier": Array [
-            "BeatsWest",
-            "Logstash Airways",
-            "OpenSearch Dashboards Airlines",
-            "OpenSearch-Air",
-          ],
-          "avg(FlightDelayMin)": Array [
-            53.65384615384615,
-            45.36144578313253,
-            63.1578947368421,
-            46.81318681318681,
-          ],
-        },
-        "jsonData": Array [
-          Object {
-            "Carrier": "BeatsWest",
-            "avg(FlightDelayMin)": 53.65384615384615,
+          "appData": Object {},
+          "defaultAxes": Object {
+            "xaxis": Array [
+              Object {
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+            "yaxis": Array [
+              Object {
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+            ],
           },
-          Object {
-            "Carrier": "Logstash Airways",
-            "avg(FlightDelayMin)": 45.36144578313253,
+          "indexFields": Object {},
+          "query": Object {},
+          "rawVizData": Object {
+            "data": Object {
+              "Carrier": Array [
+                "BeatsWest",
+                "Logstash Airways",
+                "OpenSearch Dashboards Airlines",
+                "OpenSearch-Air",
+              ],
+              "avg(FlightDelayMin)": Array [
+                53.65384615384615,
+                45.36144578313253,
+                63.1578947368421,
+                46.81318681318681,
+              ],
+            },
+            "jsonData": Array [
+              Object {
+                "Carrier": "BeatsWest",
+                "avg(FlightDelayMin)": 53.65384615384615,
+              },
+              Object {
+                "Carrier": "Logstash Airways",
+                "avg(FlightDelayMin)": 45.36144578313253,
+              },
+              Object {
+                "Carrier": "OpenSearch Dashboards Airlines",
+                "avg(FlightDelayMin)": 63.1578947368421,
+              },
+              Object {
+                "Carrier": "OpenSearch-Air",
+                "avg(FlightDelayMin)": 46.81318681318681,
+              },
+            ],
+            "metadata": Object {
+              "fields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "size": 4,
+            "status": 200,
           },
-          Object {
-            "Carrier": "OpenSearch Dashboards Airlines",
-            "avg(FlightDelayMin)": 63.1578947368421,
+          "userConfigs": Object {},
+        },
+        "vis": Object {
+          "category": "Visualizations",
+          "categoryAxis": "xaxis",
+          "component": [Function],
+          "editorConfig": Object {
+            "panelTabs": Array [
+              Object {
+                "editor": [Function],
+                "id": "data-panel",
+                "mapTo": "dataConfig",
+                "name": "Data",
+                "sections": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "value_options",
+                    "mapTo": "valueOptions",
+                    "name": "Value options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "isSingleSelection": false,
+                        "mapTo": "xaxis",
+                        "name": "X-axis",
+                      },
+                      Object {
+                        "component": null,
+                        "isSingleSelection": false,
+                        "mapTo": "yaxis",
+                        "name": "Y-axis",
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_options",
+                    "mapTo": "chartOptions",
+                    "name": "Chart options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "isSingleSelection": true,
+                        "mapTo": "orientation",
+                        "name": "Orientation",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "name": "Horizontal",
+                              "orientationId": "h",
+                            },
+                          ],
+                          "dropdownList": Array [
+                            Object {
+                              "name": "Vertical",
+                              "orientationId": "v",
+                            },
+                            Object {
+                              "name": "Horizontal",
+                              "orientationId": "h",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "isSingleSelection": true,
+                        "mapTo": "mode",
+                        "name": "Mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "modeId": "group",
+                              "name": "Group",
+                            },
+                          ],
+                          "dropdownList": Array [
+                            Object {
+                              "modeId": "group",
+                              "name": "Group",
+                            },
+                            Object {
+                              "modeId": "stack",
+                              "name": "Stack",
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
+              Object {
+                "content": Array [],
+                "editor": [Function],
+                "id": "style-panel",
+                "mapTo": "layoutConfig",
+                "name": "Layout",
+              },
+            ],
           },
-          Object {
-            "Carrier": "OpenSearch-Air",
-            "avg(FlightDelayMin)": 46.81318681318681,
+          "fullLabel": "Bar",
+          "icon": [Function],
+          "iconType": "visBarVerticalStacked",
+          "id": "horizontal_bar",
+          "label": "Bar",
+          "name": "horizontal_bar",
+          "orientation": "h",
+          "selection": Object {
+            "dataLoss": "nothing",
           },
-        ],
-        "metadata": Object {
-          "fields": Array [
-            Object {
-              "name": "avg(FlightDelayMin)",
-              "type": "double",
+          "seriesAxis": "yaxis",
+          "type": "bar",
+          "visConfig": Object {
+            "config": Object {
+              "displaylogo": false,
+              "responsive": true,
             },
-            Object {
-              "name": "Carrier",
-              "type": "keyword",
+            "isUniColor": false,
+            "layout": Object {
+              "height": 500,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "showlegend": true,
             },
-          ],
+          },
         },
-        "size": 4,
-        "status": 200,
       }
     }
   >
-    <Bar
-      barConfig={
-        Object {
-          "orientation": "h",
-        }
-      }
-      layoutConfig={
-        Object {
-          "xaxis": Object {
-            "fixedrange": false,
-            "showgrid": false,
-          },
-          "yaxis": Object {
-            "automargin": true,
-            "fixedrange": false,
-            "showgrid": false,
-          },
-        }
-      }
+    <VisualizationChart
       visualizations={
         Object {
           "data": Object {
-            "Carrier": Array [
-              "BeatsWest",
-              "Logstash Airways",
-              "OpenSearch Dashboards Airlines",
-              "OpenSearch-Air",
-            ],
-            "avg(FlightDelayMin)": Array [
-              53.65384615384615,
-              45.36144578313253,
-              63.1578947368421,
-              46.81318681318681,
-            ],
-          },
-          "jsonData": Array [
-            Object {
-              "Carrier": "BeatsWest",
-              "avg(FlightDelayMin)": 53.65384615384615,
+            "appData": Object {},
+            "defaultAxes": Object {
+              "xaxis": Array [
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+              "yaxis": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+              ],
             },
-            Object {
-              "Carrier": "Logstash Airways",
-              "avg(FlightDelayMin)": 45.36144578313253,
+            "indexFields": Object {},
+            "query": Object {},
+            "rawVizData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
             },
-            Object {
-              "Carrier": "OpenSearch Dashboards Airlines",
-              "avg(FlightDelayMin)": 63.1578947368421,
+            "userConfigs": Object {},
+          },
+          "vis": Object {
+            "category": "Visualizations",
+            "categoryAxis": "xaxis",
+            "component": [Function],
+            "editorConfig": Object {
+              "panelTabs": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Data",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "value_options",
+                      "mapTo": "valueOptions",
+                      "name": "Value options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "isSingleSelection": false,
+                          "mapTo": "xaxis",
+                          "name": "X-axis",
+                        },
+                        Object {
+                          "component": null,
+                          "isSingleSelection": false,
+                          "mapTo": "yaxis",
+                          "name": "Y-axis",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_options",
+                      "mapTo": "chartOptions",
+                      "name": "Chart options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "isSingleSelection": true,
+                          "mapTo": "orientation",
+                          "name": "Orientation",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "name": "Horizontal",
+                                "orientationId": "h",
+                              },
+                            ],
+                            "dropdownList": Array [
+                              Object {
+                                "name": "Vertical",
+                                "orientationId": "v",
+                              },
+                              Object {
+                                "name": "Horizontal",
+                                "orientationId": "h",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "isSingleSelection": true,
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "modeId": "group",
+                                "name": "Group",
+                              },
+                            ],
+                            "dropdownList": Array [
+                              Object {
+                                "modeId": "group",
+                                "name": "Group",
+                              },
+                              Object {
+                                "modeId": "stack",
+                                "name": "Stack",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                Object {
+                  "content": Array [],
+                  "editor": [Function],
+                  "id": "style-panel",
+                  "mapTo": "layoutConfig",
+                  "name": "Layout",
+                },
+              ],
             },
-            Object {
-              "Carrier": "OpenSearch-Air",
-              "avg(FlightDelayMin)": 46.81318681318681,
+            "fullLabel": "Bar",
+            "icon": [Function],
+            "iconType": "visBarVerticalStacked",
+            "id": "horizontal_bar",
+            "label": "Bar",
+            "name": "horizontal_bar",
+            "orientation": "h",
+            "selection": Object {
+              "dataLoss": "nothing",
             },
-          ],
-          "metadata": Object {
-            "fields": Array [
-              Object {
-                "name": "avg(FlightDelayMin)",
-                "type": "double",
+            "seriesAxis": "yaxis",
+            "type": "bar",
+            "visConfig": Object {
+              "config": Object {
+                "displaylogo": false,
+                "responsive": true,
               },
-              Object {
-                "name": "Carrier",
-                "type": "keyword",
+              "isUniColor": false,
+              "layout": Object {
+                "height": 500,
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
               },
-            ],
+            },
           },
-          "size": 4,
-          "status": 200,
         }
       }
     >
-      <Plt
+      <Bar
         config={
           Object {
-            "orientation": "h",
+            "displaylogo": false,
+            "responsive": true,
           }
         }
-        data={
-          Array [
-            Object {
-              "marker": Object {
-                "color": Array [
-                  "#3CA1C7",
-                  "#8C55A3",
-                  "#DB748A",
-                  "#F2BE4B",
-                ],
-              },
-              "name": "avg(FlightDelayMin)",
-              "orientation": "h",
-              "type": "bar",
-              "x": Array [
-                53.65384615384615,
-                45.36144578313253,
-                63.1578947368421,
-                46.81318681318681,
-              ],
-              "y": Array [
-                "BeatsWest",
-                "Logstash Airways",
-                "OpenSearch Dashboards Airlines",
-                "OpenSearch-Air",
-              ],
+        layout={
+          Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
             },
-          ]
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          }
         }
-        layout={
+        visualizations={
           Object {
-            "colorway": Array [
-              "#3CA1C7",
-              "#8C55A3",
-              "#DB748A",
-              "#F2BE4B",
-              "#68CCC2",
-              "#2A7866",
-              "#843769",
-              "#374FB8",
-              "#BD6F26",
-              "#4C636F",
-            ],
-            "xaxis": Object {
-              "automargin": true,
-              "fixedrange": false,
-              "showgrid": false,
+            "data": Object {
+              "appData": Object {},
+              "defaultAxes": Object {
+                "xaxis": Array [
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+                "yaxis": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {},
+              "rawVizData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "userConfigs": Object {},
             },
-            "yaxis": Object {
-              "automargin": true,
-              "fixedrange": false,
-              "showgrid": false,
+            "vis": Object {
+              "category": "Visualizations",
+              "categoryAxis": "xaxis",
+              "component": [Function],
+              "editorConfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Data",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "value_options",
+                        "mapTo": "valueOptions",
+                        "name": "Value options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "isSingleSelection": false,
+                            "mapTo": "xaxis",
+                            "name": "X-axis",
+                          },
+                          Object {
+                            "component": null,
+                            "isSingleSelection": false,
+                            "mapTo": "yaxis",
+                            "name": "Y-axis",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_options",
+                        "mapTo": "chartOptions",
+                        "name": "Chart options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "isSingleSelection": true,
+                            "mapTo": "orientation",
+                            "name": "Orientation",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "name": "Horizontal",
+                                  "orientationId": "h",
+                                },
+                              ],
+                              "dropdownList": Array [
+                                Object {
+                                  "name": "Vertical",
+                                  "orientationId": "v",
+                                },
+                                Object {
+                                  "name": "Horizontal",
+                                  "orientationId": "h",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "isSingleSelection": true,
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "modeId": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "dropdownList": Array [
+                                Object {
+                                  "modeId": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "modeId": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  Object {
+                    "content": Array [],
+                    "editor": [Function],
+                    "id": "style-panel",
+                    "mapTo": "layoutConfig",
+                    "name": "Layout",
+                  },
+                ],
+              },
+              "fullLabel": "Bar",
+              "icon": [Function],
+              "iconType": "visBarVerticalStacked",
+              "id": "horizontal_bar",
+              "label": "Bar",
+              "name": "horizontal_bar",
+              "orientation": "h",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesAxis": "yaxis",
+              "type": "bar",
+              "visConfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 500,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
             },
           }
         }
       >
-        <PlotlyComponent
+        <Plt
           config={
             Object {
-              "displayModeBar": false,
-              "orientation": "h",
+              "displaylogo": false,
+              "responsive": true,
             }
           }
           data={
@@ -665,11 +2423,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               },
             ]
           }
-          debug={false}
           layout={
             Object {
-              "autosize": true,
-              "barmode": "stack",
+              "barmode": "",
               "colorway": Array [
                 "#3CA1C7",
                 "#8C55A3",
@@ -682,188 +2438,702 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "#BD6F26",
                 "#4C636F",
               ],
-              "hovermode": "closest",
+              "height": 500,
               "legend": Object {
-                "orientation": "h",
+                "orientation": "v",
                 "traceorder": "normal",
               },
               "margin": Object {
                 "b": 30,
-                "l": 30,
-                "pad": 4,
-                "r": 5,
-                "t": 5,
-              },
-              "showlegend": false,
-              "xaxis": Object {
-                "automargin": true,
-                "fixedrange": false,
-                "showgrid": false,
-              },
-              "yaxis": Object {
-                "automargin": true,
-                "fixedrange": false,
-                "showgrid": false,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
               },
+              "showlegend": true,
+              "title": "",
             }
           }
-          style={
-            Object {
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-          useResizeHandler={true}
         >
-          <div
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "marker": Object {
+                    "color": Array [
+                      "#3CA1C7",
+                      "#8C55A3",
+                      "#DB748A",
+                      "#F2BE4B",
+                    ],
+                  },
+                  "name": "avg(FlightDelayMin)",
+                  "orientation": "h",
+                  "type": "bar",
+                  "x": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                  "y": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                },
+              ]
+            }
+            debug={false}
+            layout={
+              Object {
+                "autosize": true,
+                "barmode": "",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "height": 500,
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
+                "title": "",
+                "xaxis": Object {
+                  "automargin": true,
+                  "rangemode": "normal",
+                  "showgrid": true,
+                  "zeroline": false,
+                },
+                "yaxis": Object {
+                  "rangemode": "normal",
+                  "showgrid": true,
+                  "zeroline": false,
+                },
+              }
+            }
             style={
               Object {
                 "height": "100%",
                 "width": "100%",
               }
             }
-          />
-        </PlotlyComponent>
-      </Plt>
-    </Bar>
-  </HorizontalBar>
+            useResizeHandler={true}
+          >
+            <div
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </Bar>
+    </VisualizationChart>
+  </Visualization>
 </div>
 `;
 
 exports[`Utils helper functions renders displayVisualization function 4`] = `
 <div>
-  <HorizontalBar
-    layoutConfig={
-      Object {
-        "xaxis": Object {
-          "fixedrange": true,
-          "showgrid": false,
-        },
-        "yaxis": Object {
-          "fixedrange": true,
-          "showgrid": false,
-        },
-      }
-    }
+  <Visualization
     visualizations={
       Object {
         "data": Object {
-          "count('ip')": Array [],
-          "span(timestamp,1h)": Array [],
-        },
-        "jsonData": Array [],
-        "metadata": Object {
-          "fields": Array [
-            Object {
-              "name": "count('ip')",
-              "type": "integer",
+          "appData": Object {},
+          "defaultAxes": Object {
+            "xaxis": Array [
+              Object {
+                "name": "span(timestamp,1h)",
+                "type": "timestamp",
+              },
+            ],
+            "yaxis": Array [
+              Object {
+                "name": "count('ip')",
+                "type": "integer",
+              },
+            ],
+          },
+          "indexFields": Object {},
+          "query": Object {},
+          "rawVizData": Object {
+            "data": Object {
+              "count('ip')": Array [],
+              "span(timestamp,1h)": Array [],
             },
-            Object {
-              "name": "span(timestamp,1h)",
-              "type": "timestamp",
+            "jsonData": Array [],
+            "metadata": Object {
+              "fields": Array [
+                Object {
+                  "name": "count('ip')",
+                  "type": "integer",
+                },
+                Object {
+                  "name": "span(timestamp,1h)",
+                  "type": "timestamp",
+                },
+              ],
             },
-          ],
+            "size": 0,
+            "status": 200,
+          },
+          "userConfigs": Object {},
         },
-        "size": 0,
-        "status": 200,
-      }
-    }
-  >
-    <Bar
-      barConfig={
-        Object {
+        "vis": Object {
+          "category": "Visualizations",
+          "categoryAxis": "xaxis",
+          "component": [Function],
+          "editorConfig": Object {
+            "panelTabs": Array [
+              Object {
+                "editor": [Function],
+                "id": "data-panel",
+                "mapTo": "dataConfig",
+                "name": "Data",
+                "sections": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "value_options",
+                    "mapTo": "valueOptions",
+                    "name": "Value options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "isSingleSelection": false,
+                        "mapTo": "xaxis",
+                        "name": "X-axis",
+                      },
+                      Object {
+                        "component": null,
+                        "isSingleSelection": false,
+                        "mapTo": "yaxis",
+                        "name": "Y-axis",
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_options",
+                    "mapTo": "chartOptions",
+                    "name": "Chart options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "isSingleSelection": true,
+                        "mapTo": "orientation",
+                        "name": "Orientation",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "name": "Horizontal",
+                              "orientationId": "h",
+                            },
+                          ],
+                          "dropdownList": Array [
+                            Object {
+                              "name": "Vertical",
+                              "orientationId": "v",
+                            },
+                            Object {
+                              "name": "Horizontal",
+                              "orientationId": "h",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "isSingleSelection": true,
+                        "mapTo": "mode",
+                        "name": "Mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "modeId": "group",
+                              "name": "Group",
+                            },
+                          ],
+                          "dropdownList": Array [
+                            Object {
+                              "modeId": "group",
+                              "name": "Group",
+                            },
+                            Object {
+                              "modeId": "stack",
+                              "name": "Stack",
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
+              Object {
+                "content": Array [],
+                "editor": [Function],
+                "id": "style-panel",
+                "mapTo": "layoutConfig",
+                "name": "Layout",
+              },
+            ],
+          },
+          "fullLabel": "Bar",
+          "icon": [Function],
+          "iconType": "visBarVerticalStacked",
+          "id": "horizontal_bar",
+          "label": "Bar",
+          "name": "horizontal_bar",
           "orientation": "h",
-        }
-      }
-      layoutConfig={
-        Object {
-          "xaxis": Object {
-            "fixedrange": true,
-            "showgrid": false,
+          "selection": Object {
+            "dataLoss": "nothing",
           },
-          "yaxis": Object {
-            "automargin": true,
-            "fixedrange": true,
-            "showgrid": false,
+          "seriesAxis": "yaxis",
+          "type": "bar",
+          "visConfig": Object {
+            "config": Object {
+              "displaylogo": false,
+              "responsive": true,
+            },
+            "isUniColor": false,
+            "layout": Object {
+              "height": 500,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "showlegend": true,
+            },
           },
-        }
+        },
       }
+    }
+  >
+    <VisualizationChart
       visualizations={
         Object {
           "data": Object {
-            "count('ip')": Array [],
-            "span(timestamp,1h)": Array [],
+            "appData": Object {},
+            "defaultAxes": Object {
+              "xaxis": Array [
+                Object {
+                  "name": "span(timestamp,1h)",
+                  "type": "timestamp",
+                },
+              ],
+              "yaxis": Array [
+                Object {
+                  "name": "count('ip')",
+                  "type": "integer",
+                },
+              ],
+            },
+            "indexFields": Object {},
+            "query": Object {},
+            "rawVizData": Object {
+              "data": Object {
+                "count('ip')": Array [],
+                "span(timestamp,1h)": Array [],
+              },
+              "jsonData": Array [],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "count('ip')",
+                    "type": "integer",
+                  },
+                  Object {
+                    "name": "span(timestamp,1h)",
+                    "type": "timestamp",
+                  },
+                ],
+              },
+              "size": 0,
+              "status": 200,
+            },
+            "userConfigs": Object {},
           },
-          "jsonData": Array [],
-          "metadata": Object {
-            "fields": Array [
-              Object {
-                "name": "count('ip')",
-                "type": "integer",
+          "vis": Object {
+            "category": "Visualizations",
+            "categoryAxis": "xaxis",
+            "component": [Function],
+            "editorConfig": Object {
+              "panelTabs": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Data",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "value_options",
+                      "mapTo": "valueOptions",
+                      "name": "Value options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "isSingleSelection": false,
+                          "mapTo": "xaxis",
+                          "name": "X-axis",
+                        },
+                        Object {
+                          "component": null,
+                          "isSingleSelection": false,
+                          "mapTo": "yaxis",
+                          "name": "Y-axis",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_options",
+                      "mapTo": "chartOptions",
+                      "name": "Chart options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "isSingleSelection": true,
+                          "mapTo": "orientation",
+                          "name": "Orientation",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "name": "Horizontal",
+                                "orientationId": "h",
+                              },
+                            ],
+                            "dropdownList": Array [
+                              Object {
+                                "name": "Vertical",
+                                "orientationId": "v",
+                              },
+                              Object {
+                                "name": "Horizontal",
+                                "orientationId": "h",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "isSingleSelection": true,
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "modeId": "group",
+                                "name": "Group",
+                              },
+                            ],
+                            "dropdownList": Array [
+                              Object {
+                                "modeId": "group",
+                                "name": "Group",
+                              },
+                              Object {
+                                "modeId": "stack",
+                                "name": "Stack",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                Object {
+                  "content": Array [],
+                  "editor": [Function],
+                  "id": "style-panel",
+                  "mapTo": "layoutConfig",
+                  "name": "Layout",
+                },
+              ],
+            },
+            "fullLabel": "Bar",
+            "icon": [Function],
+            "iconType": "visBarVerticalStacked",
+            "id": "horizontal_bar",
+            "label": "Bar",
+            "name": "horizontal_bar",
+            "orientation": "h",
+            "selection": Object {
+              "dataLoss": "nothing",
+            },
+            "seriesAxis": "yaxis",
+            "type": "bar",
+            "visConfig": Object {
+              "config": Object {
+                "displaylogo": false,
+                "responsive": true,
               },
-              Object {
-                "name": "span(timestamp,1h)",
-                "type": "timestamp",
+              "isUniColor": false,
+              "layout": Object {
+                "height": 500,
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
               },
-            ],
+            },
           },
-          "size": 0,
-          "status": 200,
         }
       }
     >
-      <Plt
+      <Bar
         config={
           Object {
-            "orientation": "h",
+            "displaylogo": false,
+            "responsive": true,
           }
         }
-        data={
-          Array [
-            Object {
-              "marker": Object {
-                "color": Array [],
-              },
-              "name": "count('ip')",
-              "orientation": "h",
-              "type": "bar",
-              "x": Array [],
-              "y": Array [],
+        layout={
+          Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
             },
-          ]
+            "showlegend": true,
+          }
         }
-        layout={
+        visualizations={
           Object {
-            "colorway": Array [
-              "#3CA1C7",
-              "#8C55A3",
-              "#DB748A",
-              "#F2BE4B",
-              "#68CCC2",
-              "#2A7866",
-              "#843769",
-              "#374FB8",
-              "#BD6F26",
-              "#4C636F",
-            ],
-            "xaxis": Object {
-              "automargin": true,
-              "fixedrange": true,
-              "showgrid": false,
+            "data": Object {
+              "appData": Object {},
+              "defaultAxes": Object {
+                "xaxis": Array [
+                  Object {
+                    "name": "span(timestamp,1h)",
+                    "type": "timestamp",
+                  },
+                ],
+                "yaxis": Array [
+                  Object {
+                    "name": "count('ip')",
+                    "type": "integer",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {},
+              "rawVizData": Object {
+                "data": Object {
+                  "count('ip')": Array [],
+                  "span(timestamp,1h)": Array [],
+                },
+                "jsonData": Array [],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "count('ip')",
+                      "type": "integer",
+                    },
+                    Object {
+                      "name": "span(timestamp,1h)",
+                      "type": "timestamp",
+                    },
+                  ],
+                },
+                "size": 0,
+                "status": 200,
+              },
+              "userConfigs": Object {},
             },
-            "yaxis": Object {
-              "automargin": true,
-              "fixedrange": true,
-              "showgrid": false,
+            "vis": Object {
+              "category": "Visualizations",
+              "categoryAxis": "xaxis",
+              "component": [Function],
+              "editorConfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Data",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "value_options",
+                        "mapTo": "valueOptions",
+                        "name": "Value options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "isSingleSelection": false,
+                            "mapTo": "xaxis",
+                            "name": "X-axis",
+                          },
+                          Object {
+                            "component": null,
+                            "isSingleSelection": false,
+                            "mapTo": "yaxis",
+                            "name": "Y-axis",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_options",
+                        "mapTo": "chartOptions",
+                        "name": "Chart options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "isSingleSelection": true,
+                            "mapTo": "orientation",
+                            "name": "Orientation",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "name": "Horizontal",
+                                  "orientationId": "h",
+                                },
+                              ],
+                              "dropdownList": Array [
+                                Object {
+                                  "name": "Vertical",
+                                  "orientationId": "v",
+                                },
+                                Object {
+                                  "name": "Horizontal",
+                                  "orientationId": "h",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "isSingleSelection": true,
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "modeId": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "dropdownList": Array [
+                                Object {
+                                  "modeId": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "modeId": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  Object {
+                    "content": Array [],
+                    "editor": [Function],
+                    "id": "style-panel",
+                    "mapTo": "layoutConfig",
+                    "name": "Layout",
+                  },
+                ],
+              },
+              "fullLabel": "Bar",
+              "icon": [Function],
+              "iconType": "visBarVerticalStacked",
+              "id": "horizontal_bar",
+              "label": "Bar",
+              "name": "horizontal_bar",
+              "orientation": "h",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesAxis": "yaxis",
+              "type": "bar",
+              "visConfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 500,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
             },
           }
         }
       >
-        <PlotlyComponent
+        <Plt
           config={
             Object {
-              "displayModeBar": false,
-              "orientation": "h",
+              "displaylogo": false,
+              "responsive": true,
             }
           }
           data={
@@ -880,11 +3150,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
               },
             ]
           }
-          debug={false}
           layout={
             Object {
-              "autosize": true,
-              "barmode": "stack",
+              "barmode": "",
               "colorway": Array [
                 "#3CA1C7",
                 "#8C55A3",
@@ -897,50 +3165,110 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                 "#BD6F26",
                 "#4C636F",
               ],
-              "hovermode": "closest",
+              "height": 500,
               "legend": Object {
-                "orientation": "h",
+                "orientation": "v",
                 "traceorder": "normal",
               },
               "margin": Object {
                 "b": 30,
-                "l": 30,
-                "pad": 4,
-                "r": 5,
-                "t": 5,
-              },
-              "showlegend": false,
-              "xaxis": Object {
-                "automargin": true,
-                "fixedrange": true,
-                "showgrid": false,
-              },
-              "yaxis": Object {
-                "automargin": true,
-                "fixedrange": true,
-                "showgrid": false,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
               },
+              "showlegend": true,
+              "title": "",
             }
           }
-          style={
-            Object {
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-          useResizeHandler={true}
         >
-          <div
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "marker": Object {
+                    "color": Array [],
+                  },
+                  "name": "count('ip')",
+                  "orientation": "h",
+                  "type": "bar",
+                  "x": Array [],
+                  "y": Array [],
+                },
+              ]
+            }
+            debug={false}
+            layout={
+              Object {
+                "autosize": true,
+                "barmode": "",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "height": 500,
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
+                "title": "",
+                "xaxis": Object {
+                  "automargin": true,
+                  "rangemode": "normal",
+                  "showgrid": true,
+                  "zeroline": false,
+                },
+                "yaxis": Object {
+                  "rangemode": "normal",
+                  "showgrid": true,
+                  "zeroline": false,
+                },
+              }
+            }
             style={
               Object {
                 "height": "100%",
                 "width": "100%",
               }
             }
-          />
-        </PlotlyComponent>
-      </Plt>
-    </Bar>
-  </HorizontalBar>
+            useResizeHandler={true}
+          >
+            <div
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </Bar>
+    </VisualizationChart>
+  </Visualization>
 </div>
 `;
diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx
index 0e92e37e7..e1d1f1dbb 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx
+++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx
@@ -28,7 +28,7 @@ import {
 import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared';
 import React from 'react';
 
-describe.skip('Utils helper functions', () => {
+describe('Utils helper functions', () => {
   configure({ adapter: new Adapter() });
 
   it('validates isNameValid function', () => {
@@ -103,19 +103,25 @@ describe.skip('Utils helper functions', () => {
   });
 
   it('renders displayVisualization function', () => {
-    const wrapper1 = mount(<div>{displayVisualization(samplePPLResponse, 'bar', false)}</div>);
+    const wrapper1 = mount(
+      <div>{displayVisualization(sampleSavedVisualization, samplePPLResponse, 'bar')}</div>
+    );
     expect(wrapper1).toMatchSnapshot();
 
-    const wrapper2 = mount(<div>{displayVisualization(samplePPLResponse, 'line', true)}</div>);
+    const wrapper2 = mount(
+      <div>{displayVisualization(sampleSavedVisualization, samplePPLResponse, 'line')}</div>
+    );
     expect(wrapper2).toMatchSnapshot();
 
     const wrapper3 = mount(
-      <div>{displayVisualization(samplePPLResponse, 'horizontal_bar', false)}</div>
+      <div>
+        {displayVisualization(sampleSavedVisualization, samplePPLResponse, 'horizontal_bar')}
+      </div>
     );
     expect(wrapper3).toMatchSnapshot();
 
     const wrapper4 = mount(
-      <div>{displayVisualization(samplePPLEmptyResponse, 'horizontal_bar', true)}</div>
+      <div>{displayVisualization({}, samplePPLEmptyResponse, 'horizontal_bar')}</div>
     );
     expect(wrapper4).toMatchSnapshot();
   });
diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
index 100d6bc41..7382d56d0 100644
--- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
+++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Visualization Container Component renders add visualization container 1
   editMode={true}
   fromTime="now-15m"
   http={[MockFunction]}
+  onEditClick={[Function]}
   onRefresh={true}
   pplFilterValue="where Carrier = \\"OpenSearch-Air\\""
   pplService={
@@ -25,155 +26,7 @@ exports[`Visualization Container Component renders add visualization container 1
     grow={false}
   >
     <div
-      className="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero panel-full-width"
-    >
-      <div
-        className="mouseGrabber"
-      >
-        <EuiFlexGroup
-          justifyContent="spaceBetween"
-        >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-          >
-            <EuiFlexItem
-              style={
-                Object {
-                  "width": "35%",
-                }
-              }
-            >
-              <div
-                className="euiFlexItem"
-                style={
-                  Object {
-                    "width": "35%",
-                  }
-                }
-              >
-                <EuiText
-                  className="panels-title-text"
-                  grow={false}
-                >
-                  <div
-                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
-                  >
-                    <EuiToolTip
-                      content=""
-                      delay="long"
-                      position="top"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <h5
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        />
-                      </span>
-                    </EuiToolTip>
-                  </div>
-                </EuiText>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              className="visualization-action-button"
-              grow={false}
-            >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
-              >
-                <EuiIcon
-                  onClick={[Function]}
-                  type="crossInACircleFilled"
-                >
-                  <EuiIconEmpty
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                    focusable="false"
-                    onClick={[Function]}
-                    role="img"
-                    style={null}
-                  >
-                    <svg
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon-isLoading"
-                      focusable="false"
-                      height={16}
-                      onClick={[Function]}
-                      role="img"
-                      style={null}
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    />
-                  </EuiIconEmpty>
-                </EuiIcon>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-      </div>
-      <div
-        className="visualization-div"
-      >
-        <EuiLoadingChart
-          className="visualization-loading-chart"
-          mono={true}
-          size="xl"
-        >
-          <span
-            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
-          >
-            <span
-              className="euiLoadingChart__bar"
-            />
-            <span
-              className="euiLoadingChart__bar"
-            />
-            <span
-              className="euiLoadingChart__bar"
-            />
-            <span
-              className="euiLoadingChart__bar"
-            />
-          </span>
-        </EuiLoadingChart>
-      </div>
-    </div>
-  </EuiPanel>
-</VisualizationContainer>
-`;
-
-exports[`Visualization Container Component renders add visualization container 2`] = `
-<VisualizationContainer
-  cloneVisualization={[MockFunction]}
-  editMode={true}
-  fromTime="now-15m"
-  http={[MockFunction]}
-  onRefresh={true}
-  pplFilterValue="where Carrier = \\"OpenSearch-Air\\""
-  pplService={
-    PPLService {
-      "fetch": [Function],
-      "http": [MockFunction],
-    }
-  }
-  removeVisualization={[MockFunction]}
-  savedVisualizationId="oiuccXwBYVazWqOO1e06"
-  showFlyout={[MockFunction]}
-  toTime="now"
-  visualizationId="panel_viz_9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"
->
-  <EuiPanel
-    className="panel-full-width"
-    grow={false}
-  >
-    <div
-      className="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero panel-full-width"
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
     >
       <div
         className="mouseGrabber"
diff --git a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx
index 20ab07fa9..9ea46f4d4 100644
--- a/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx
+++ b/dashboards-observability/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx
@@ -16,7 +16,7 @@ import {
   samplePPLResponse,
 } from '../../../../../../test/panels_constants';
 
-describe.skip('Visualization Container Component', () => {
+describe('Visualization Container Component', () => {
   configure({ adapter: new Adapter() });
 
   it('renders add visualization container', async () => {
diff --git a/dashboards-observability/public/components/explorer/__tests__/__snapshots__/no_results.test.tsx.snap b/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/__tests__/__snapshots__/no_results.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/__tests__/no_results.test.tsx b/dashboards-observability/public/components/event_analytics/__tests__/no_results.test.tsx
similarity index 91%
rename from dashboards-observability/public/components/explorer/__tests__/no_results.test.tsx
rename to dashboards-observability/public/components/event_analytics/__tests__/no_results.test.tsx
index b87c8dc13..1bc6c9eb1 100644
--- a/dashboards-observability/public/components/explorer/__tests__/no_results.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/__tests__/no_results.test.tsx
@@ -7,7 +7,7 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { NoResults } from '../no_results';
+import { NoResults } from '../explorer/no_results';
 
 describe('No result component', () => {
   configure({ adapter: new Adapter() });
diff --git a/dashboards-observability/public/components/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
similarity index 87%
rename from dashboards-observability/public/components/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
index a98dbe783..df40c845c 100644
--- a/dashboards-observability/public/components/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
+++ b/dashboards-observability/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
@@ -412,34 +412,46 @@ exports[`Datagrid component Renders data grid component 1`] = `
               className="osdDocTableCell__toggleDetails"
               key="grid-td-14"
             >
-              <button
+              <EuiButtonIcon
                 className="euiButtonIcon euiButtonIcon--text"
+                iconType="arrowRight"
                 onClick={[Function]}
               >
-                <EuiIcon
-                  type="arrowRight"
+                <button
+                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <EuiIconEmpty
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                    focusable="false"
-                    role="img"
-                    style={null}
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowRight"
                   >
-                    <svg
+                    <EuiIconEmpty
                       aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon-isLoading"
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                       focusable="false"
-                      height={16}
                       role="img"
                       style={null}
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    />
-                  </EuiIconEmpty>
-                </EuiIcon>
-              </button>
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                </button>
+              </EuiButtonIcon>
             </td>
           </tr>
         </ForwardRef>
@@ -628,34 +640,46 @@ exports[`Datagrid component Renders data grid component 1`] = `
               className="osdDocTableCell__toggleDetails"
               key="grid-td-17"
             >
-              <button
+              <EuiButtonIcon
                 className="euiButtonIcon euiButtonIcon--text"
+                iconType="arrowRight"
                 onClick={[Function]}
               >
-                <EuiIcon
-                  type="arrowRight"
+                <button
+                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <EuiIconEmpty
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                    focusable="false"
-                    role="img"
-                    style={null}
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowRight"
                   >
-                    <svg
+                    <EuiIconEmpty
                       aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon-isLoading"
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                       focusable="false"
-                      height={16}
                       role="img"
                       style={null}
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    />
-                  </EuiIconEmpty>
-                </EuiIcon>
-              </button>
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                </button>
+              </EuiButtonIcon>
             </td>
           </tr>
         </ForwardRef>
diff --git a/dashboards-observability/public/components/explorer/__tests__/data_grid.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/__tests__/data_grid.test.tsx
similarity index 86%
rename from dashboards-observability/public/components/explorer/__tests__/data_grid.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/__tests__/data_grid.test.tsx
index a45d7ecd9..f659f3243 100644
--- a/dashboards-observability/public/components/explorer/__tests__/data_grid.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/__tests__/data_grid.test.tsx
@@ -7,18 +7,18 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { DataGrid } from '../data_grid';
+import { DataGrid } from '../events_views/data_grid';
 import { 
   SELECTED_FIELDS, 
   AVAILABLE_FIELDS,
   UNSELECTED_FIELDS,
   QUERIED_FIELDS
-} from '../../../../common/constants/explorer';
+} from '../../../../../common/constants/explorer';
 import { 
   AVAILABLE_FIELDS as SIDEBAR_AVAILABLE_FIELDS,
   QUERY_FIELDS,
   DATA_GRID_ROWS
-} from '../../../../test/event_analytics_constants';
+} from '../../../../../test/event_analytics_constants';
 
 describe('Datagrid component', () => {
   configure({ adapter: new Adapter() });
diff --git a/dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewer.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewer.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer.test.tsx.snap
diff --git a/dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer_row.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer_row.test.tsx.snap
new file mode 100644
index 000000000..87754ba9e
--- /dev/null
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer_row.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Datagrid Doc viewer row component Renders Doc viewer row component 1`] = `
+<ForwardRef
+  doc={
+    Object {
+      "Carrier": "JetBeats",
+      "avg(FlightDelayMin)": "45.957544288332315",
+    }
+  }
+  selectedCols={
+    Array [
+      Object {
+        "name": "avg(FlightDelayMin)",
+        "type": "double",
+      },
+    ]
+  }
+>
+  <tr
+    className="osdDocTable__row"
+  >
+    <td
+      className="osdDocTableCell__toggleDetails"
+      key="grid-td-3"
+    >
+      <EuiButtonIcon
+        className="euiButtonIcon euiButtonIcon--text"
+        iconType="arrowRight"
+        onClick={[Function]}
+      >
+        <button
+          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <EuiIcon
+            aria-hidden="true"
+            className="euiButtonIcon__icon"
+            color="inherit"
+            size="m"
+            type="arrowRight"
+          >
+            <EuiIconEmpty
+              aria-hidden={true}
+              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              role="img"
+              style={null}
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </EuiIconEmpty>
+          </EuiIcon>
+        </button>
+      </EuiButtonIcon>
+    </td>
+    <td
+      className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+      key="datagrid-cell-2"
+    >
+      45.957544288332315
+    </td>
+  </tr>
+</ForwardRef>
+`;
diff --git a/dashboards-observability/public/components/explorer/docTable/__tests__/docViewer.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer.test.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/__tests__/docViewer.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer.test.tsx
diff --git a/dashboards-observability/public/components/explorer/docTable/__tests__/docViewerRow.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer_row.test.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/__tests__/docViewerRow.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer_row.test.tsx
diff --git a/dashboards-observability/public/components/explorer/data_grid.scss b/dashboards-observability/public/components/event_analytics/explorer/events_views/data_grid.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/data_grid.scss
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/data_grid.scss
diff --git a/dashboards-observability/public/components/explorer/data_grid.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/data_grid.tsx
similarity index 91%
rename from dashboards-observability/public/components/explorer/data_grid.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/data_grid.tsx
index ad31d3745..d0385a9a0 100644
--- a/dashboards-observability/public/components/explorer/data_grid.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/data_grid.tsx
@@ -6,11 +6,11 @@
 import './data_grid.scss';
 
 import React, { useMemo, useState, useEffect, useRef, RefObject } from 'react';
-import { IExplorerFields } from '../../../common/types/explorer';
-import { DEFAULT_COLUMNS, PAGE_SIZE } from '../../../common/constants/explorer';
-import { getHeaders, getTrs, populateDataGrid } from './utils';
-import { HttpSetup } from '../../../../../src/core/public';
-import PPLService from '../../services/requests/ppl';
+import { IExplorerFields } from '../../../../../common/types/explorer';
+import { DEFAULT_COLUMNS, PAGE_SIZE } from '../../../../../common/constants/explorer';
+import { getHeaders, getTrs, populateDataGrid } from '../../utils';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import PPLService from '../../../../services/requests/ppl';
 
 interface DataGridProps {
   http: HttpSetup;
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/docDetailTable.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_table.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/detailTable/docDetailTable.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_table.tsx
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/docDetailTitle.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_title.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/detailTable/docDetailTitle.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_title.tsx
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row.tsx
similarity index 61%
rename from dashboards-observability/public/components/explorer/docTable/detailTable/table_row.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row.tsx
index 875c29191..865fa9581 100644
--- a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row.tsx
@@ -5,15 +5,10 @@
 
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';
-// import { FieldMapping, DocViewFilterFn } from '../../doc_views/doc_views_types';
-import { DocViewTableRowBtnFilterAdd } from './table_row_btn_filter_add';
-import { DocViewTableRowBtnFilterRemove } from './table_row_btn_filter_remove';
-import { DocViewTableRowBtnToggleColumn } from './table_row_btn_toggle_column';
 import { DocViewTableRowBtnCollapse } from './table_row_btn_collapse';
-import { DocViewTableRowBtnFilterExists } from './table_row_btn_filter_exists';
 import { DocViewTableRowIconNoMapping } from './table_row_icon_no_mapping';
 import { DocViewTableRowIconUnderscore } from './table_row_icon_underscore';
-import { FieldName } from '../../../common/field_name/field_name';
+import { FieldName } from '../../../../common/field_name/field_name';
 
 export interface FieldMapping {
   filterable?: boolean;
@@ -53,12 +48,8 @@ export function DocViewTableRow({
   displayUnderscoreWarning,
   isCollapsible,
   isCollapsed,
-  isColumnActive,
-  onFilter,
   onToggleCollapse,
-  onToggleColumn,
   value,
-  valueRaw,
 }: Props) {
   const valueClassName = classNames({
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -68,31 +59,10 @@ export function DocViewTableRow({
 
   return (
     <tr key={field} data-test-subj={`tableDocViewRow-${field}`}>
-      {typeof onFilter === 'function' && (<></>
-        // <td className="osdDocViewer__buttons">
-        //   <DocViewTableRowBtnFilterAdd
-        //     disabled={!fieldMapping || !fieldMapping.filterable}
-        //     onClick={() => onFilter(fieldMapping, valueRaw, '+')}
-        //   />
-        //   <DocViewTableRowBtnFilterRemove
-        //     disabled={!fieldMapping || !fieldMapping.filterable}
-        //     onClick={() => onFilter(fieldMapping, valueRaw, '-')}
-        //   />
-        //   {typeof onToggleColumn === 'function' && (
-        //     <DocViewTableRowBtnToggleColumn active={isColumnActive} onClick={onToggleColumn} />
-        //   )}
-        //   <DocViewTableRowBtnFilterExists
-        //     disabled={!fieldMapping || !fieldMapping.filterable}
-        //     onClick={() => onFilter('_exists_', field, '+')}
-        //     scripted={fieldMapping && fieldMapping.scripted}
-        //   />
-        // </td>
-      )}
       <td className="osdDocViewer__field">
         <FieldName
           fieldName={field}
           fieldType={fieldType}
-          // fieldIconProps={{ fill: 'none', color: 'gray' }}
           scripted={Boolean(fieldMapping?.scripted)}
         />
       </td>
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_collapse.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_collapse.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_icon_no_mapping.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_no_mapping.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/detailTable/table_row_icon_no_mapping.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_no_mapping.tsx
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_icon_underscore.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_underscore.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/detailTable/table_row_icon_underscore.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_underscore.tsx
diff --git a/dashboards-observability/public/components/explorer/docTable/docView.scss b/dashboards-observability/public/components/event_analytics/explorer/events_views/docView.scss
similarity index 95%
rename from dashboards-observability/public/components/explorer/docTable/docView.scss
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/docView.scss
index fbe69b2a6..c395ed4da 100644
--- a/dashboards-observability/public/components/explorer/docTable/docView.scss
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/docView.scss
@@ -37,8 +37,8 @@
 
 .events-flyout-resize {
   position: absolute;
-  right: 50px;
-  top: 17px;
+  right: 30px;
+  top: 0px;
   z-index: 3;
 }
 
diff --git a/dashboards-observability/public/components/explorer/docTable/docViewRow.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/docViewRow.tsx
similarity index 92%
rename from dashboards-observability/public/components/explorer/docTable/docViewRow.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/docViewRow.tsx
index 06a6bb3a1..7a4f2c3b2 100644
--- a/dashboards-observability/public/components/explorer/docTable/docViewRow.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/docViewRow.tsx
@@ -7,15 +7,15 @@ import './docView.scss';
 import moment from 'moment';
 import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 import { toPairs, uniqueId, has, forEach, isEqual } from 'lodash';
-import { EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiButtonEmpty, EuiButtonIcon, EuiIcon, EuiLink } from '@elastic/eui';
 import { useEffect } from 'react';
-import { IExplorerFields, IField } from '../../../../common/types/explorer';
+import { IExplorerFields, IField } from '../../../../../common/types/explorer';
 import { DocFlyout } from './doc_flyout';
-import { HttpStart } from '../../../../../../src/core/public';
-import { OTEL_TRACE_ID, DATE_PICKER_FORMAT } from '../../../../common/constants/explorer';
+import { HttpStart } from '../../../../../../../src/core/public';
+import { OTEL_TRACE_ID, DATE_PICKER_FORMAT } from '../../../../../common/constants/explorer';
 import { SurroundingFlyout } from './surrounding_flyout';
-import PPLService from '../../../services/requests/ppl';
-import { isValidTraceId } from '../utils';
+import PPLService from '../../../../services/requests/ppl';
+import { isValidTraceId } from '../../utils';
 
 export interface IDocType {
   [key: string]: string;
@@ -121,18 +121,13 @@ export const DocViewRow = forwardRef((props: IDocViewRowProps, ref) => {
   const getExpColapTd = () => {
     return (
       <td className="osdDocTableCell__toggleDetails" key={uniqueId('grid-td-')}>
-        <button
+        <EuiButtonIcon
           className="euiButtonIcon euiButtonIcon--text"
           onClick={() => {
             toggleDetailOpen();
           }}
-        >
-          {detailsOpen || surroundingEventsOpen ? (
-            <EuiIcon type="arrowLeft" />
-          ) : (
-            <EuiIcon type="arrowRight" />
-          )}
-        </button>
+          iconType={detailsOpen || surroundingEventsOpen ? 'arrowLeft' : 'arrowRight'}
+        />
       </td>
     );
   };
diff --git a/dashboards-observability/public/components/explorer/docTable/docViewer.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/docViewer.tsx
similarity index 92%
rename from dashboards-observability/public/components/explorer/docTable/docViewer.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/docViewer.tsx
index 240e7fdce..581b30aeb 100644
--- a/dashboards-observability/public/components/explorer/docTable/docViewer.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/docViewer.tsx
@@ -13,13 +13,13 @@ import {
   EuiTabbedContent,
   EuiTabbedContentTab,
 } from '@elastic/eui';
-import { DocViewTable } from './detailTable/docDetailTable';
+import { DocViewTable } from './detail_table/doc_detail_table';
 import { JsonCodeBlock } from './json_code_block/json_code_block';
 import { IDocType } from './docViewRow';
-import { HttpSetup } from '../../../../../../src/core/public';
+import { HttpSetup } from '../../../../../../../src/core/public';
 import { TraceBlock } from './trace_block/trace_block';
-import { OTEL_TRACE_ID } from '../../../../common/constants/explorer';
-import { isValidTraceId } from '../utils';
+import { OTEL_TRACE_ID } from '../../../../../common/constants/explorer';
+import { isValidTraceId } from '../../utils';
 
 interface IDocViewerProps {
   http: HttpSetup;
diff --git a/dashboards-observability/public/components/explorer/docTable/doc_flyout.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
similarity index 89%
rename from dashboards-observability/public/components/explorer/docTable/doc_flyout.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
index fdff39ea3..beba69089 100644
--- a/dashboards-observability/public/components/explorer/docTable/doc_flyout.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
@@ -16,15 +16,15 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import moment from 'moment';
-import { FlyoutContainers } from '../../common/flyout_containers';
+import { FlyoutContainers } from '../../../common/flyout_containers';
 import { IDocType } from './docViewRow';
 import { DocViewer } from './docViewer';
-import { uiSettingsService } from '../../../../common/utils';
-import { IExplorerFields } from '../../../../common/types/explorer';
-import { getHeaders, populateDataGrid } from '../utils';
-import { DEFAULT_COLUMNS } from '../../../../common/constants/explorer';
-import { HttpSetup } from '../../../../../../src/core/public';
-import { PPL_STATS_REGEX } from '../../../../common/constants/shared';
+import { uiSettingsService } from '../../../../../common/utils';
+import { IExplorerFields } from '../../../../../common/types/explorer';
+import { getHeaders, populateDataGrid } from '../../utils';
+import { DEFAULT_COLUMNS } from '../../../../../common/constants/explorer';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { PPL_STATS_REGEX } from '../../../../../common/constants/shared';
 
 interface Props {
   http: HttpSetup;
diff --git a/dashboards-observability/public/components/explorer/docTable/index.ts b/dashboards-observability/public/components/event_analytics/explorer/events_views/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/index.ts
diff --git a/dashboards-observability/public/components/explorer/docTable/json_code_block/__tests__/__snapshots__/json_code_block.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/__snapshots__/json_code_block.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/json_code_block/__tests__/__snapshots__/json_code_block.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/__snapshots__/json_code_block.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/docTable/json_code_block/__tests__/json_code_block.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/json_code_block.test.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/json_code_block/__tests__/json_code_block.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/json_code_block.test.tsx
diff --git a/dashboards-observability/public/components/explorer/docTable/json_code_block/json_code_block.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/json_code_block/json_code_block.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/docTable/json_code_block/json_code_block.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/json_code_block/json_code_block.tsx
diff --git a/dashboards-observability/public/components/explorer/docTable/surrounding_flyout.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
similarity index 95%
rename from dashboards-observability/public/components/explorer/docTable/surrounding_flyout.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
index 5ca0701dc..4c67c3e19 100644
--- a/dashboards-observability/public/components/explorer/docTable/surrounding_flyout.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
@@ -21,13 +21,13 @@ import {
   EuiTitle,
   EuiToolTip,
 } from '@elastic/eui';
-import { FlyoutContainers } from '../../common/flyout_containers';
+import { FlyoutContainers } from '../../../common/flyout_containers';
 import { IDocType } from './docViewRow';
-import { IExplorerFields, IField } from '../../../../common/types/explorer';
-import { getHeaders, fetchSurroundingData, rangeNumDocs, populateDataGrid } from '../utils';
-import { DEFAULT_COLUMNS } from '../../../../common/constants/explorer';
-import { HttpSetup } from '../../../../../../src/core/public';
-import PPLService from '../../../services/requests/ppl';
+import { IExplorerFields, IField } from '../../../../../common/types/explorer';
+import { getHeaders, fetchSurroundingData, rangeNumDocs, populateDataGrid } from '../../utils';
+import { DEFAULT_COLUMNS } from '../../../../../common/constants/explorer';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import PPLService from '../../../../services/requests/ppl';
 
 interface Props {
   http: HttpSetup;
diff --git a/dashboards-observability/public/components/explorer/docTable/trace_block/trace_block.tsx b/dashboards-observability/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx
similarity index 78%
rename from dashboards-observability/public/components/explorer/docTable/trace_block/trace_block.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx
index 6227666e8..e90476c92 100644
--- a/dashboards-observability/public/components/explorer/docTable/trace_block/trace_block.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx
@@ -3,17 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { TraceDetailRender } from '../../../application_analytics/components/flyout_components/trace_detail_render';
+import { TraceDetailRender } from '../../../../application_analytics/components/flyout_components/trace_detail_render';
 import React, { useEffect } from 'react';
-import { HttpSetup } from '../../../../../../../src/core/public';
+import { HttpSetup } from '../../../../../../../../src/core/public';
 import { EuiCallOut, EuiLink } from '@elastic/eui';
-import { TRACE_ANALYTICS_DOCUMENTATION_LINK } from '../../../../../common/constants/trace_analytics';
+import { TRACE_ANALYTICS_DOCUMENTATION_LINK } from '../../../../../../common/constants/trace_analytics';
 import {
   OPEN_TELEMETRY_LOG_CORRELATION_LINK,
   OTEL_TRACE_ID,
-} from '../../../../../common/constants/explorer';
+} from '../../../../../../common/constants/explorer';
 import { IDocType } from '../docViewRow';
-import { isValidTraceId } from '../../utils';
+import { isValidTraceId } from '../../../utils';
 
 interface props {
   http: HttpSetup;
diff --git a/dashboards-observability/public/components/explorer/explorer.scss b/dashboards-observability/public/components/event_analytics/explorer/explorer.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/explorer.scss
rename to dashboards-observability/public/components/event_analytics/explorer/explorer.scss
diff --git a/dashboards-observability/public/components/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
similarity index 96%
rename from dashboards-observability/public/components/explorer/explorer.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
index 33ad3fa6e..37cd5affd 100644
--- a/dashboards-observability/public/components/explorer/explorer.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx
@@ -23,15 +23,15 @@ import {
 } from '@elastic/eui';
 import dateMath from '@elastic/datemath';
 import classNames from 'classnames';
-import { Search } from '../common/search/search';
+import { Search } from '../../common/search/search';
 import { CountDistribution } from './visualizations/count_distribution';
-import { DataGrid } from './data_grid';
+import { DataGrid } from './events_views/data_grid';
 import { Sidebar } from './sidebar';
 import { NoResults } from './no_results';
 import { HitsCounter } from './hits_counter/hits_counter';
 import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
-import { IField, IQueryTab, IDefaultTimestampState } from '../../../common/types/explorer';
+import { IField, IQueryTab, IDefaultTimestampState } from '../../../../common/types/explorer';
 import {
   TAB_CHART_TITLE,
   TAB_EVENT_TITLE,
@@ -53,30 +53,30 @@ import {
   INDEX,
   FINAL_QUERY,
   DATE_PICKER_FORMAT,
-} from '../../../common/constants/explorer';
-import { PPL_STATS_REGEX, PPL_NEWLINE_REGEX, LIVE_OPTIONS, LIVE_END_TIME  } from '../../../common/constants/shared';
-import { getIndexPatternFromRawQuery, preprocessQuery, buildQuery } from '../../../common/utils';
-import { useFetchEvents, useFetchVisualizations } from './hooks';
-import { changeQuery, changeDateRange, selectQueries } from './slices/query_slice';
-import { selectQueryResult } from './slices/query_result_slice';
-import { selectFields, updateFields, sortFields } from './slices/field_slice';
-import { updateTabName } from './slices/query_tab_slice';
-import { selectCountDistribution } from './slices/count_distribution_slice';
-import { selectExplorerVisualization } from './slices/visualization_slice';
+} from '../../../../common/constants/explorer';
+import { PPL_STATS_REGEX, PPL_NEWLINE_REGEX, LIVE_OPTIONS, LIVE_END_TIME } from '../../../../common/constants/shared';
+import { getIndexPatternFromRawQuery, preprocessQuery, buildQuery } from '../../../../common/utils';
+import { useFetchEvents, useFetchVisualizations } from '../hooks';
+import { changeQuery, changeDateRange, selectQueries } from '../redux/slices/query_slice';
+import { selectQueryResult } from '../redux/slices/query_result_slice';
+import { selectFields, updateFields, sortFields } from '../redux/slices/field_slice';
+import { updateTabName } from '../redux/slices/query_tab_slice';
+import { selectCountDistribution } from '../redux/slices/count_distribution_slice';
+import { selectExplorerVisualization } from '../redux/slices/visualization_slice';
 import {
   selectVisualizationConfig,
   change as changeVisualizationConfig,
-} from './slices/viualization_config_slice';
-import { change as updateVizConfig } from './slices/viualization_config_slice';
-import { IExplorerProps, IVisualizationContainerProps } from '../../../common/types/explorer';
-import { TabContext } from './hooks';
-import { getVizContainerProps } from '../visualizations/charts/helpers';
+} from '../redux/slices/viualization_config_slice';
+import { change as updateVizConfig } from '../redux/slices/viualization_config_slice';
+import { IExplorerProps, IVisualizationContainerProps } from '../../../../common/types/explorer';
+import { TabContext } from '../hooks';
+import { getVizContainerProps } from '../../visualizations/charts/helpers';
 import {
   parseGetSuggestions,
   onItemSelect,
-} from '../common/search/autocomplete_logic';
-import { formatError } from './utils';
-import { sleep } from '../common/live_tail/live_tail_button';
+} from '../../common/search/autocomplete_logic';
+import { formatError } from '../utils';
+import { sleep } from '../../common/live_tail/live_tail_button';
 
 const TYPE_TAB_MAPPING = {
   [SAVED_QUERY]: TAB_EVENT_ID,
diff --git a/dashboards-observability/public/components/explorer/hits_counter/__tests__/__snapshots__/hits_counter.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/hits_counter/__tests__/__snapshots__/hits_counter.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/hits_counter/__tests__/__snapshots__/hits_counter.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/hits_counter/__tests__/__snapshots__/hits_counter.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/hits_counter/__tests__/hits_counter.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/hits_counter/__tests__/hits_counter.test.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/hits_counter/__tests__/hits_counter.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/hits_counter/__tests__/hits_counter.test.tsx
diff --git a/dashboards-observability/public/components/explorer/hits_counter/hits_counter.tsx b/dashboards-observability/public/components/event_analytics/explorer/hits_counter/hits_counter.tsx
similarity index 96%
rename from dashboards-observability/public/components/explorer/hits_counter/hits_counter.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/hits_counter/hits_counter.tsx
index 8b7d3f1d0..0941658eb 100644
--- a/dashboards-observability/public/components/explorer/hits_counter/hits_counter.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/hits_counter/hits_counter.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { i18n } from '@osd/i18n';
-import { formatNumWithCommas } from '../../common/helpers';
+import { formatNumWithCommas } from '../../../common/helpers';
 
 export interface HitsCounterProps {
   /**
diff --git a/dashboards-observability/public/components/explorer/hits_counter/index.ts b/dashboards-observability/public/components/event_analytics/explorer/hits_counter/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/hits_counter/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/hits_counter/index.ts
diff --git a/dashboards-observability/public/components/explorer/log_explorer.scss b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/log_explorer.scss
rename to dashboards-observability/public/components/event_analytics/explorer/log_explorer.scss
diff --git a/dashboards-observability/public/components/explorer/log_explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx
similarity index 92%
rename from dashboards-observability/public/components/explorer/log_explorer.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx
index dd10d70a7..53bd15be4 100644
--- a/dashboards-observability/public/components/explorer/log_explorer.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/log_explorer.tsx
@@ -11,7 +11,7 @@ import { uniqueId, map, isEmpty } from 'lodash';
 import $ from 'jquery';
 import { EuiIcon, EuiText, EuiTabbedContentTab, EuiTabbedContent } from '@elastic/eui';
 import { Explorer } from './explorer';
-import { ILogExplorerProps } from '../../../common/types/explorer';
+import { ILogExplorerProps } from '../../../../common/types/explorer';
 import {
   TAB_TITLE,
   TAB_ID_TXT_PFX,
@@ -21,11 +21,11 @@ import {
   TAB_EVENT_ID,
   TAB_CHART_ID,
   APP_ANALYTICS_TAB_ID_REGEX,
-} from '../../../common/constants/explorer';
-import { selectQueryTabs, setSelectedQueryTab } from './slices/query_tab_slice';
-import { selectQueries } from './slices/query_slice';
-import { selectQueryResult } from './slices/query_result_slice';
-import { initializeTabData, removeTabData } from '../application_analytics/helpers/utils';
+} from '../../../../common/constants/explorer';
+import { selectQueryTabs, setSelectedQueryTab } from '../redux/slices/query_tab_slice';
+import { selectQueries } from '../redux/slices/query_slice';
+import { selectQueryResult } from '../redux/slices/query_result_slice';
+import { initializeTabData, removeTabData } from '../../application_analytics/helpers/utils';
 
 const searchBarConfigs = {
   [TAB_EVENT_ID]: {
diff --git a/dashboards-observability/public/components/explorer/no_results.tsx b/dashboards-observability/public/components/event_analytics/explorer/no_results.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/no_results.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/no_results.tsx
diff --git a/dashboards-observability/public/components/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/save_panel/__tests__/save_panel.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
similarity index 79%
rename from dashboards-observability/public/components/explorer/save_panel/__tests__/save_panel.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
index 8a907ac2a..6eec4ca91 100644
--- a/dashboards-observability/public/components/explorer/save_panel/__tests__/save_panel.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
@@ -8,9 +8,9 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { SavePanel } from '../save_panel';
-import { SELECTED_PANELS_OPTIONS } from '../../../../../test/event_analytics_constants';
-import SavedObjects from '../../../../services/saved_objects/event_analytics/saved_objects';
-import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
+import { SELECTED_PANELS_OPTIONS } from '../../../../../../test/event_analytics_constants';
+import SavedObjects from '../../../../../services/saved_objects/event_analytics/saved_objects';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
 
 describe('Saved query table component', () => {
   configure({ adapter: new Adapter() });
diff --git a/dashboards-observability/public/components/explorer/save_panel/index.ts b/dashboards-observability/public/components/event_analytics/explorer/save_panel/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/save_panel/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/save_panel/index.ts
diff --git a/dashboards-observability/public/components/explorer/save_panel/save_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/save_panel/save_panel.tsx
similarity index 96%
rename from dashboards-observability/public/components/explorer/save_panel/save_panel.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/save_panel/save_panel.tsx
index e18022db5..c0b4793b5 100644
--- a/dashboards-observability/public/components/explorer/save_panel/save_panel.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -8,7 +8,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { EuiTitle, EuiComboBox, EuiFormRow, EuiSpacer, EuiFieldText } from '@elastic/eui';
 import { useEffect } from 'react';
 import { isEmpty } from 'lodash';
-import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
+import SavedObjects from '../../../../services/saved_objects/event_analytics/saved_objects';
 
 interface ISavedPanelProps {
   selectedOptions: any;
diff --git a/dashboards-observability/public/components/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/sidebar/__tests__/field.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/field.test.tsx
similarity index 92%
rename from dashboards-observability/public/components/explorer/sidebar/__tests__/field.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/field.test.tsx
index c6660d934..472812664 100644
--- a/dashboards-observability/public/components/explorer/sidebar/__tests__/field.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/field.test.tsx
@@ -8,7 +8,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { Field } from '../field';
-import { AGENT_FIELD } from '../../../../../test/event_analytics_constants';
+import { AGENT_FIELD } from '../../../../../../test/event_analytics_constants';
 
 describe('Field component', () => {
   configure({ adapter: new Adapter() });
diff --git a/dashboards-observability/public/components/explorer/sidebar/__tests__/sidebar.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/sidebar.test.tsx
similarity index 95%
rename from dashboards-observability/public/components/explorer/sidebar/__tests__/sidebar.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/sidebar.test.tsx
index 0e8e23ec4..6e1b9c5c7 100644
--- a/dashboards-observability/public/components/explorer/sidebar/__tests__/sidebar.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/__tests__/sidebar.test.tsx
@@ -13,13 +13,13 @@ import {
   AVAILABLE_FIELDS,
   UNSELECTED_FIELDS,
   QUERIED_FIELDS
-} from '../../../../../common/constants/explorer';
+} from '../../../../../../common/constants/explorer';
 import { 
   AVAILABLE_FIELDS as SIDEBAR_AVAILABLE_FIELDS,
   QUERY_FIELDS,
   JSON_DATA,
   JSON_DATA_ALL
-} from '../../../../../test/event_analytics_constants';
+} from '../../../../../../test/event_analytics_constants';
 
 describe('Siderbar component', () => {
   configure({ adapter: new Adapter() });
diff --git a/dashboards-observability/public/components/explorer/sidebar/field.tsx b/dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx
similarity index 96%
rename from dashboards-observability/public/components/explorer/sidebar/field.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx
index 3b6b127ae..efeacf5c1 100644
--- a/dashboards-observability/public/components/explorer/sidebar/field.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/field.tsx
@@ -19,9 +19,9 @@ import {
   EuiFlexItem,
   EuiTitle,
 } from '@elastic/eui';
-import { FieldButton } from '../../common/field_button';
-import { FieldIcon } from '../../common/field_icon';
-import { IField } from '../../../../common/types/explorer';
+import { FieldButton } from '../../../common/field_button';
+import { FieldIcon } from '../../../common/field_icon';
+import { IField } from '../../../../../common/types/explorer';
 import { FieldInsights } from './field_insights';
 
 interface IFieldProps {
diff --git a/dashboards-observability/public/components/explorer/sidebar/field_insights.tsx b/dashboards-observability/public/components/event_analytics/explorer/sidebar/field_insights.tsx
similarity index 96%
rename from dashboards-observability/public/components/explorer/sidebar/field_insights.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/field_insights.tsx
index 90b3c958e..6a682cc5c 100644
--- a/dashboards-observability/public/components/explorer/sidebar/field_insights.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/field_insights.tsx
@@ -6,8 +6,8 @@
 import React, { useMemo, useState, useContext, useEffect } from 'react';
 import { indexOf, last } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiBasicTable } from '@elastic/eui';
-import { getIndexPatternFromRawQuery } from '../../../../common/utils/query_utils';
-import { TabContext } from '../hooks/use_tab_context';
+import { getIndexPatternFromRawQuery } from '../../../../../common/utils/query_utils';
+import { TabContext } from '../../hooks/use_tab_context';
 
 export const FieldInsights = ({ field, query }: any) => {
   const { pplService } = useContext(TabContext);
diff --git a/dashboards-observability/public/components/explorer/sidebar/index.ts b/dashboards-observability/public/components/event_analytics/explorer/sidebar/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/sidebar/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/index.ts
diff --git a/dashboards-observability/public/components/explorer/sidebar/sidebar.scss b/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/sidebar/sidebar.scss
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.scss
diff --git a/dashboards-observability/public/components/explorer/sidebar/sidebar.tsx b/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.tsx
similarity index 99%
rename from dashboards-observability/public/components/explorer/sidebar/sidebar.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.tsx
index be58d19b1..9a49ca926 100644
--- a/dashboards-observability/public/components/explorer/sidebar/sidebar.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/sidebar/sidebar.tsx
@@ -12,7 +12,7 @@ import { i18n } from '@osd/i18n';
 import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { cssNumber } from 'jquery';
 import { Field } from './field';
-import { IExplorerFields, IField } from '../../../../common/types/explorer';
+import { IExplorerFields, IField } from '../../../../../common/types/explorer';
 
 interface ISidebarProps {
   explorerFields: IExplorerFields;
diff --git a/dashboards-observability/public/components/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
similarity index 96%
rename from dashboards-observability/public/components/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
index af8ade96a..9c302d242 100644
--- a/dashboards-observability/public/components/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
+++ b/dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
@@ -172,7 +172,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                 <EuiSelect
                   aria-label="Time interval"
                   compressed={true}
-                  data-test-subj="discoverIntervalSelect"
+                  data-test-subj="eventAnalytics__EventIntervalSelect"
                   id="dscResultsIntervalSelector"
                   onChange={[Function]}
                   options={
@@ -227,7 +227,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                           <select
                             aria-label="Time interval"
                             className="euiSelect euiSelect--compressed"
-                            data-test-subj="discoverIntervalSelect"
+                            data-test-subj="eventAnalytics__EventIntervalSelect"
                             id="dscResultsIntervalSelector"
                             onChange={[Function]}
                             onMouseUp={[Function]}
@@ -272,6 +272,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                           </select>
                         </EuiValidatableControl>
                         <EuiFormControlLayoutIcons
+                          compressed={true}
                           icon={
                             Object {
                               "side": "right",
@@ -284,6 +285,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                             className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                           >
                             <EuiFormControlLayoutCustomIcon
+                              size="s"
                               type="arrowDown"
                             >
                               <span
@@ -292,18 +294,19 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                                 <EuiIcon
                                   aria-hidden="true"
                                   className="euiFormControlLayoutCustomIcon__icon"
+                                  size="s"
                                   type="arrowDown"
                                 >
                                   <EuiIconEmpty
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     role="img"
                                     style={null}
                                   >
                                     <svg
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height={16}
                                       role="img"
diff --git a/dashboards-observability/public/components/explorer/timechart_header/__tests__/timechart_header.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx
similarity index 85%
rename from dashboards-observability/public/components/explorer/timechart_header/__tests__/timechart_header.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx
index ba43d1a7d..5779db4f5 100644
--- a/dashboards-observability/public/components/explorer/timechart_header/__tests__/timechart_header.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx
@@ -8,9 +8,9 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { TimechartHeader } from '../timechart_header';
-import { TIME_INTERVAL_OPTIONS } from '../../../../../common/constants/explorer';
+import { TIME_INTERVAL_OPTIONS } from '../../../../../../common/constants/explorer';
 
-describe.skip('Time chart header component', () => {
+describe('Time chart header component', () => {
   configure({ adapter: new Adapter() });
 
   it('Renders Time chart header component', async () => {
diff --git a/dashboards-observability/public/components/explorer/timechart_header/index.ts b/dashboards-observability/public/components/event_analytics/explorer/timechart_header/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/timechart_header/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/timechart_header/index.ts
diff --git a/dashboards-observability/public/components/explorer/timechart_header/timechart_header.tsx b/dashboards-observability/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/timechart_header/timechart_header.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/_mixins.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/_mixins.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/_mixins.scss
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/_mixins.scss
diff --git a/dashboards-observability/public/components/explorer/visualizations/_variables.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/_variables.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/_variables.scss
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/_variables.scss
diff --git a/dashboards-observability/public/components/explorer/visualizations/app.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/app.scss
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
new file mode 100644
index 000000000..69eda470d
--- /dev/null
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -0,0 +1,6180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Config panel component Renders config panel with visualization data 1`] = `
+<ConfigPanel
+  setCurVisId={[MockFunction]}
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {},
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "categoryAxis": "xaxis",
+        "component": [Function],
+        "editorConfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Data",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "value_options",
+                  "mapTo": "valueOptions",
+                  "name": "Value options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "xaxis",
+                      "name": "X-axis",
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "yaxis",
+                      "name": "Y-axis",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_options",
+                  "mapTo": "chartOptions",
+                  "name": "Chart options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                          Object {
+                            "name": "Horizontal",
+                            "orientationId": "h",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "modeId": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
+        },
+        "fullLabel": "Bar",
+        "icon": [Function],
+        "iconType": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Bar",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesAxis": "yaxis",
+        "type": "bar",
+        "visConfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <EuiFlexGroup
+    className="visEditorSidebar"
+    direction="column"
+    gutterSize="none"
+    justifyContent="spaceBetween"
+    responsive={false}
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionColumn visEditorSidebar"
+    >
+      <EuiFlexItem
+        data-test-subj="configPane__vizTypeSelector"
+      >
+        <div
+          className="euiFlexItem"
+          data-test-subj="configPane__vizTypeSelector"
+        >
+          <EuiSpacer
+            size="s"
+          >
+            <div
+              className="euiSpacer euiSpacer--s"
+            />
+          </EuiSpacer>
+          <EuiComboBox
+            aria-label="config chart selector"
+            async={false}
+            compressed={false}
+            fullWidth={true}
+            isClearable={true}
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "category": "Visualizations",
+                  "categoryAxis": "xaxis",
+                  "component": [Function],
+                  "editorConfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Data",
+                        "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "value_options",
+                            "mapTo": "valueOptions",
+                            "name": "Value options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": false,
+                                "mapTo": "xaxis",
+                                "name": "X-axis",
+                              },
+                              Object {
+                                "component": null,
+                                "isSingleSelection": false,
+                                "mapTo": "yaxis",
+                                "name": "Y-axis",
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "chart_options",
+                            "mapTo": "chartOptions",
+                            "name": "Chart options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": true,
+                                "mapTo": "orientation",
+                                "name": "Orientation",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "name": "Vertical",
+                                      "orientationId": "v",
+                                    },
+                                  ],
+                                  "dropdownList": Array [
+                                    Object {
+                                      "name": "Vertical",
+                                      "orientationId": "v",
+                                    },
+                                    Object {
+                                      "name": "Horizontal",
+                                      "orientationId": "h",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": null,
+                                "isSingleSelection": true,
+                                "mapTo": "mode",
+                                "name": "Mode",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "modeId": "group",
+                                      "name": "Group",
+                                    },
+                                  ],
+                                  "dropdownList": Array [
+                                    Object {
+                                      "modeId": "group",
+                                      "name": "Group",
+                                    },
+                                    Object {
+                                      "modeId": "stack",
+                                      "name": "Stack",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                      Object {
+                        "content": Array [],
+                        "editor": [Function],
+                        "id": "style-panel",
+                        "mapTo": "layoutConfig",
+                        "name": "Layout",
+                      },
+                    ],
+                  },
+                  "fullLabel": "Bar",
+                  "icon": [Function],
+                  "iconType": "visBarVerticalStacked",
+                  "id": "bar",
+                  "label": "Bar",
+                  "name": "bar",
+                  "orientation": "v",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "seriesAxis": "yaxis",
+                  "type": "bar",
+                  "visConfig": Object {
+                    "config": Object {
+                      "displaylogo": false,
+                      "responsive": true,
+                    },
+                    "isUniColor": false,
+                    "layout": Object {
+                      "height": 500,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 30,
+                        "l": 60,
+                        "pad": 0,
+                        "r": 30,
+                        "t": 50,
+                      },
+                      "showlegend": true,
+                    },
+                  },
+                },
+                Object {
+                  "category": "Visualizations",
+                  "categoryAxis": "xaxis",
+                  "component": [Function],
+                  "editorConfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Data",
+                        "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "value_options",
+                            "mapTo": "valueOptions",
+                            "name": "Value options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": true,
+                                "mapTo": "xaxis",
+                                "name": "X-axis",
+                              },
+                              Object {
+                                "component": null,
+                                "isSingleSelection": false,
+                                "mapTo": "yaxis",
+                                "name": "Y-axis",
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "chart_options",
+                            "mapTo": "chartOptions",
+                            "name": "Chart options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": true,
+                                "mapTo": "mode",
+                                "name": "Mode",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "modeId": "lines",
+                                      "name": "Lines",
+                                    },
+                                  ],
+                                  "dropdownList": Array [
+                                    Object {
+                                      "modeId": "markers",
+                                      "name": "Markers",
+                                    },
+                                    Object {
+                                      "modeId": "lines",
+                                      "name": "Lines",
+                                    },
+                                    Object {
+                                      "modeId": "lines+markers",
+                                      "name": "Lines + Markers",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
+                          Object {
+                            "defaultState": Array [],
+                            "editor": [Function],
+                            "id": "thresholds",
+                            "mapTo": "thresholds",
+                            "name": "Thresholds",
+                            "schemas": Array [],
+                          },
+                        ],
+                      },
+                      Object {
+                        "content": Array [],
+                        "editor": [Function],
+                        "id": "style-panel",
+                        "mapTo": "layoutConfig",
+                        "name": "Layout",
+                      },
+                    ],
+                  },
+                  "fullLabel": "Line",
+                  "icon": [Function],
+                  "iconType": "visLine",
+                  "id": "line",
+                  "label": "Line",
+                  "name": "line",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "seriesAxis": "yaxis",
+                  "type": "line",
+                  "visConfig": Object {
+                    "config": Object {
+                      "barmode": "line",
+                      "displaylogo": false,
+                      "responsive": true,
+                      "xaxis": Object {
+                        "automargin": true,
+                      },
+                      "yaxis": Object {
+                        "automargin": true,
+                      },
+                    },
+                    "layout": Object {
+                      "colorway": Array [
+                        "#3CA1C7",
+                        "#8C55A3",
+                        "#DB748A",
+                        "#F2BE4B",
+                        "#68CCC2",
+                        "#2A7866",
+                        "#843769",
+                        "#374FB8",
+                        "#BD6F26",
+                        "#4C636F",
+                      ],
+                      "height": 500,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 30,
+                        "l": 60,
+                        "pad": 0,
+                        "r": 30,
+                        "t": 50,
+                      },
+                      "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                      "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                      "showlegend": true,
+                      "xaxis": Object {
+                        "fixedrange": true,
+                        "showgrid": false,
+                        "visible": true,
+                      },
+                      "yaxis": Object {
+                        "fixedrange": true,
+                        "showgrid": false,
+                        "visible": true,
+                      },
+                    },
+                  },
+                },
+                Object {
+                  "category": "Visualizations",
+                  "categoryAxis": "xaxis",
+                  "component": [Function],
+                  "editorConfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Data",
+                        "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "value_options",
+                            "mapTo": "valueOptions",
+                            "name": "Value options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": false,
+                                "mapTo": "xaxis",
+                                "name": "Label",
+                                "onChangeHandler": "setXaxisSelections",
+                              },
+                              Object {
+                                "component": null,
+                                "isSingleSelection": false,
+                                "mapTo": "yaxis",
+                                "name": "Value",
+                                "onChangeHandler": "setYaxisSelections",
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "chart_options",
+                            "mapTo": "chartOptions",
+                            "name": "Chart options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": true,
+                                "mapTo": "mode",
+                                "name": "Mode",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "modeId": "pie",
+                                      "name": "Pie",
+                                    },
+                                  ],
+                                  "dropdownList": Array [
+                                    Object {
+                                      "modeId": "pie",
+                                      "name": "Pie",
+                                    },
+                                    Object {
+                                      "modeId": "donut",
+                                      "name": "Donut",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                      Object {
+                        "content": Array [],
+                        "editor": [Function],
+                        "id": "style-panel",
+                        "mapTo": "layoutConfig",
+                        "name": "Layout",
+                      },
+                    ],
+                  },
+                  "fullLabel": "Pie",
+                  "icon": [Function],
+                  "iconType": "visPie",
+                  "id": "pie",
+                  "label": "Pie",
+                  "name": "pie",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "seriesAxis": "yaxis",
+                  "type": "pie",
+                  "visConfig": Object {
+                    "config": Object {
+                      "displaylogo": false,
+                      "responsive": true,
+                    },
+                    "layout": Object {
+                      "colorway": Array [
+                        "#3CA1C7",
+                        "#8C55A3",
+                        "#DB748A",
+                        "#F2BE4B",
+                        "#68CCC2",
+                        "#2A7866",
+                        "#843769",
+                        "#374FB8",
+                        "#BD6F26",
+                        "#4C636F",
+                      ],
+                      "height": 500,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 30,
+                        "l": 60,
+                        "pad": 0,
+                        "r": 30,
+                        "t": 50,
+                      },
+                      "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                      "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                      "showlegend": true,
+                      "xaxis": Object {
+                        "fixedrange": true,
+                        "showgrid": false,
+                        "visible": true,
+                      },
+                      "yaxis": Object {
+                        "fixedrange": true,
+                        "showgrid": false,
+                        "visible": true,
+                      },
+                    },
+                  },
+                },
+                Object {
+                  "category": "Visualizations",
+                  "component": [Function],
+                  "editorConfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Data",
+                        "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "value_options",
+                            "mapTo": "valueOptions",
+                            "name": "Value options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": true,
+                                "mapTo": "zaxis",
+                                "name": "Z-axis",
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                      Object {
+                        "content": Array [],
+                        "editor": [Function],
+                        "id": "style-panel",
+                        "mapTo": "layoutConfig",
+                        "name": "Layout",
+                      },
+                    ],
+                  },
+                  "fullLabel": "Hubble",
+                  "icon": [Function],
+                  "iconType": "heatmap",
+                  "id": "heatmap",
+                  "label": "Heatmap",
+                  "name": "heatmap",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "type": "heatmap",
+                  "visConfig": Object {
+                    "config": Object {
+                      "displaylogo": false,
+                      "responsive": true,
+                    },
+                    "layout": Object {
+                      "height": 500,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "left": 60,
+                      },
+                      "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                      "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                      "showlegend": true,
+                    },
+                  },
+                },
+                Object {
+                  "category": "Visualizations",
+                  "categoryAxis": "xaxis",
+                  "component": [Function],
+                  "editorConfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Data",
+                        "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "text_editor",
+                            "mapTo": "text",
+                            "name": "Text",
+                            "schemas": Array [],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  "fullLabel": "Text",
+                  "icon": [Function],
+                  "iconType": "visText",
+                  "id": "text",
+                  "label": "Text",
+                  "name": "text",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "seriesAxis": "yaxis",
+                  "type": "text",
+                  "visConfig": Object {
+                    "config": Object {
+                      "barmode": "line",
+                      "displaylogo": false,
+                      "responsive": true,
+                      "xaxis": Object {
+                        "automargin": true,
+                      },
+                      "yaxis": Object {
+                        "automargin": true,
+                      },
+                    },
+                    "layout": Object {
+                      "colorway": Array [
+                        "#3CA1C7",
+                        "#8C55A3",
+                        "#DB748A",
+                        "#F2BE4B",
+                        "#68CCC2",
+                        "#2A7866",
+                        "#843769",
+                        "#374FB8",
+                        "#BD6F26",
+                        "#4C636F",
+                      ],
+                      "height": 500,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 30,
+                        "l": 60,
+                        "pad": 0,
+                        "r": 30,
+                        "t": 50,
+                      },
+                      "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                      "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                      "showlegend": true,
+                      "xaxis": Object {
+                        "fixedrange": true,
+                        "showgrid": false,
+                        "visible": true,
+                      },
+                      "yaxis": Object {
+                        "fixedrange": true,
+                        "showgrid": false,
+                        "visible": true,
+                      },
+                    },
+                  },
+                },
+              ]
+            }
+            placeholder="Select a chart"
+            renderOption={[Function]}
+            selectedOptions={
+              Array [
+                Object {
+                  "category": "Visualizations",
+                  "categoryAxis": "xaxis",
+                  "component": [Function],
+                  "editorConfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Data",
+                        "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "value_options",
+                            "mapTo": "valueOptions",
+                            "name": "Value options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": false,
+                                "mapTo": "xaxis",
+                                "name": "X-axis",
+                              },
+                              Object {
+                                "component": null,
+                                "isSingleSelection": false,
+                                "mapTo": "yaxis",
+                                "name": "Y-axis",
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "chart_options",
+                            "mapTo": "chartOptions",
+                            "name": "Chart options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "isSingleSelection": true,
+                                "mapTo": "orientation",
+                                "name": "Orientation",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "name": "Vertical",
+                                      "orientationId": "v",
+                                    },
+                                  ],
+                                  "dropdownList": Array [
+                                    Object {
+                                      "name": "Vertical",
+                                      "orientationId": "v",
+                                    },
+                                    Object {
+                                      "name": "Horizontal",
+                                      "orientationId": "h",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": null,
+                                "isSingleSelection": true,
+                                "mapTo": "mode",
+                                "name": "Mode",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "modeId": "group",
+                                      "name": "Group",
+                                    },
+                                  ],
+                                  "dropdownList": Array [
+                                    Object {
+                                      "modeId": "group",
+                                      "name": "Group",
+                                    },
+                                    Object {
+                                      "modeId": "stack",
+                                      "name": "Stack",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                      Object {
+                        "content": Array [],
+                        "editor": [Function],
+                        "id": "style-panel",
+                        "mapTo": "layoutConfig",
+                        "name": "Layout",
+                      },
+                    ],
+                  },
+                  "fullLabel": "Bar",
+                  "icon": [Function],
+                  "iconType": "visBarVerticalStacked",
+                  "id": "bar",
+                  "label": "Bar",
+                  "name": "bar",
+                  "orientation": "v",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "seriesAxis": "yaxis",
+                  "type": "bar",
+                  "visConfig": Object {
+                    "config": Object {
+                      "displaylogo": false,
+                      "responsive": true,
+                    },
+                    "isUniColor": false,
+                    "layout": Object {
+                      "height": 500,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 30,
+                        "l": 60,
+                        "pad": 0,
+                        "r": 30,
+                        "t": 50,
+                      },
+                      "showlegend": true,
+                    },
+                  },
+                },
+              ]
+            }
+            singleSelection={true}
+            sortMatchesBy="none"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup="listbox"
+              aria-label="config chart selector"
+              className="euiComboBox euiComboBox--fullWidth"
+              onKeyDown={[Function]}
+              role="combobox"
+            >
+              <EuiComboBoxInput
+                autoSizeInputRef={[Function]}
+                compressed={false}
+                fullWidth={true}
+                hasSelectedOptions={true}
+                inputRef={[Function]}
+                isListOpen={false}
+                noIcon={false}
+                onChange={[Function]}
+                onClear={[Function]}
+                onClick={[Function]}
+                onCloseListClick={[Function]}
+                onFocus={[Function]}
+                onOpenListClick={[Function]}
+                onRemoveOption={[Function]}
+                placeholder="Select a chart"
+                rootId={[Function]}
+                searchValue=""
+                selectedOptions={
+                  Array [
+                    Object {
+                      "category": "Visualizations",
+                      "categoryAxis": "xaxis",
+                      "component": [Function],
+                      "editorConfig": Object {
+                        "panelTabs": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "data-panel",
+                            "mapTo": "dataConfig",
+                            "name": "Data",
+                            "sections": Array [
+                              Object {
+                                "editor": [Function],
+                                "id": "value_options",
+                                "mapTo": "valueOptions",
+                                "name": "Value options",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "isSingleSelection": false,
+                                    "mapTo": "xaxis",
+                                    "name": "X-axis",
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "isSingleSelection": false,
+                                    "mapTo": "yaxis",
+                                    "name": "Y-axis",
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "chart_options",
+                                "mapTo": "chartOptions",
+                                "name": "Chart options",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "isSingleSelection": true,
+                                    "mapTo": "orientation",
+                                    "name": "Orientation",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "name": "Vertical",
+                                          "orientationId": "v",
+                                        },
+                                      ],
+                                      "dropdownList": Array [
+                                        Object {
+                                          "name": "Vertical",
+                                          "orientationId": "v",
+                                        },
+                                        Object {
+                                          "name": "Horizontal",
+                                          "orientationId": "h",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "isSingleSelection": true,
+                                    "mapTo": "mode",
+                                    "name": "Mode",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "modeId": "group",
+                                          "name": "Group",
+                                        },
+                                      ],
+                                      "dropdownList": Array [
+                                        Object {
+                                          "modeId": "group",
+                                          "name": "Group",
+                                        },
+                                        Object {
+                                          "modeId": "stack",
+                                          "name": "Stack",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                ],
+                              },
+                            ],
+                          },
+                          Object {
+                            "content": Array [],
+                            "editor": [Function],
+                            "id": "style-panel",
+                            "mapTo": "layoutConfig",
+                            "name": "Layout",
+                          },
+                        ],
+                      },
+                      "fullLabel": "Bar",
+                      "icon": [Function],
+                      "iconType": "visBarVerticalStacked",
+                      "id": "bar",
+                      "label": "Bar",
+                      "name": "bar",
+                      "orientation": "v",
+                      "selection": Object {
+                        "dataLoss": "nothing",
+                      },
+                      "seriesAxis": "yaxis",
+                      "type": "bar",
+                      "visConfig": Object {
+                        "config": Object {
+                          "displaylogo": false,
+                          "responsive": true,
+                        },
+                        "isUniColor": false,
+                        "layout": Object {
+                          "height": 500,
+                          "legend": Object {
+                            "orientation": "v",
+                            "traceorder": "normal",
+                          },
+                          "margin": Object {
+                            "b": 30,
+                            "l": 60,
+                            "pad": 0,
+                            "r": 30,
+                            "t": 50,
+                          },
+                          "showlegend": true,
+                        },
+                      },
+                    },
+                  ]
+                }
+                singleSelection={true}
+                toggleButtonRef={[Function]}
+                updatePosition={[Function]}
+                value="Bar"
+              >
+                <EuiFormControlLayout
+                  clear={
+                    Object {
+                      "data-test-subj": "comboBoxClearButton",
+                      "onClick": [Function],
+                    }
+                  }
+                  compressed={false}
+                  fullWidth={true}
+                  icon={
+                    Object {
+                      "aria-label": "Open list of options",
+                      "data-test-subj": "comboBoxToggleListButton",
+                      "disabled": undefined,
+                      "onClick": [Function],
+                      "ref": [Function],
+                      "side": "right",
+                      "type": "arrowDown",
+                    }
+                  }
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <div
+                        className="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                        data-test-subj="comboBoxInput"
+                        onClick={[Function]}
+                        tabIndex={-1}
+                      >
+                        <EuiComboBoxPill
+                          asPlainText={false}
+                          category="Visualizations"
+                          categoryAxis="xaxis"
+                          color="hollow"
+                          component={[Function]}
+                          editorConfig={
+                            Object {
+                              "panelTabs": Array [
+                                Object {
+                                  "editor": [Function],
+                                  "id": "data-panel",
+                                  "mapTo": "dataConfig",
+                                  "name": "Data",
+                                  "sections": Array [
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "value_options",
+                                      "mapTo": "valueOptions",
+                                      "name": "Value options",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": false,
+                                          "mapTo": "xaxis",
+                                          "name": "X-axis",
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": false,
+                                          "mapTo": "yaxis",
+                                          "name": "Y-axis",
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "chart_options",
+                                      "mapTo": "chartOptions",
+                                      "name": "Chart options",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": true,
+                                          "mapTo": "orientation",
+                                          "name": "Orientation",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "name": "Vertical",
+                                                "orientationId": "v",
+                                              },
+                                            ],
+                                            "dropdownList": Array [
+                                              Object {
+                                                "name": "Vertical",
+                                                "orientationId": "v",
+                                              },
+                                              Object {
+                                                "name": "Horizontal",
+                                                "orientationId": "h",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": true,
+                                          "mapTo": "mode",
+                                          "name": "Mode",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "modeId": "group",
+                                                "name": "Group",
+                                              },
+                                            ],
+                                            "dropdownList": Array [
+                                              Object {
+                                                "modeId": "group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "modeId": "stack",
+                                                "name": "Stack",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  ],
+                                },
+                                Object {
+                                  "content": Array [],
+                                  "editor": [Function],
+                                  "id": "style-panel",
+                                  "mapTo": "layoutConfig",
+                                  "name": "Layout",
+                                },
+                              ],
+                            }
+                          }
+                          fullLabel="Bar"
+                          icon={[Function]}
+                          iconType="visBarVerticalStacked"
+                          id="bar"
+                          key="bar"
+                          name="bar"
+                          option={
+                            Object {
+                              "category": "Visualizations",
+                              "categoryAxis": "xaxis",
+                              "component": [Function],
+                              "editorConfig": Object {
+                                "panelTabs": Array [
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "data-panel",
+                                    "mapTo": "dataConfig",
+                                    "name": "Data",
+                                    "sections": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "value_options",
+                                        "mapTo": "valueOptions",
+                                        "name": "Value options",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": false,
+                                            "mapTo": "xaxis",
+                                            "name": "X-axis",
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": false,
+                                            "mapTo": "yaxis",
+                                            "name": "Y-axis",
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "chart_options",
+                                        "mapTo": "chartOptions",
+                                        "name": "Chart options",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": true,
+                                            "mapTo": "orientation",
+                                            "name": "Orientation",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "name": "Vertical",
+                                                  "orientationId": "v",
+                                                },
+                                              ],
+                                              "dropdownList": Array [
+                                                Object {
+                                                  "name": "Vertical",
+                                                  "orientationId": "v",
+                                                },
+                                                Object {
+                                                  "name": "Horizontal",
+                                                  "orientationId": "h",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": true,
+                                            "mapTo": "mode",
+                                            "name": "Mode",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "modeId": "group",
+                                                  "name": "Group",
+                                                },
+                                              ],
+                                              "dropdownList": Array [
+                                                Object {
+                                                  "modeId": "group",
+                                                  "name": "Group",
+                                                },
+                                                Object {
+                                                  "modeId": "stack",
+                                                  "name": "Stack",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                        ],
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "content": Array [],
+                                    "editor": [Function],
+                                    "id": "style-panel",
+                                    "mapTo": "layoutConfig",
+                                    "name": "Layout",
+                                  },
+                                ],
+                              },
+                              "fullLabel": "Bar",
+                              "icon": [Function],
+                              "iconType": "visBarVerticalStacked",
+                              "id": "bar",
+                              "label": "Bar",
+                              "name": "bar",
+                              "orientation": "v",
+                              "selection": Object {
+                                "dataLoss": "nothing",
+                              },
+                              "seriesAxis": "yaxis",
+                              "type": "bar",
+                              "visConfig": Object {
+                                "config": Object {
+                                  "displaylogo": false,
+                                  "responsive": true,
+                                },
+                                "isUniColor": false,
+                                "layout": Object {
+                                  "height": 500,
+                                  "legend": Object {
+                                    "orientation": "v",
+                                    "traceorder": "normal",
+                                  },
+                                  "margin": Object {
+                                    "b": 30,
+                                    "l": 60,
+                                    "pad": 0,
+                                    "r": 30,
+                                    "t": 50,
+                                  },
+                                  "showlegend": true,
+                                },
+                              },
+                            }
+                          }
+                          orientation="v"
+                          selection={
+                            Object {
+                              "dataLoss": "nothing",
+                            }
+                          }
+                          seriesAxis="yaxis"
+                          type="bar"
+                          visConfig={
+                            Object {
+                              "config": Object {
+                                "displaylogo": false,
+                                "responsive": true,
+                              },
+                              "isUniColor": false,
+                              "layout": Object {
+                                "height": 500,
+                                "legend": Object {
+                                  "orientation": "v",
+                                  "traceorder": "normal",
+                                },
+                                "margin": Object {
+                                  "b": 30,
+                                  "l": 60,
+                                  "pad": 0,
+                                  "r": 30,
+                                  "t": 50,
+                                },
+                                "showlegend": true,
+                              },
+                            }
+                          }
+                        >
+                          <EuiBadge
+                            category="Visualizations"
+                            categoryAxis="xaxis"
+                            className="euiComboBoxPill"
+                            color="hollow"
+                            component={[Function]}
+                            editorConfig={
+                              Object {
+                                "panelTabs": Array [
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "data-panel",
+                                    "mapTo": "dataConfig",
+                                    "name": "Data",
+                                    "sections": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "value_options",
+                                        "mapTo": "valueOptions",
+                                        "name": "Value options",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": false,
+                                            "mapTo": "xaxis",
+                                            "name": "X-axis",
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": false,
+                                            "mapTo": "yaxis",
+                                            "name": "Y-axis",
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "chart_options",
+                                        "mapTo": "chartOptions",
+                                        "name": "Chart options",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": true,
+                                            "mapTo": "orientation",
+                                            "name": "Orientation",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "name": "Vertical",
+                                                  "orientationId": "v",
+                                                },
+                                              ],
+                                              "dropdownList": Array [
+                                                Object {
+                                                  "name": "Vertical",
+                                                  "orientationId": "v",
+                                                },
+                                                Object {
+                                                  "name": "Horizontal",
+                                                  "orientationId": "h",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": true,
+                                            "mapTo": "mode",
+                                            "name": "Mode",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "modeId": "group",
+                                                  "name": "Group",
+                                                },
+                                              ],
+                                              "dropdownList": Array [
+                                                Object {
+                                                  "modeId": "group",
+                                                  "name": "Group",
+                                                },
+                                                Object {
+                                                  "modeId": "stack",
+                                                  "name": "Stack",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                        ],
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "content": Array [],
+                                    "editor": [Function],
+                                    "id": "style-panel",
+                                    "mapTo": "layoutConfig",
+                                    "name": "Layout",
+                                  },
+                                ],
+                              }
+                            }
+                            fullLabel="Bar"
+                            icon={[Function]}
+                            iconType="visBarVerticalStacked"
+                            id="bar"
+                            name="bar"
+                            orientation="v"
+                            selection={
+                              Object {
+                                "dataLoss": "nothing",
+                              }
+                            }
+                            seriesAxis="yaxis"
+                            title="Bar"
+                            type="bar"
+                            visConfig={
+                              Object {
+                                "config": Object {
+                                  "displaylogo": false,
+                                  "responsive": true,
+                                },
+                                "isUniColor": false,
+                                "layout": Object {
+                                  "height": 500,
+                                  "legend": Object {
+                                    "orientation": "v",
+                                    "traceorder": "normal",
+                                  },
+                                  "margin": Object {
+                                    "b": 30,
+                                    "l": 60,
+                                    "pad": 0,
+                                    "r": 30,
+                                    "t": 50,
+                                  },
+                                  "showlegend": true,
+                                },
+                              }
+                            }
+                          >
+                            <EuiInnerText>
+                              <span
+                                category="Visualizations"
+                                categoryAxis="xaxis"
+                                className="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                                component={[Function]}
+                                editorConfig={
+                                  Object {
+                                    "panelTabs": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "data-panel",
+                                        "mapTo": "dataConfig",
+                                        "name": "Data",
+                                        "sections": Array [
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "value_options",
+                                            "mapTo": "valueOptions",
+                                            "name": "Value options",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "isSingleSelection": false,
+                                                "mapTo": "xaxis",
+                                                "name": "X-axis",
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "isSingleSelection": false,
+                                                "mapTo": "yaxis",
+                                                "name": "Y-axis",
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "chart_options",
+                                            "mapTo": "chartOptions",
+                                            "name": "Chart options",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "isSingleSelection": true,
+                                                "mapTo": "orientation",
+                                                "name": "Orientation",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "name": "Vertical",
+                                                      "orientationId": "v",
+                                                    },
+                                                  ],
+                                                  "dropdownList": Array [
+                                                    Object {
+                                                      "name": "Vertical",
+                                                      "orientationId": "v",
+                                                    },
+                                                    Object {
+                                                      "name": "Horizontal",
+                                                      "orientationId": "h",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "isSingleSelection": true,
+                                                "mapTo": "mode",
+                                                "name": "Mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "modeId": "group",
+                                                      "name": "Group",
+                                                    },
+                                                  ],
+                                                  "dropdownList": Array [
+                                                    Object {
+                                                      "modeId": "group",
+                                                      "name": "Group",
+                                                    },
+                                                    Object {
+                                                      "modeId": "stack",
+                                                      "name": "Stack",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                            ],
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "content": Array [],
+                                        "editor": [Function],
+                                        "id": "style-panel",
+                                        "mapTo": "layoutConfig",
+                                        "name": "Layout",
+                                      },
+                                    ],
+                                  }
+                                }
+                                fullLabel="Bar"
+                                icon={[Function]}
+                                id="bar"
+                                name="bar"
+                                orientation="v"
+                                selection={
+                                  Object {
+                                    "dataLoss": "nothing",
+                                  }
+                                }
+                                seriesAxis="yaxis"
+                                title="Bar"
+                                type="bar"
+                                visConfig={
+                                  Object {
+                                    "config": Object {
+                                      "displaylogo": false,
+                                      "responsive": true,
+                                    },
+                                    "isUniColor": false,
+                                    "layout": Object {
+                                      "height": 500,
+                                      "legend": Object {
+                                        "orientation": "v",
+                                        "traceorder": "normal",
+                                      },
+                                      "margin": Object {
+                                        "b": 30,
+                                        "l": 60,
+                                        "pad": 0,
+                                        "r": 30,
+                                        "t": 50,
+                                      },
+                                      "showlegend": true,
+                                    },
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiBadge__content"
+                                >
+                                  <span
+                                    className="euiBadge__text"
+                                  >
+                                    Bar
+                                  </span>
+                                  <EuiIcon
+                                    className="euiBadge__icon"
+                                    color="inherit"
+                                    size="s"
+                                    type="visBarVerticalStacked"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </span>
+                            </EuiInnerText>
+                          </EuiBadge>
+                        </EuiComboBoxPill>
+                        <AutosizeInput
+                          aria-controls=""
+                          className="euiComboBox__input"
+                          data-test-subj="comboBoxSearchInput"
+                          injectStyles={true}
+                          inputRef={[Function]}
+                          minWidth={1}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          role="textbox"
+                          style={
+                            Object {
+                              "fontSize": 14,
+                            }
+                          }
+                          value=""
+                        >
+                          <div
+                            className="euiComboBox__input"
+                            style={
+                              Object {
+                                "display": "inline-block",
+                                "fontSize": 14,
+                              }
+                            }
+                          >
+                            <input
+                              aria-controls=""
+                              data-test-subj="comboBoxSearchInput"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              role="textbox"
+                              style={
+                                Object {
+                                  "boxSizing": "content-box",
+                                  "width": "2px",
+                                }
+                              }
+                              value=""
+                            />
+                            <div
+                              style={
+                                Object {
+                                  "height": 0,
+                                  "left": 0,
+                                  "overflow": "scroll",
+                                  "position": "absolute",
+                                  "top": 0,
+                                  "visibility": "hidden",
+                                  "whiteSpace": "pre",
+                                }
+                              }
+                            />
+                          </div>
+                        </AutosizeInput>
+                      </div>
+                      <EuiFormControlLayoutIcons
+                        clear={
+                          Object {
+                            "data-test-subj": "comboBoxClearButton",
+                            "onClick": [Function],
+                          }
+                        }
+                        compressed={false}
+                        icon={
+                          Object {
+                            "aria-label": "Open list of options",
+                            "data-test-subj": "comboBoxToggleListButton",
+                            "disabled": undefined,
+                            "onClick": [Function],
+                            "ref": [Function],
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                        >
+                          <EuiFormControlLayoutClearButton
+                            data-test-subj="comboBoxClearButton"
+                            onClick={[Function]}
+                            size="m"
+                          >
+                            <EuiI18n
+                              default="Clear input"
+                              token="euiFormControlLayoutClearButton.label"
+                            >
+                              <button
+                                aria-label="Clear input"
+                                className="euiFormControlLayoutClearButton"
+                                data-test-subj="comboBoxClearButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <EuiIcon
+                                  className="euiFormControlLayoutClearButton__icon"
+                                  type="cross"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </EuiIconEmpty>
+                                </EuiIcon>
+                              </button>
+                            </EuiI18n>
+                          </EuiFormControlLayoutClearButton>
+                          <EuiFormControlLayoutCustomIcon
+                            aria-label="Open list of options"
+                            data-test-subj="comboBoxToggleListButton"
+                            iconRef={[Function]}
+                            onClick={[Function]}
+                            size="m"
+                            type="arrowDown"
+                          >
+                            <button
+                              aria-label="Open list of options"
+                              className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                              data-test-subj="comboBoxToggleListButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="arrowDown"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </button>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiComboBoxInput>
+            </div>
+          </EuiComboBox>
+          <EuiSpacer
+            size="xs"
+          >
+            <div
+              className="euiSpacer euiSpacer--xs"
+            />
+          </EuiSpacer>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div
+          className="euiFlexItem"
+        >
+          <EuiPanel
+            paddingSize="s"
+          >
+            <div
+              className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+            >
+              <EuiTabbedContent
+                autoFocus="selected"
+                id="vis-config-tabs"
+                initialSelectedTab={
+                  Object {
+                    "content": <VizDataPanel
+                      curVisId="bar"
+                      onConfigChange={[Function]}
+                      tabProps={
+                        Object {
+                          "editor": [Function],
+                          "id": "data-panel",
+                          "mapTo": "dataConfig",
+                          "name": "Data",
+                          "sections": Array [
+                            Object {
+                              "editor": [Function],
+                              "id": "value_options",
+                              "mapTo": "valueOptions",
+                              "name": "Value options",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "isSingleSelection": false,
+                                  "mapTo": "xaxis",
+                                  "name": "X-axis",
+                                },
+                                Object {
+                                  "component": null,
+                                  "isSingleSelection": false,
+                                  "mapTo": "yaxis",
+                                  "name": "Y-axis",
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "chart_options",
+                              "mapTo": "chartOptions",
+                              "name": "Chart options",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "isSingleSelection": true,
+                                  "mapTo": "orientation",
+                                  "name": "Orientation",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "name": "Vertical",
+                                        "orientationId": "v",
+                                      },
+                                    ],
+                                    "dropdownList": Array [
+                                      Object {
+                                        "name": "Vertical",
+                                        "orientationId": "v",
+                                      },
+                                      Object {
+                                        "name": "Horizontal",
+                                        "orientationId": "h",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "isSingleSelection": true,
+                                  "mapTo": "mode",
+                                  "name": "Mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "modeId": "group",
+                                        "name": "Group",
+                                      },
+                                    ],
+                                    "dropdownList": Array [
+                                      Object {
+                                        "modeId": "group",
+                                        "name": "Group",
+                                      },
+                                      Object {
+                                        "modeId": "stack",
+                                        "name": "Stack",
+                                      },
+                                    ],
+                                  },
+                                },
+                              ],
+                            },
+                          ],
+                        }
+                      }
+                      visualizations={
+                        Object {
+                          "data": Object {
+                            "appData": Object {
+                              "fromApp": false,
+                            },
+                            "defaultAxes": Object {},
+                            "indexFields": Object {
+                              "availableFields": Array [
+                                Object {
+                                  "name": "agent",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "clientip",
+                                  "type": "ip",
+                                },
+                                Object {
+                                  "name": "event",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "extension",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "geo",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "host",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "index",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "ip",
+                                  "type": "ip",
+                                },
+                                Object {
+                                  "name": "machine",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "memory",
+                                  "type": "double",
+                                },
+                                Object {
+                                  "name": "message",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "phpmemory",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "referer",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "request",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "response",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "tags",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "timestamp",
+                                  "type": "timestamp",
+                                },
+                                Object {
+                                  "name": "url",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "utc_time",
+                                  "type": "timestamp",
+                                },
+                              ],
+                              "queriedFields": Array [
+                                Object {
+                                  "name": "double_per_ip_bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "host",
+                                  "type": "text",
+                                },
+                                Object {
+                                  "name": "ip_count",
+                                  "type": "integer",
+                                },
+                                Object {
+                                  "name": "per_ip_bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "resp_code",
+                                  "type": "text",
+                                },
+                                Object {
+                                  "name": "sum_bytes",
+                                  "type": "long",
+                                },
+                              ],
+                              "selectedFields": Array [],
+                              "unselectedFields": Array [],
+                            },
+                            "query": Object {},
+                            "rawVizData": Object {
+                              "data": Object {
+                                "count()": Array [
+                                  154,
+                                  1753,
+                                  116,
+                                  468,
+                                  1964,
+                                  219,
+                                ],
+                                "tags": Array [
+                                  "error",
+                                  "info",
+                                  "login",
+                                  "security",
+                                  "success",
+                                  "warning",
+                                ],
+                              },
+                              "jsonData": Array [
+                                Object {
+                                  "count()": 154,
+                                  "tags": "error",
+                                },
+                                Object {
+                                  "count()": 1753,
+                                  "tags": "info",
+                                },
+                                Object {
+                                  "count()": 116,
+                                  "tags": "login",
+                                },
+                                Object {
+                                  "count()": 468,
+                                  "tags": "security",
+                                },
+                                Object {
+                                  "count()": 1964,
+                                  "tags": "success",
+                                },
+                                Object {
+                                  "count()": 219,
+                                  "tags": "warning",
+                                },
+                              ],
+                              "metadata": Object {
+                                "fields": Array [
+                                  Object {
+                                    "name": "count()",
+                                    "type": "integer",
+                                  },
+                                  Object {
+                                    "name": "tags",
+                                    "type": "text",
+                                  },
+                                ],
+                                "size": 6,
+                                "status": 200,
+                              },
+                            },
+                            "userConfigs": Object {},
+                          },
+                          "vis": Object {
+                            "category": "Visualizations",
+                            "categoryAxis": "xaxis",
+                            "component": [Function],
+                            "editorConfig": Object {
+                              "panelTabs": Array [
+                                Object {
+                                  "editor": [Function],
+                                  "id": "data-panel",
+                                  "mapTo": "dataConfig",
+                                  "name": "Data",
+                                  "sections": Array [
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "value_options",
+                                      "mapTo": "valueOptions",
+                                      "name": "Value options",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": false,
+                                          "mapTo": "xaxis",
+                                          "name": "X-axis",
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": false,
+                                          "mapTo": "yaxis",
+                                          "name": "Y-axis",
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "chart_options",
+                                      "mapTo": "chartOptions",
+                                      "name": "Chart options",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": true,
+                                          "mapTo": "orientation",
+                                          "name": "Orientation",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "name": "Vertical",
+                                                "orientationId": "v",
+                                              },
+                                            ],
+                                            "dropdownList": Array [
+                                              Object {
+                                                "name": "Vertical",
+                                                "orientationId": "v",
+                                              },
+                                              Object {
+                                                "name": "Horizontal",
+                                                "orientationId": "h",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": true,
+                                          "mapTo": "mode",
+                                          "name": "Mode",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "modeId": "group",
+                                                "name": "Group",
+                                              },
+                                            ],
+                                            "dropdownList": Array [
+                                              Object {
+                                                "modeId": "group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "modeId": "stack",
+                                                "name": "Stack",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  ],
+                                },
+                                Object {
+                                  "content": Array [],
+                                  "editor": [Function],
+                                  "id": "style-panel",
+                                  "mapTo": "layoutConfig",
+                                  "name": "Layout",
+                                },
+                              ],
+                            },
+                            "fullLabel": "Bar",
+                            "icon": [Function],
+                            "iconType": "visBarVerticalStacked",
+                            "id": "bar",
+                            "label": "Bar",
+                            "name": "bar",
+                            "orientation": "v",
+                            "selection": Object {
+                              "dataLoss": "nothing",
+                            },
+                            "seriesAxis": "yaxis",
+                            "type": "bar",
+                            "visConfig": Object {
+                              "config": Object {
+                                "displaylogo": false,
+                                "responsive": true,
+                              },
+                              "isUniColor": false,
+                              "layout": Object {
+                                "height": 500,
+                                "legend": Object {
+                                  "orientation": "v",
+                                  "traceorder": "normal",
+                                },
+                                "margin": Object {
+                                  "b": 30,
+                                  "l": 60,
+                                  "pad": 0,
+                                  "r": 30,
+                                  "t": 50,
+                                },
+                                "showlegend": true,
+                              },
+                            },
+                          },
+                        }
+                      }
+                    />,
+                    "id": "data-panel",
+                    "name": "Data",
+                  }
+                }
+                tabs={
+                  Array [
+                    Object {
+                      "content": <VizDataPanel
+                        curVisId="bar"
+                        onConfigChange={[Function]}
+                        tabProps={
+                          Object {
+                            "editor": [Function],
+                            "id": "data-panel",
+                            "mapTo": "dataConfig",
+                            "name": "Data",
+                            "sections": Array [
+                              Object {
+                                "editor": [Function],
+                                "id": "value_options",
+                                "mapTo": "valueOptions",
+                                "name": "Value options",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "isSingleSelection": false,
+                                    "mapTo": "xaxis",
+                                    "name": "X-axis",
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "isSingleSelection": false,
+                                    "mapTo": "yaxis",
+                                    "name": "Y-axis",
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "chart_options",
+                                "mapTo": "chartOptions",
+                                "name": "Chart options",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "isSingleSelection": true,
+                                    "mapTo": "orientation",
+                                    "name": "Orientation",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "name": "Vertical",
+                                          "orientationId": "v",
+                                        },
+                                      ],
+                                      "dropdownList": Array [
+                                        Object {
+                                          "name": "Vertical",
+                                          "orientationId": "v",
+                                        },
+                                        Object {
+                                          "name": "Horizontal",
+                                          "orientationId": "h",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "isSingleSelection": true,
+                                    "mapTo": "mode",
+                                    "name": "Mode",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "modeId": "group",
+                                          "name": "Group",
+                                        },
+                                      ],
+                                      "dropdownList": Array [
+                                        Object {
+                                          "modeId": "group",
+                                          "name": "Group",
+                                        },
+                                        Object {
+                                          "modeId": "stack",
+                                          "name": "Stack",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                ],
+                              },
+                            ],
+                          }
+                        }
+                        visualizations={
+                          Object {
+                            "data": Object {
+                              "appData": Object {
+                                "fromApp": false,
+                              },
+                              "defaultAxes": Object {},
+                              "indexFields": Object {
+                                "availableFields": Array [
+                                  Object {
+                                    "name": "agent",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "clientip",
+                                    "type": "ip",
+                                  },
+                                  Object {
+                                    "name": "event",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "extension",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "geo",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "host",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "index",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "ip",
+                                    "type": "ip",
+                                  },
+                                  Object {
+                                    "name": "machine",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "memory",
+                                    "type": "double",
+                                  },
+                                  Object {
+                                    "name": "message",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "phpmemory",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "referer",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "request",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "response",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "tags",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "timestamp",
+                                    "type": "timestamp",
+                                  },
+                                  Object {
+                                    "name": "url",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "utc_time",
+                                    "type": "timestamp",
+                                  },
+                                ],
+                                "queriedFields": Array [
+                                  Object {
+                                    "name": "double_per_ip_bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "host",
+                                    "type": "text",
+                                  },
+                                  Object {
+                                    "name": "ip_count",
+                                    "type": "integer",
+                                  },
+                                  Object {
+                                    "name": "per_ip_bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "resp_code",
+                                    "type": "text",
+                                  },
+                                  Object {
+                                    "name": "sum_bytes",
+                                    "type": "long",
+                                  },
+                                ],
+                                "selectedFields": Array [],
+                                "unselectedFields": Array [],
+                              },
+                              "query": Object {},
+                              "rawVizData": Object {
+                                "data": Object {
+                                  "count()": Array [
+                                    154,
+                                    1753,
+                                    116,
+                                    468,
+                                    1964,
+                                    219,
+                                  ],
+                                  "tags": Array [
+                                    "error",
+                                    "info",
+                                    "login",
+                                    "security",
+                                    "success",
+                                    "warning",
+                                  ],
+                                },
+                                "jsonData": Array [
+                                  Object {
+                                    "count()": 154,
+                                    "tags": "error",
+                                  },
+                                  Object {
+                                    "count()": 1753,
+                                    "tags": "info",
+                                  },
+                                  Object {
+                                    "count()": 116,
+                                    "tags": "login",
+                                  },
+                                  Object {
+                                    "count()": 468,
+                                    "tags": "security",
+                                  },
+                                  Object {
+                                    "count()": 1964,
+                                    "tags": "success",
+                                  },
+                                  Object {
+                                    "count()": 219,
+                                    "tags": "warning",
+                                  },
+                                ],
+                                "metadata": Object {
+                                  "fields": Array [
+                                    Object {
+                                      "name": "count()",
+                                      "type": "integer",
+                                    },
+                                    Object {
+                                      "name": "tags",
+                                      "type": "text",
+                                    },
+                                  ],
+                                  "size": 6,
+                                  "status": 200,
+                                },
+                              },
+                              "userConfigs": Object {},
+                            },
+                            "vis": Object {
+                              "category": "Visualizations",
+                              "categoryAxis": "xaxis",
+                              "component": [Function],
+                              "editorConfig": Object {
+                                "panelTabs": Array [
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "data-panel",
+                                    "mapTo": "dataConfig",
+                                    "name": "Data",
+                                    "sections": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "value_options",
+                                        "mapTo": "valueOptions",
+                                        "name": "Value options",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": false,
+                                            "mapTo": "xaxis",
+                                            "name": "X-axis",
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": false,
+                                            "mapTo": "yaxis",
+                                            "name": "Y-axis",
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "chart_options",
+                                        "mapTo": "chartOptions",
+                                        "name": "Chart options",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": true,
+                                            "mapTo": "orientation",
+                                            "name": "Orientation",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "name": "Vertical",
+                                                  "orientationId": "v",
+                                                },
+                                              ],
+                                              "dropdownList": Array [
+                                                Object {
+                                                  "name": "Vertical",
+                                                  "orientationId": "v",
+                                                },
+                                                Object {
+                                                  "name": "Horizontal",
+                                                  "orientationId": "h",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "isSingleSelection": true,
+                                            "mapTo": "mode",
+                                            "name": "Mode",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "modeId": "group",
+                                                  "name": "Group",
+                                                },
+                                              ],
+                                              "dropdownList": Array [
+                                                Object {
+                                                  "modeId": "group",
+                                                  "name": "Group",
+                                                },
+                                                Object {
+                                                  "modeId": "stack",
+                                                  "name": "Stack",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                        ],
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "content": Array [],
+                                    "editor": [Function],
+                                    "id": "style-panel",
+                                    "mapTo": "layoutConfig",
+                                    "name": "Layout",
+                                  },
+                                ],
+                              },
+                              "fullLabel": "Bar",
+                              "icon": [Function],
+                              "iconType": "visBarVerticalStacked",
+                              "id": "bar",
+                              "label": "Bar",
+                              "name": "bar",
+                              "orientation": "v",
+                              "selection": Object {
+                                "dataLoss": "nothing",
+                              },
+                              "seriesAxis": "yaxis",
+                              "type": "bar",
+                              "visConfig": Object {
+                                "config": Object {
+                                  "displaylogo": false,
+                                  "responsive": true,
+                                },
+                                "isUniColor": false,
+                                "layout": Object {
+                                  "height": 500,
+                                  "legend": Object {
+                                    "orientation": "v",
+                                    "traceorder": "normal",
+                                  },
+                                  "margin": Object {
+                                    "b": 30,
+                                    "l": 60,
+                                    "pad": 0,
+                                    "r": 30,
+                                    "t": 50,
+                                  },
+                                  "showlegend": true,
+                                },
+                              },
+                            },
+                          }
+                        }
+                      />,
+                      "id": "data-panel",
+                      "name": "Data",
+                    },
+                    Object {
+                      "content": <ConfigEditor
+                        onConfigEditorChange={[Function]}
+                        setToast={[MockFunction]}
+                        spec="MOCK HJSON STRING"
+                        tabProps={
+                          Object {
+                            "content": Array [],
+                            "editor": [Function],
+                            "id": "style-panel",
+                            "mapTo": "layoutConfig",
+                            "name": "Layout",
+                          }
+                        }
+                      />,
+                      "id": "style-panel",
+                      "name": "Layout",
+                    },
+                  ]
+                }
+              >
+                <div
+                  id="vis-config-tabs"
+                >
+                  <EuiTabs
+                    onFocus={[Function]}
+                  >
+                    <div
+                      className="euiTabs"
+                      onFocus={[Function]}
+                      role="tablist"
+                    >
+                      <EuiTab
+                        aria-controls="random_html_id"
+                        id="data-panel"
+                        isSelected={true}
+                        key="data-panel"
+                        onClick={[Function]}
+                      >
+                        <button
+                          aria-controls="random_html_id"
+                          aria-selected={true}
+                          className="euiTab euiTab-isSelected"
+                          disabled={false}
+                          id="data-panel"
+                          onClick={[Function]}
+                          role="tab"
+                          type="button"
+                        >
+                          <span
+                            className="euiTab__content"
+                          >
+                            Data
+                          </span>
+                        </button>
+                      </EuiTab>
+                      <EuiTab
+                        aria-controls="random_html_id"
+                        id="style-panel"
+                        isSelected={false}
+                        key="style-panel"
+                        onClick={[Function]}
+                      >
+                        <button
+                          aria-controls="random_html_id"
+                          aria-selected={false}
+                          className="euiTab"
+                          disabled={false}
+                          id="style-panel"
+                          onClick={[Function]}
+                          role="tab"
+                          type="button"
+                        >
+                          <span
+                            className="euiTab__content"
+                          >
+                            Layout
+                          </span>
+                        </button>
+                      </EuiTab>
+                    </div>
+                  </EuiTabs>
+                  <div
+                    aria-labelledby="data-panel"
+                    id="random_html_id"
+                    role="tabpanel"
+                  >
+                    <VizDataPanel
+                      curVisId="bar"
+                      onConfigChange={[Function]}
+                      tabProps={
+                        Object {
+                          "editor": [Function],
+                          "id": "data-panel",
+                          "mapTo": "dataConfig",
+                          "name": "Data",
+                          "sections": Array [
+                            Object {
+                              "editor": [Function],
+                              "id": "value_options",
+                              "mapTo": "valueOptions",
+                              "name": "Value options",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "isSingleSelection": false,
+                                  "mapTo": "xaxis",
+                                  "name": "X-axis",
+                                },
+                                Object {
+                                  "component": null,
+                                  "isSingleSelection": false,
+                                  "mapTo": "yaxis",
+                                  "name": "Y-axis",
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "chart_options",
+                              "mapTo": "chartOptions",
+                              "name": "Chart options",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "isSingleSelection": true,
+                                  "mapTo": "orientation",
+                                  "name": "Orientation",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "name": "Vertical",
+                                        "orientationId": "v",
+                                      },
+                                    ],
+                                    "dropdownList": Array [
+                                      Object {
+                                        "name": "Vertical",
+                                        "orientationId": "v",
+                                      },
+                                      Object {
+                                        "name": "Horizontal",
+                                        "orientationId": "h",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "isSingleSelection": true,
+                                  "mapTo": "mode",
+                                  "name": "Mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "modeId": "group",
+                                        "name": "Group",
+                                      },
+                                    ],
+                                    "dropdownList": Array [
+                                      Object {
+                                        "modeId": "group",
+                                        "name": "Group",
+                                      },
+                                      Object {
+                                        "modeId": "stack",
+                                        "name": "Stack",
+                                      },
+                                    ],
+                                  },
+                                },
+                              ],
+                            },
+                          ],
+                        }
+                      }
+                      visualizations={
+                        Object {
+                          "data": Object {
+                            "appData": Object {
+                              "fromApp": false,
+                            },
+                            "defaultAxes": Object {},
+                            "indexFields": Object {
+                              "availableFields": Array [
+                                Object {
+                                  "name": "agent",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "clientip",
+                                  "type": "ip",
+                                },
+                                Object {
+                                  "name": "event",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "extension",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "geo",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "host",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "index",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "ip",
+                                  "type": "ip",
+                                },
+                                Object {
+                                  "name": "machine",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "memory",
+                                  "type": "double",
+                                },
+                                Object {
+                                  "name": "message",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "phpmemory",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "referer",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "request",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "response",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "tags",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "timestamp",
+                                  "type": "timestamp",
+                                },
+                                Object {
+                                  "name": "url",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "utc_time",
+                                  "type": "timestamp",
+                                },
+                              ],
+                              "queriedFields": Array [
+                                Object {
+                                  "name": "double_per_ip_bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "host",
+                                  "type": "text",
+                                },
+                                Object {
+                                  "name": "ip_count",
+                                  "type": "integer",
+                                },
+                                Object {
+                                  "name": "per_ip_bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "resp_code",
+                                  "type": "text",
+                                },
+                                Object {
+                                  "name": "sum_bytes",
+                                  "type": "long",
+                                },
+                              ],
+                              "selectedFields": Array [],
+                              "unselectedFields": Array [],
+                            },
+                            "query": Object {},
+                            "rawVizData": Object {
+                              "data": Object {
+                                "count()": Array [
+                                  154,
+                                  1753,
+                                  116,
+                                  468,
+                                  1964,
+                                  219,
+                                ],
+                                "tags": Array [
+                                  "error",
+                                  "info",
+                                  "login",
+                                  "security",
+                                  "success",
+                                  "warning",
+                                ],
+                              },
+                              "jsonData": Array [
+                                Object {
+                                  "count()": 154,
+                                  "tags": "error",
+                                },
+                                Object {
+                                  "count()": 1753,
+                                  "tags": "info",
+                                },
+                                Object {
+                                  "count()": 116,
+                                  "tags": "login",
+                                },
+                                Object {
+                                  "count()": 468,
+                                  "tags": "security",
+                                },
+                                Object {
+                                  "count()": 1964,
+                                  "tags": "success",
+                                },
+                                Object {
+                                  "count()": 219,
+                                  "tags": "warning",
+                                },
+                              ],
+                              "metadata": Object {
+                                "fields": Array [
+                                  Object {
+                                    "name": "count()",
+                                    "type": "integer",
+                                  },
+                                  Object {
+                                    "name": "tags",
+                                    "type": "text",
+                                  },
+                                ],
+                                "size": 6,
+                                "status": 200,
+                              },
+                            },
+                            "userConfigs": Object {},
+                          },
+                          "vis": Object {
+                            "category": "Visualizations",
+                            "categoryAxis": "xaxis",
+                            "component": [Function],
+                            "editorConfig": Object {
+                              "panelTabs": Array [
+                                Object {
+                                  "editor": [Function],
+                                  "id": "data-panel",
+                                  "mapTo": "dataConfig",
+                                  "name": "Data",
+                                  "sections": Array [
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "value_options",
+                                      "mapTo": "valueOptions",
+                                      "name": "Value options",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": false,
+                                          "mapTo": "xaxis",
+                                          "name": "X-axis",
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": false,
+                                          "mapTo": "yaxis",
+                                          "name": "Y-axis",
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "chart_options",
+                                      "mapTo": "chartOptions",
+                                      "name": "Chart options",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": true,
+                                          "mapTo": "orientation",
+                                          "name": "Orientation",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "name": "Vertical",
+                                                "orientationId": "v",
+                                              },
+                                            ],
+                                            "dropdownList": Array [
+                                              Object {
+                                                "name": "Vertical",
+                                                "orientationId": "v",
+                                              },
+                                              Object {
+                                                "name": "Horizontal",
+                                                "orientationId": "h",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": true,
+                                          "mapTo": "mode",
+                                          "name": "Mode",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "modeId": "group",
+                                                "name": "Group",
+                                              },
+                                            ],
+                                            "dropdownList": Array [
+                                              Object {
+                                                "modeId": "group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "modeId": "stack",
+                                                "name": "Stack",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                  ],
+                                },
+                                Object {
+                                  "content": Array [],
+                                  "editor": [Function],
+                                  "id": "style-panel",
+                                  "mapTo": "layoutConfig",
+                                  "name": "Layout",
+                                },
+                              ],
+                            },
+                            "fullLabel": "Bar",
+                            "icon": [Function],
+                            "iconType": "visBarVerticalStacked",
+                            "id": "bar",
+                            "label": "Bar",
+                            "name": "bar",
+                            "orientation": "v",
+                            "selection": Object {
+                              "dataLoss": "nothing",
+                            },
+                            "seriesAxis": "yaxis",
+                            "type": "bar",
+                            "visConfig": Object {
+                              "config": Object {
+                                "displaylogo": false,
+                                "responsive": true,
+                              },
+                              "isUniColor": false,
+                              "layout": Object {
+                                "height": 500,
+                                "legend": Object {
+                                  "orientation": "v",
+                                  "traceorder": "normal",
+                                },
+                                "margin": Object {
+                                  "b": 30,
+                                  "l": 60,
+                                  "pad": 0,
+                                  "r": 30,
+                                  "t": 50,
+                                },
+                                "showlegend": true,
+                              },
+                            },
+                          },
+                        }
+                      }
+                    >
+                      <div
+                        className="visEditorSidebar__config"
+                      >
+                        <EuiForm
+                          className="visEditorSidebar__form"
+                        >
+                          <div
+                            className="euiForm visEditorSidebar__form"
+                          >
+                            <EuiFormRow
+                              describedByIds={Array []}
+                              display="row"
+                              fullWidth={false}
+                              hasChildLabel={true}
+                              hasEmptyLabelSpace={false}
+                              labelType="label"
+                            >
+                              <div
+                                className="euiFormRow"
+                                id="random_html_id-row"
+                              >
+                                <div
+                                  className="euiFormRow__fieldWrapper"
+                                >
+                                  <ConfigPanelOptions
+                                    handleConfigChange={[Function]}
+                                    id="random_html_id"
+                                    onBlur={[Function]}
+                                    onFocus={[Function]}
+                                    visualizations={
+                                      Object {
+                                        "data": Object {
+                                          "appData": Object {
+                                            "fromApp": false,
+                                          },
+                                          "defaultAxes": Object {},
+                                          "indexFields": Object {
+                                            "availableFields": Array [
+                                              Object {
+                                                "name": "agent",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "clientip",
+                                                "type": "ip",
+                                              },
+                                              Object {
+                                                "name": "event",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "extension",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "geo",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "host",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "index",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "ip",
+                                                "type": "ip",
+                                              },
+                                              Object {
+                                                "name": "machine",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "memory",
+                                                "type": "double",
+                                              },
+                                              Object {
+                                                "name": "message",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "phpmemory",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "referer",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "request",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "response",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "tags",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "timestamp",
+                                                "type": "timestamp",
+                                              },
+                                              Object {
+                                                "name": "url",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "utc_time",
+                                                "type": "timestamp",
+                                              },
+                                            ],
+                                            "queriedFields": Array [
+                                              Object {
+                                                "name": "double_per_ip_bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "host",
+                                                "type": "text",
+                                              },
+                                              Object {
+                                                "name": "ip_count",
+                                                "type": "integer",
+                                              },
+                                              Object {
+                                                "name": "per_ip_bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "resp_code",
+                                                "type": "text",
+                                              },
+                                              Object {
+                                                "name": "sum_bytes",
+                                                "type": "long",
+                                              },
+                                            ],
+                                            "selectedFields": Array [],
+                                            "unselectedFields": Array [],
+                                          },
+                                          "query": Object {},
+                                          "rawVizData": Object {
+                                            "data": Object {
+                                              "count()": Array [
+                                                154,
+                                                1753,
+                                                116,
+                                                468,
+                                                1964,
+                                                219,
+                                              ],
+                                              "tags": Array [
+                                                "error",
+                                                "info",
+                                                "login",
+                                                "security",
+                                                "success",
+                                                "warning",
+                                              ],
+                                            },
+                                            "jsonData": Array [
+                                              Object {
+                                                "count()": 154,
+                                                "tags": "error",
+                                              },
+                                              Object {
+                                                "count()": 1753,
+                                                "tags": "info",
+                                              },
+                                              Object {
+                                                "count()": 116,
+                                                "tags": "login",
+                                              },
+                                              Object {
+                                                "count()": 468,
+                                                "tags": "security",
+                                              },
+                                              Object {
+                                                "count()": 1964,
+                                                "tags": "success",
+                                              },
+                                              Object {
+                                                "count()": 219,
+                                                "tags": "warning",
+                                              },
+                                            ],
+                                            "metadata": Object {
+                                              "fields": Array [
+                                                Object {
+                                                  "name": "count()",
+                                                  "type": "integer",
+                                                },
+                                                Object {
+                                                  "name": "tags",
+                                                  "type": "text",
+                                                },
+                                              ],
+                                              "size": 6,
+                                              "status": 200,
+                                            },
+                                          },
+                                          "userConfigs": Object {},
+                                        },
+                                        "vis": Object {
+                                          "category": "Visualizations",
+                                          "categoryAxis": "xaxis",
+                                          "component": [Function],
+                                          "editorConfig": Object {
+                                            "panelTabs": Array [
+                                              Object {
+                                                "editor": [Function],
+                                                "id": "data-panel",
+                                                "mapTo": "dataConfig",
+                                                "name": "Data",
+                                                "sections": Array [
+                                                  Object {
+                                                    "editor": [Function],
+                                                    "id": "value_options",
+                                                    "mapTo": "valueOptions",
+                                                    "name": "Value options",
+                                                    "schemas": Array [
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": false,
+                                                        "mapTo": "xaxis",
+                                                        "name": "X-axis",
+                                                      },
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": false,
+                                                        "mapTo": "yaxis",
+                                                        "name": "Y-axis",
+                                                      },
+                                                    ],
+                                                  },
+                                                  Object {
+                                                    "editor": [Function],
+                                                    "id": "chart_options",
+                                                    "mapTo": "chartOptions",
+                                                    "name": "Chart options",
+                                                    "schemas": Array [
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": true,
+                                                        "mapTo": "orientation",
+                                                        "name": "Orientation",
+                                                        "props": Object {
+                                                          "defaultSelections": Array [
+                                                            Object {
+                                                              "name": "Vertical",
+                                                              "orientationId": "v",
+                                                            },
+                                                          ],
+                                                          "dropdownList": Array [
+                                                            Object {
+                                                              "name": "Vertical",
+                                                              "orientationId": "v",
+                                                            },
+                                                            Object {
+                                                              "name": "Horizontal",
+                                                              "orientationId": "h",
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": true,
+                                                        "mapTo": "mode",
+                                                        "name": "Mode",
+                                                        "props": Object {
+                                                          "defaultSelections": Array [
+                                                            Object {
+                                                              "modeId": "group",
+                                                              "name": "Group",
+                                                            },
+                                                          ],
+                                                          "dropdownList": Array [
+                                                            Object {
+                                                              "modeId": "group",
+                                                              "name": "Group",
+                                                            },
+                                                            Object {
+                                                              "modeId": "stack",
+                                                              "name": "Stack",
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                    ],
+                                                  },
+                                                ],
+                                              },
+                                              Object {
+                                                "content": Array [],
+                                                "editor": [Function],
+                                                "id": "style-panel",
+                                                "mapTo": "layoutConfig",
+                                                "name": "Layout",
+                                              },
+                                            ],
+                                          },
+                                          "fullLabel": "Bar",
+                                          "icon": [Function],
+                                          "iconType": "visBarVerticalStacked",
+                                          "id": "bar",
+                                          "label": "Bar",
+                                          "name": "bar",
+                                          "orientation": "v",
+                                          "selection": Object {
+                                            "dataLoss": "nothing",
+                                          },
+                                          "seriesAxis": "yaxis",
+                                          "type": "bar",
+                                          "visConfig": Object {
+                                            "config": Object {
+                                              "displaylogo": false,
+                                              "responsive": true,
+                                            },
+                                            "isUniColor": false,
+                                            "layout": Object {
+                                              "height": 500,
+                                              "legend": Object {
+                                                "orientation": "v",
+                                                "traceorder": "normal",
+                                              },
+                                              "margin": Object {
+                                                "b": 30,
+                                                "l": 60,
+                                                "pad": 0,
+                                                "r": 30,
+                                                "t": 50,
+                                              },
+                                              "showlegend": true,
+                                            },
+                                          },
+                                        },
+                                      }
+                                    }
+                                  >
+                                    <EuiAccordion
+                                      arrowDisplay="left"
+                                      buttonContent="Panel options"
+                                      id="configPanel__panelOptions"
+                                      initialIsOpen={true}
+                                      isLoading={false}
+                                      isLoadingMessage={false}
+                                      paddingSize="s"
+                                    >
+                                      <div
+                                        className="euiAccordion euiAccordion-isOpen"
+                                      >
+                                        <div
+                                          className="euiAccordion__triggerWrapper"
+                                        >
+                                          <button
+                                            aria-controls="configPanel__panelOptions"
+                                            aria-expanded={true}
+                                            className="euiAccordion__button"
+                                            id="random_html_id"
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <span
+                                              className="euiAccordion__iconWrapper"
+                                            >
+                                              <EuiIcon
+                                                className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                                size="m"
+                                                type="arrowRight"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                            <span
+                                              className="euiIEFlexWrapFix"
+                                            >
+                                              Panel options
+                                            </span>
+                                          </button>
+                                        </div>
+                                        <div
+                                          aria-labelledby="random_html_id"
+                                          className="euiAccordion__childWrapper"
+                                          id="configPanel__panelOptions"
+                                          role="region"
+                                          tabIndex={-1}
+                                        >
+                                          <EuiResizeObserver
+                                            onResize={[Function]}
+                                          >
+                                            <div>
+                                              <div
+                                                className="euiAccordion__padding--s"
+                                              >
+                                                <EuiForm
+                                                  component="form"
+                                                >
+                                                  <form
+                                                    className="euiForm"
+                                                  >
+                                                    <EuiFormRow
+                                                      describedByIds={Array []}
+                                                      display="row"
+                                                      fullWidth={true}
+                                                      hasChildLabel={true}
+                                                      hasEmptyLabelSpace={false}
+                                                      helpText="Name your visualization."
+                                                      label="Title"
+                                                      labelType="label"
+                                                    >
+                                                      <div
+                                                        className="euiFormRow euiFormRow--fullWidth"
+                                                        id="random_html_id-row"
+                                                      >
+                                                        <div
+                                                          className="euiFormRow__labelWrapper"
+                                                        >
+                                                          <EuiFormLabel
+                                                            className="euiFormRow__label"
+                                                            htmlFor="random_html_id"
+                                                            isFocused={false}
+                                                            type="label"
+                                                          >
+                                                            <label
+                                                              className="euiFormLabel euiFormRow__label"
+                                                              htmlFor="random_html_id"
+                                                            >
+                                                              Title
+                                                            </label>
+                                                          </EuiFormLabel>
+                                                        </div>
+                                                        <div
+                                                          className="euiFormRow__fieldWrapper"
+                                                        >
+                                                          <EuiFieldText
+                                                            aria-describedby="random_html_id-help-0"
+                                                            id="random_html_id"
+                                                            name="first"
+                                                            onBlur={[Function]}
+                                                            onChange={[Function]}
+                                                            onFocus={[Function]}
+                                                            placeholder="Title"
+                                                            value=""
+                                                          >
+                                                            <EuiFormControlLayout
+                                                              fullWidth={false}
+                                                              inputId="random_html_id"
+                                                            >
+                                                              <div
+                                                                className="euiFormControlLayout"
+                                                              >
+                                                                <div
+                                                                  className="euiFormControlLayout__childrenWrapper"
+                                                                >
+                                                                  <EuiValidatableControl>
+                                                                    <input
+                                                                      aria-describedby="random_html_id-help-0"
+                                                                      className="euiFieldText"
+                                                                      id="random_html_id"
+                                                                      name="first"
+                                                                      onBlur={[Function]}
+                                                                      onChange={[Function]}
+                                                                      onFocus={[Function]}
+                                                                      placeholder="Title"
+                                                                      type="text"
+                                                                      value=""
+                                                                    />
+                                                                  </EuiValidatableControl>
+                                                                  <EuiFormControlLayoutIcons />
+                                                                </div>
+                                                              </div>
+                                                            </EuiFormControlLayout>
+                                                          </EuiFieldText>
+                                                          <EuiFormHelpText
+                                                            className="euiFormRow__text"
+                                                            id="random_html_id-help-0"
+                                                            key="Name your visualization."
+                                                          >
+                                                            <div
+                                                              className="euiFormHelpText euiFormRow__text"
+                                                              id="random_html_id-help-0"
+                                                            >
+                                                              Name your visualization.
+                                                            </div>
+                                                          </EuiFormHelpText>
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormRow>
+                                                    <EuiFormRow
+                                                      describedByIds={Array []}
+                                                      display="row"
+                                                      fullWidth={false}
+                                                      hasChildLabel={true}
+                                                      hasEmptyLabelSpace={false}
+                                                      label="Description"
+                                                      labelType="label"
+                                                    >
+                                                      <div
+                                                        className="euiFormRow"
+                                                        id="random_html_id-row"
+                                                      >
+                                                        <div
+                                                          className="euiFormRow__labelWrapper"
+                                                        >
+                                                          <EuiFormLabel
+                                                            className="euiFormRow__label"
+                                                            htmlFor="random_html_id"
+                                                            isFocused={false}
+                                                            type="label"
+                                                          >
+                                                            <label
+                                                              className="euiFormLabel euiFormRow__label"
+                                                              htmlFor="random_html_id"
+                                                            >
+                                                              Description
+                                                            </label>
+                                                          </EuiFormLabel>
+                                                        </div>
+                                                        <div
+                                                          className="euiFormRow__fieldWrapper"
+                                                        >
+                                                          <EuiTextArea
+                                                            aria-label="Use aria labels when no actual label is in use"
+                                                            id="random_html_id"
+                                                            onBlur={[Function]}
+                                                            onChange={[Function]}
+                                                            onFocus={[Function]}
+                                                            placeholder="Description"
+                                                            value=""
+                                                          >
+                                                            <EuiValidatableControl>
+                                                              <textarea
+                                                                aria-label="Use aria labels when no actual label is in use"
+                                                                className="euiTextArea euiTextArea--resizeVertical"
+                                                                id="random_html_id"
+                                                                onBlur={[Function]}
+                                                                onChange={[Function]}
+                                                                onFocus={[Function]}
+                                                                placeholder="Description"
+                                                                rows={6}
+                                                                value=""
+                                                              />
+                                                            </EuiValidatableControl>
+                                                          </EuiTextArea>
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormRow>
+                                                  </form>
+                                                </EuiForm>
+                                              </div>
+                                            </div>
+                                          </EuiResizeObserver>
+                                        </div>
+                                      </div>
+                                    </EuiAccordion>
+                                  </ConfigPanelOptions>
+                                </div>
+                              </div>
+                            </EuiFormRow>
+                            <EuiFormRow
+                              describedByIds={Array []}
+                              display="row"
+                              fullWidth={true}
+                              hasChildLabel={true}
+                              hasEmptyLabelSpace={false}
+                              labelType="label"
+                            >
+                              <div
+                                className="euiFormRow euiFormRow--fullWidth"
+                                id="random_html_id-row"
+                              >
+                                <div
+                                  className="euiFormRow__fieldWrapper"
+                                >
+                                  <ConfigValueOptions
+                                    handleConfigChange={[Function]}
+                                    id="random_html_id"
+                                    onBlur={[Function]}
+                                    onFocus={[Function]}
+                                    schemas={
+                                      Array [
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": false,
+                                          "mapTo": "xaxis",
+                                          "name": "X-axis",
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": false,
+                                          "mapTo": "yaxis",
+                                          "name": "Y-axis",
+                                        },
+                                      ]
+                                    }
+                                    sectionId="value_options"
+                                    sectionName="Value options"
+                                    visualizations={
+                                      Object {
+                                        "data": Object {
+                                          "appData": Object {
+                                            "fromApp": false,
+                                          },
+                                          "defaultAxes": Object {},
+                                          "indexFields": Object {
+                                            "availableFields": Array [
+                                              Object {
+                                                "name": "agent",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "clientip",
+                                                "type": "ip",
+                                              },
+                                              Object {
+                                                "name": "event",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "extension",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "geo",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "host",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "index",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "ip",
+                                                "type": "ip",
+                                              },
+                                              Object {
+                                                "name": "machine",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "memory",
+                                                "type": "double",
+                                              },
+                                              Object {
+                                                "name": "message",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "phpmemory",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "referer",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "request",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "response",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "tags",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "timestamp",
+                                                "type": "timestamp",
+                                              },
+                                              Object {
+                                                "name": "url",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "utc_time",
+                                                "type": "timestamp",
+                                              },
+                                            ],
+                                            "queriedFields": Array [
+                                              Object {
+                                                "name": "double_per_ip_bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "host",
+                                                "type": "text",
+                                              },
+                                              Object {
+                                                "name": "ip_count",
+                                                "type": "integer",
+                                              },
+                                              Object {
+                                                "name": "per_ip_bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "resp_code",
+                                                "type": "text",
+                                              },
+                                              Object {
+                                                "name": "sum_bytes",
+                                                "type": "long",
+                                              },
+                                            ],
+                                            "selectedFields": Array [],
+                                            "unselectedFields": Array [],
+                                          },
+                                          "query": Object {},
+                                          "rawVizData": Object {
+                                            "data": Object {
+                                              "count()": Array [
+                                                154,
+                                                1753,
+                                                116,
+                                                468,
+                                                1964,
+                                                219,
+                                              ],
+                                              "tags": Array [
+                                                "error",
+                                                "info",
+                                                "login",
+                                                "security",
+                                                "success",
+                                                "warning",
+                                              ],
+                                            },
+                                            "jsonData": Array [
+                                              Object {
+                                                "count()": 154,
+                                                "tags": "error",
+                                              },
+                                              Object {
+                                                "count()": 1753,
+                                                "tags": "info",
+                                              },
+                                              Object {
+                                                "count()": 116,
+                                                "tags": "login",
+                                              },
+                                              Object {
+                                                "count()": 468,
+                                                "tags": "security",
+                                              },
+                                              Object {
+                                                "count()": 1964,
+                                                "tags": "success",
+                                              },
+                                              Object {
+                                                "count()": 219,
+                                                "tags": "warning",
+                                              },
+                                            ],
+                                            "metadata": Object {
+                                              "fields": Array [
+                                                Object {
+                                                  "name": "count()",
+                                                  "type": "integer",
+                                                },
+                                                Object {
+                                                  "name": "tags",
+                                                  "type": "text",
+                                                },
+                                              ],
+                                              "size": 6,
+                                              "status": 200,
+                                            },
+                                          },
+                                          "userConfigs": Object {},
+                                        },
+                                        "vis": Object {
+                                          "category": "Visualizations",
+                                          "categoryAxis": "xaxis",
+                                          "component": [Function],
+                                          "editorConfig": Object {
+                                            "panelTabs": Array [
+                                              Object {
+                                                "editor": [Function],
+                                                "id": "data-panel",
+                                                "mapTo": "dataConfig",
+                                                "name": "Data",
+                                                "sections": Array [
+                                                  Object {
+                                                    "editor": [Function],
+                                                    "id": "value_options",
+                                                    "mapTo": "valueOptions",
+                                                    "name": "Value options",
+                                                    "schemas": Array [
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": false,
+                                                        "mapTo": "xaxis",
+                                                        "name": "X-axis",
+                                                      },
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": false,
+                                                        "mapTo": "yaxis",
+                                                        "name": "Y-axis",
+                                                      },
+                                                    ],
+                                                  },
+                                                  Object {
+                                                    "editor": [Function],
+                                                    "id": "chart_options",
+                                                    "mapTo": "chartOptions",
+                                                    "name": "Chart options",
+                                                    "schemas": Array [
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": true,
+                                                        "mapTo": "orientation",
+                                                        "name": "Orientation",
+                                                        "props": Object {
+                                                          "defaultSelections": Array [
+                                                            Object {
+                                                              "name": "Vertical",
+                                                              "orientationId": "v",
+                                                            },
+                                                          ],
+                                                          "dropdownList": Array [
+                                                            Object {
+                                                              "name": "Vertical",
+                                                              "orientationId": "v",
+                                                            },
+                                                            Object {
+                                                              "name": "Horizontal",
+                                                              "orientationId": "h",
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": true,
+                                                        "mapTo": "mode",
+                                                        "name": "Mode",
+                                                        "props": Object {
+                                                          "defaultSelections": Array [
+                                                            Object {
+                                                              "modeId": "group",
+                                                              "name": "Group",
+                                                            },
+                                                          ],
+                                                          "dropdownList": Array [
+                                                            Object {
+                                                              "modeId": "group",
+                                                              "name": "Group",
+                                                            },
+                                                            Object {
+                                                              "modeId": "stack",
+                                                              "name": "Stack",
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                    ],
+                                                  },
+                                                ],
+                                              },
+                                              Object {
+                                                "content": Array [],
+                                                "editor": [Function],
+                                                "id": "style-panel",
+                                                "mapTo": "layoutConfig",
+                                                "name": "Layout",
+                                              },
+                                            ],
+                                          },
+                                          "fullLabel": "Bar",
+                                          "icon": [Function],
+                                          "iconType": "visBarVerticalStacked",
+                                          "id": "bar",
+                                          "label": "Bar",
+                                          "name": "bar",
+                                          "orientation": "v",
+                                          "selection": Object {
+                                            "dataLoss": "nothing",
+                                          },
+                                          "seriesAxis": "yaxis",
+                                          "type": "bar",
+                                          "visConfig": Object {
+                                            "config": Object {
+                                              "displaylogo": false,
+                                              "responsive": true,
+                                            },
+                                            "isUniColor": false,
+                                            "layout": Object {
+                                              "height": 500,
+                                              "legend": Object {
+                                                "orientation": "v",
+                                                "traceorder": "normal",
+                                              },
+                                              "margin": Object {
+                                                "b": 30,
+                                                "l": 60,
+                                                "pad": 0,
+                                                "r": 30,
+                                                "t": 50,
+                                              },
+                                              "showlegend": true,
+                                            },
+                                          },
+                                        },
+                                      }
+                                    }
+                                    vizState={Object {}}
+                                  >
+                                    <EuiAccordion
+                                      arrowDisplay="left"
+                                      buttonContent="Value options"
+                                      id="configPanel__value_options"
+                                      initialIsOpen={true}
+                                      isLoading={false}
+                                      isLoadingMessage={false}
+                                      paddingSize="s"
+                                    >
+                                      <div
+                                        className="euiAccordion euiAccordion-isOpen"
+                                      >
+                                        <div
+                                          className="euiAccordion__triggerWrapper"
+                                        >
+                                          <button
+                                            aria-controls="configPanel__value_options"
+                                            aria-expanded={true}
+                                            className="euiAccordion__button"
+                                            id="random_html_id"
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <span
+                                              className="euiAccordion__iconWrapper"
+                                            >
+                                              <EuiIcon
+                                                className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                                size="m"
+                                                type="arrowRight"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                            <span
+                                              className="euiIEFlexWrapFix"
+                                            >
+                                              Value options
+                                            </span>
+                                          </button>
+                                        </div>
+                                        <div
+                                          aria-labelledby="random_html_id"
+                                          className="euiAccordion__childWrapper"
+                                          id="configPanel__value_options"
+                                          role="region"
+                                          tabIndex={-1}
+                                        >
+                                          <EuiResizeObserver
+                                            onResize={[Function]}
+                                          >
+                                            <div>
+                                              <div
+                                                className="euiAccordion__padding--s"
+                                              >
+                                                <PanelItem
+                                                  advancedTitle="advancedTitle"
+                                                  dropdownList={
+                                                    Array [
+                                                      Object {
+                                                        "name": "count()",
+                                                        "type": "integer",
+                                                      },
+                                                      Object {
+                                                        "name": "tags",
+                                                        "type": "text",
+                                                      },
+                                                    ]
+                                                  }
+                                                  isSingleSelection={false}
+                                                  key="viz-series-0"
+                                                  onSelectChange={[Function]}
+                                                  paddingTitle="X-axis"
+                                                  vizState={Object {}}
+                                                >
+                                                  <EuiTitle
+                                                    size="xxs"
+                                                  >
+                                                    <h3
+                                                      className="euiTitle euiTitle--xxsmall"
+                                                    >
+                                                      X-axis
+                                                    </h3>
+                                                  </EuiTitle>
+                                                  <EuiSpacer
+                                                    size="s"
+                                                  >
+                                                    <div
+                                                      className="euiSpacer euiSpacer--s"
+                                                    />
+                                                  </EuiSpacer>
+                                                  <EuiComboBox
+                                                    aria-label="Use aria labels when no actual label is in use"
+                                                    async={false}
+                                                    compressed={false}
+                                                    fullWidth={false}
+                                                    id="axis-select-6"
+                                                    isClearable={true}
+                                                    isInvalid={true}
+                                                    onChange={[Function]}
+                                                    options={
+                                                      Array [
+                                                        Object {
+                                                          "label": "count()",
+                                                          "name": "count()",
+                                                          "type": "integer",
+                                                        },
+                                                        Object {
+                                                          "label": "tags",
+                                                          "name": "tags",
+                                                          "type": "text",
+                                                        },
+                                                      ]
+                                                    }
+                                                    placeholder="Select a field"
+                                                    selectedOptions={Array []}
+                                                    singleSelection={false}
+                                                    sortMatchesBy="none"
+                                                  >
+                                                    <div
+                                                      aria-expanded={false}
+                                                      aria-haspopup="listbox"
+                                                      aria-label="Use aria labels when no actual label is in use"
+                                                      className="euiComboBox euiComboBox-isInvalid"
+                                                      onKeyDown={[Function]}
+                                                      role="combobox"
+                                                    >
+                                                      <EuiComboBoxInput
+                                                        autoSizeInputRef={[Function]}
+                                                        compressed={false}
+                                                        fullWidth={false}
+                                                        hasSelectedOptions={false}
+                                                        id="axis-select-6"
+                                                        inputRef={[Function]}
+                                                        isListOpen={false}
+                                                        noIcon={false}
+                                                        onChange={[Function]}
+                                                        onClear={[Function]}
+                                                        onClick={[Function]}
+                                                        onCloseListClick={[Function]}
+                                                        onFocus={[Function]}
+                                                        onOpenListClick={[Function]}
+                                                        onRemoveOption={[Function]}
+                                                        placeholder="Select a field"
+                                                        rootId={[Function]}
+                                                        searchValue=""
+                                                        selectedOptions={Array []}
+                                                        singleSelection={false}
+                                                        toggleButtonRef={[Function]}
+                                                        updatePosition={[Function]}
+                                                        value=""
+                                                      >
+                                                        <EuiFormControlLayout
+                                                          compressed={false}
+                                                          fullWidth={false}
+                                                          icon={
+                                                            Object {
+                                                              "aria-label": "Open list of options",
+                                                              "data-test-subj": "comboBoxToggleListButton",
+                                                              "disabled": undefined,
+                                                              "onClick": [Function],
+                                                              "ref": [Function],
+                                                              "side": "right",
+                                                              "type": "arrowDown",
+                                                            }
+                                                          }
+                                                        >
+                                                          <div
+                                                            className="euiFormControlLayout"
+                                                          >
+                                                            <div
+                                                              className="euiFormControlLayout__childrenWrapper"
+                                                            >
+                                                              <div
+                                                                className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                                                                data-test-subj="comboBoxInput"
+                                                                onClick={[Function]}
+                                                                tabIndex={-1}
+                                                              >
+                                                                <p
+                                                                  className="euiComboBoxPlaceholder"
+                                                                >
+                                                                  Select a field
+                                                                </p>
+                                                                <AutosizeInput
+                                                                  aria-controls=""
+                                                                  className="euiComboBox__input"
+                                                                  data-test-subj="comboBoxSearchInput"
+                                                                  id="axis-select-6"
+                                                                  injectStyles={true}
+                                                                  inputRef={[Function]}
+                                                                  minWidth={1}
+                                                                  onBlur={[Function]}
+                                                                  onChange={[Function]}
+                                                                  onFocus={[Function]}
+                                                                  role="textbox"
+                                                                  style={
+                                                                    Object {
+                                                                      "fontSize": 14,
+                                                                    }
+                                                                  }
+                                                                  value=""
+                                                                >
+                                                                  <div
+                                                                    className="euiComboBox__input"
+                                                                    style={
+                                                                      Object {
+                                                                        "display": "inline-block",
+                                                                        "fontSize": 14,
+                                                                      }
+                                                                    }
+                                                                  >
+                                                                    <input
+                                                                      aria-controls=""
+                                                                      data-test-subj="comboBoxSearchInput"
+                                                                      id="axis-select-6"
+                                                                      onBlur={[Function]}
+                                                                      onChange={[Function]}
+                                                                      onFocus={[Function]}
+                                                                      role="textbox"
+                                                                      style={
+                                                                        Object {
+                                                                          "boxSizing": "content-box",
+                                                                          "width": "2px",
+                                                                        }
+                                                                      }
+                                                                      value=""
+                                                                    />
+                                                                    <div
+                                                                      style={
+                                                                        Object {
+                                                                          "height": 0,
+                                                                          "left": 0,
+                                                                          "overflow": "scroll",
+                                                                          "position": "absolute",
+                                                                          "top": 0,
+                                                                          "visibility": "hidden",
+                                                                          "whiteSpace": "pre",
+                                                                        }
+                                                                      }
+                                                                    />
+                                                                  </div>
+                                                                </AutosizeInput>
+                                                              </div>
+                                                              <EuiFormControlLayoutIcons
+                                                                compressed={false}
+                                                                icon={
+                                                                  Object {
+                                                                    "aria-label": "Open list of options",
+                                                                    "data-test-subj": "comboBoxToggleListButton",
+                                                                    "disabled": undefined,
+                                                                    "onClick": [Function],
+                                                                    "ref": [Function],
+                                                                    "side": "right",
+                                                                    "type": "arrowDown",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <div
+                                                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                                                >
+                                                                  <EuiFormControlLayoutCustomIcon
+                                                                    aria-label="Open list of options"
+                                                                    data-test-subj="comboBoxToggleListButton"
+                                                                    iconRef={[Function]}
+                                                                    onClick={[Function]}
+                                                                    size="m"
+                                                                    type="arrowDown"
+                                                                  >
+                                                                    <button
+                                                                      aria-label="Open list of options"
+                                                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                                                      data-test-subj="comboBoxToggleListButton"
+                                                                      onClick={[Function]}
+                                                                      type="button"
+                                                                    >
+                                                                      <EuiIcon
+                                                                        aria-hidden="true"
+                                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                                        size="m"
+                                                                        type="arrowDown"
+                                                                      >
+                                                                        <EuiIconEmpty
+                                                                          aria-hidden={true}
+                                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                                          focusable="false"
+                                                                          role="img"
+                                                                          style={null}
+                                                                        >
+                                                                          <svg
+                                                                            aria-hidden={true}
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                                            focusable="false"
+                                                                            height={16}
+                                                                            role="img"
+                                                                            style={null}
+                                                                            viewBox="0 0 16 16"
+                                                                            width={16}
+                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                          />
+                                                                        </EuiIconEmpty>
+                                                                      </EuiIcon>
+                                                                    </button>
+                                                                  </EuiFormControlLayoutCustomIcon>
+                                                                </div>
+                                                              </EuiFormControlLayoutIcons>
+                                                            </div>
+                                                          </div>
+                                                        </EuiFormControlLayout>
+                                                      </EuiComboBoxInput>
+                                                    </div>
+                                                  </EuiComboBox>
+                                                </PanelItem>
+                                                <EuiSpacer
+                                                  size="s"
+                                                >
+                                                  <div
+                                                    className="euiSpacer euiSpacer--s"
+                                                  />
+                                                </EuiSpacer>
+                                                <PanelItem
+                                                  advancedTitle="advancedTitle"
+                                                  dropdownList={
+                                                    Array [
+                                                      Object {
+                                                        "name": "count()",
+                                                        "type": "integer",
+                                                      },
+                                                      Object {
+                                                        "name": "tags",
+                                                        "type": "text",
+                                                      },
+                                                    ]
+                                                  }
+                                                  isSingleSelection={false}
+                                                  key="viz-series-1"
+                                                  onSelectChange={[Function]}
+                                                  paddingTitle="Y-axis"
+                                                  vizState={Object {}}
+                                                >
+                                                  <EuiTitle
+                                                    size="xxs"
+                                                  >
+                                                    <h3
+                                                      className="euiTitle euiTitle--xxsmall"
+                                                    >
+                                                      Y-axis
+                                                    </h3>
+                                                  </EuiTitle>
+                                                  <EuiSpacer
+                                                    size="s"
+                                                  >
+                                                    <div
+                                                      className="euiSpacer euiSpacer--s"
+                                                    />
+                                                  </EuiSpacer>
+                                                  <EuiComboBox
+                                                    aria-label="Use aria labels when no actual label is in use"
+                                                    async={false}
+                                                    compressed={false}
+                                                    fullWidth={false}
+                                                    id="axis-select-7"
+                                                    isClearable={true}
+                                                    isInvalid={true}
+                                                    onChange={[Function]}
+                                                    options={
+                                                      Array [
+                                                        Object {
+                                                          "label": "count()",
+                                                          "name": "count()",
+                                                          "type": "integer",
+                                                        },
+                                                        Object {
+                                                          "label": "tags",
+                                                          "name": "tags",
+                                                          "type": "text",
+                                                        },
+                                                      ]
+                                                    }
+                                                    placeholder="Select a field"
+                                                    selectedOptions={Array []}
+                                                    singleSelection={false}
+                                                    sortMatchesBy="none"
+                                                  >
+                                                    <div
+                                                      aria-expanded={false}
+                                                      aria-haspopup="listbox"
+                                                      aria-label="Use aria labels when no actual label is in use"
+                                                      className="euiComboBox euiComboBox-isInvalid"
+                                                      onKeyDown={[Function]}
+                                                      role="combobox"
+                                                    >
+                                                      <EuiComboBoxInput
+                                                        autoSizeInputRef={[Function]}
+                                                        compressed={false}
+                                                        fullWidth={false}
+                                                        hasSelectedOptions={false}
+                                                        id="axis-select-7"
+                                                        inputRef={[Function]}
+                                                        isListOpen={false}
+                                                        noIcon={false}
+                                                        onChange={[Function]}
+                                                        onClear={[Function]}
+                                                        onClick={[Function]}
+                                                        onCloseListClick={[Function]}
+                                                        onFocus={[Function]}
+                                                        onOpenListClick={[Function]}
+                                                        onRemoveOption={[Function]}
+                                                        placeholder="Select a field"
+                                                        rootId={[Function]}
+                                                        searchValue=""
+                                                        selectedOptions={Array []}
+                                                        singleSelection={false}
+                                                        toggleButtonRef={[Function]}
+                                                        updatePosition={[Function]}
+                                                        value=""
+                                                      >
+                                                        <EuiFormControlLayout
+                                                          compressed={false}
+                                                          fullWidth={false}
+                                                          icon={
+                                                            Object {
+                                                              "aria-label": "Open list of options",
+                                                              "data-test-subj": "comboBoxToggleListButton",
+                                                              "disabled": undefined,
+                                                              "onClick": [Function],
+                                                              "ref": [Function],
+                                                              "side": "right",
+                                                              "type": "arrowDown",
+                                                            }
+                                                          }
+                                                        >
+                                                          <div
+                                                            className="euiFormControlLayout"
+                                                          >
+                                                            <div
+                                                              className="euiFormControlLayout__childrenWrapper"
+                                                            >
+                                                              <div
+                                                                className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                                                                data-test-subj="comboBoxInput"
+                                                                onClick={[Function]}
+                                                                tabIndex={-1}
+                                                              >
+                                                                <p
+                                                                  className="euiComboBoxPlaceholder"
+                                                                >
+                                                                  Select a field
+                                                                </p>
+                                                                <AutosizeInput
+                                                                  aria-controls=""
+                                                                  className="euiComboBox__input"
+                                                                  data-test-subj="comboBoxSearchInput"
+                                                                  id="axis-select-7"
+                                                                  injectStyles={true}
+                                                                  inputRef={[Function]}
+                                                                  minWidth={1}
+                                                                  onBlur={[Function]}
+                                                                  onChange={[Function]}
+                                                                  onFocus={[Function]}
+                                                                  role="textbox"
+                                                                  style={
+                                                                    Object {
+                                                                      "fontSize": 14,
+                                                                    }
+                                                                  }
+                                                                  value=""
+                                                                >
+                                                                  <div
+                                                                    className="euiComboBox__input"
+                                                                    style={
+                                                                      Object {
+                                                                        "display": "inline-block",
+                                                                        "fontSize": 14,
+                                                                      }
+                                                                    }
+                                                                  >
+                                                                    <input
+                                                                      aria-controls=""
+                                                                      data-test-subj="comboBoxSearchInput"
+                                                                      id="axis-select-7"
+                                                                      onBlur={[Function]}
+                                                                      onChange={[Function]}
+                                                                      onFocus={[Function]}
+                                                                      role="textbox"
+                                                                      style={
+                                                                        Object {
+                                                                          "boxSizing": "content-box",
+                                                                          "width": "2px",
+                                                                        }
+                                                                      }
+                                                                      value=""
+                                                                    />
+                                                                    <div
+                                                                      style={
+                                                                        Object {
+                                                                          "height": 0,
+                                                                          "left": 0,
+                                                                          "overflow": "scroll",
+                                                                          "position": "absolute",
+                                                                          "top": 0,
+                                                                          "visibility": "hidden",
+                                                                          "whiteSpace": "pre",
+                                                                        }
+                                                                      }
+                                                                    />
+                                                                  </div>
+                                                                </AutosizeInput>
+                                                              </div>
+                                                              <EuiFormControlLayoutIcons
+                                                                compressed={false}
+                                                                icon={
+                                                                  Object {
+                                                                    "aria-label": "Open list of options",
+                                                                    "data-test-subj": "comboBoxToggleListButton",
+                                                                    "disabled": undefined,
+                                                                    "onClick": [Function],
+                                                                    "ref": [Function],
+                                                                    "side": "right",
+                                                                    "type": "arrowDown",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <div
+                                                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                                                >
+                                                                  <EuiFormControlLayoutCustomIcon
+                                                                    aria-label="Open list of options"
+                                                                    data-test-subj="comboBoxToggleListButton"
+                                                                    iconRef={[Function]}
+                                                                    onClick={[Function]}
+                                                                    size="m"
+                                                                    type="arrowDown"
+                                                                  >
+                                                                    <button
+                                                                      aria-label="Open list of options"
+                                                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                                                      data-test-subj="comboBoxToggleListButton"
+                                                                      onClick={[Function]}
+                                                                      type="button"
+                                                                    >
+                                                                      <EuiIcon
+                                                                        aria-hidden="true"
+                                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                                        size="m"
+                                                                        type="arrowDown"
+                                                                      >
+                                                                        <EuiIconEmpty
+                                                                          aria-hidden={true}
+                                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                                          focusable="false"
+                                                                          role="img"
+                                                                          style={null}
+                                                                        >
+                                                                          <svg
+                                                                            aria-hidden={true}
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                                            focusable="false"
+                                                                            height={16}
+                                                                            role="img"
+                                                                            style={null}
+                                                                            viewBox="0 0 16 16"
+                                                                            width={16}
+                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                          />
+                                                                        </EuiIconEmpty>
+                                                                      </EuiIcon>
+                                                                    </button>
+                                                                  </EuiFormControlLayoutCustomIcon>
+                                                                </div>
+                                                              </EuiFormControlLayoutIcons>
+                                                            </div>
+                                                          </div>
+                                                        </EuiFormControlLayout>
+                                                      </EuiComboBoxInput>
+                                                    </div>
+                                                  </EuiComboBox>
+                                                </PanelItem>
+                                                <EuiSpacer
+                                                  size="s"
+                                                >
+                                                  <div
+                                                    className="euiSpacer euiSpacer--s"
+                                                  />
+                                                </EuiSpacer>
+                                              </div>
+                                            </div>
+                                          </EuiResizeObserver>
+                                        </div>
+                                      </div>
+                                    </EuiAccordion>
+                                  </ConfigValueOptions>
+                                </div>
+                              </div>
+                            </EuiFormRow>
+                            <EuiFormRow
+                              describedByIds={Array []}
+                              display="row"
+                              fullWidth={true}
+                              hasChildLabel={true}
+                              hasEmptyLabelSpace={false}
+                              labelType="label"
+                            >
+                              <div
+                                className="euiFormRow euiFormRow--fullWidth"
+                                id="random_html_id-row"
+                              >
+                                <div
+                                  className="euiFormRow__fieldWrapper"
+                                >
+                                  <ConfigValueOptions
+                                    handleConfigChange={[Function]}
+                                    id="random_html_id"
+                                    onBlur={[Function]}
+                                    onFocus={[Function]}
+                                    schemas={
+                                      Array [
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": true,
+                                          "mapTo": "orientation",
+                                          "name": "Orientation",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "name": "Vertical",
+                                                "orientationId": "v",
+                                              },
+                                            ],
+                                            "dropdownList": Array [
+                                              Object {
+                                                "name": "Vertical",
+                                                "orientationId": "v",
+                                              },
+                                              Object {
+                                                "name": "Horizontal",
+                                                "orientationId": "h",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "isSingleSelection": true,
+                                          "mapTo": "mode",
+                                          "name": "Mode",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "modeId": "group",
+                                                "name": "Group",
+                                              },
+                                            ],
+                                            "dropdownList": Array [
+                                              Object {
+                                                "modeId": "group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "modeId": "stack",
+                                                "name": "Stack",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ]
+                                    }
+                                    sectionId="chart_options"
+                                    sectionName="Chart options"
+                                    visualizations={
+                                      Object {
+                                        "data": Object {
+                                          "appData": Object {
+                                            "fromApp": false,
+                                          },
+                                          "defaultAxes": Object {},
+                                          "indexFields": Object {
+                                            "availableFields": Array [
+                                              Object {
+                                                "name": "agent",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "clientip",
+                                                "type": "ip",
+                                              },
+                                              Object {
+                                                "name": "event",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "extension",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "geo",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "host",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "index",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "ip",
+                                                "type": "ip",
+                                              },
+                                              Object {
+                                                "name": "machine",
+                                                "type": "struct",
+                                              },
+                                              Object {
+                                                "name": "memory",
+                                                "type": "double",
+                                              },
+                                              Object {
+                                                "name": "message",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "phpmemory",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "referer",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "request",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "response",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "tags",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "timestamp",
+                                                "type": "timestamp",
+                                              },
+                                              Object {
+                                                "name": "url",
+                                                "type": "string",
+                                              },
+                                              Object {
+                                                "name": "utc_time",
+                                                "type": "timestamp",
+                                              },
+                                            ],
+                                            "queriedFields": Array [
+                                              Object {
+                                                "name": "double_per_ip_bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "host",
+                                                "type": "text",
+                                              },
+                                              Object {
+                                                "name": "ip_count",
+                                                "type": "integer",
+                                              },
+                                              Object {
+                                                "name": "per_ip_bytes",
+                                                "type": "long",
+                                              },
+                                              Object {
+                                                "name": "resp_code",
+                                                "type": "text",
+                                              },
+                                              Object {
+                                                "name": "sum_bytes",
+                                                "type": "long",
+                                              },
+                                            ],
+                                            "selectedFields": Array [],
+                                            "unselectedFields": Array [],
+                                          },
+                                          "query": Object {},
+                                          "rawVizData": Object {
+                                            "data": Object {
+                                              "count()": Array [
+                                                154,
+                                                1753,
+                                                116,
+                                                468,
+                                                1964,
+                                                219,
+                                              ],
+                                              "tags": Array [
+                                                "error",
+                                                "info",
+                                                "login",
+                                                "security",
+                                                "success",
+                                                "warning",
+                                              ],
+                                            },
+                                            "jsonData": Array [
+                                              Object {
+                                                "count()": 154,
+                                                "tags": "error",
+                                              },
+                                              Object {
+                                                "count()": 1753,
+                                                "tags": "info",
+                                              },
+                                              Object {
+                                                "count()": 116,
+                                                "tags": "login",
+                                              },
+                                              Object {
+                                                "count()": 468,
+                                                "tags": "security",
+                                              },
+                                              Object {
+                                                "count()": 1964,
+                                                "tags": "success",
+                                              },
+                                              Object {
+                                                "count()": 219,
+                                                "tags": "warning",
+                                              },
+                                            ],
+                                            "metadata": Object {
+                                              "fields": Array [
+                                                Object {
+                                                  "name": "count()",
+                                                  "type": "integer",
+                                                },
+                                                Object {
+                                                  "name": "tags",
+                                                  "type": "text",
+                                                },
+                                              ],
+                                              "size": 6,
+                                              "status": 200,
+                                            },
+                                          },
+                                          "userConfigs": Object {},
+                                        },
+                                        "vis": Object {
+                                          "category": "Visualizations",
+                                          "categoryAxis": "xaxis",
+                                          "component": [Function],
+                                          "editorConfig": Object {
+                                            "panelTabs": Array [
+                                              Object {
+                                                "editor": [Function],
+                                                "id": "data-panel",
+                                                "mapTo": "dataConfig",
+                                                "name": "Data",
+                                                "sections": Array [
+                                                  Object {
+                                                    "editor": [Function],
+                                                    "id": "value_options",
+                                                    "mapTo": "valueOptions",
+                                                    "name": "Value options",
+                                                    "schemas": Array [
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": false,
+                                                        "mapTo": "xaxis",
+                                                        "name": "X-axis",
+                                                      },
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": false,
+                                                        "mapTo": "yaxis",
+                                                        "name": "Y-axis",
+                                                      },
+                                                    ],
+                                                  },
+                                                  Object {
+                                                    "editor": [Function],
+                                                    "id": "chart_options",
+                                                    "mapTo": "chartOptions",
+                                                    "name": "Chart options",
+                                                    "schemas": Array [
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": true,
+                                                        "mapTo": "orientation",
+                                                        "name": "Orientation",
+                                                        "props": Object {
+                                                          "defaultSelections": Array [
+                                                            Object {
+                                                              "name": "Vertical",
+                                                              "orientationId": "v",
+                                                            },
+                                                          ],
+                                                          "dropdownList": Array [
+                                                            Object {
+                                                              "name": "Vertical",
+                                                              "orientationId": "v",
+                                                            },
+                                                            Object {
+                                                              "name": "Horizontal",
+                                                              "orientationId": "h",
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                      Object {
+                                                        "component": null,
+                                                        "isSingleSelection": true,
+                                                        "mapTo": "mode",
+                                                        "name": "Mode",
+                                                        "props": Object {
+                                                          "defaultSelections": Array [
+                                                            Object {
+                                                              "modeId": "group",
+                                                              "name": "Group",
+                                                            },
+                                                          ],
+                                                          "dropdownList": Array [
+                                                            Object {
+                                                              "modeId": "group",
+                                                              "name": "Group",
+                                                            },
+                                                            Object {
+                                                              "modeId": "stack",
+                                                              "name": "Stack",
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                    ],
+                                                  },
+                                                ],
+                                              },
+                                              Object {
+                                                "content": Array [],
+                                                "editor": [Function],
+                                                "id": "style-panel",
+                                                "mapTo": "layoutConfig",
+                                                "name": "Layout",
+                                              },
+                                            ],
+                                          },
+                                          "fullLabel": "Bar",
+                                          "icon": [Function],
+                                          "iconType": "visBarVerticalStacked",
+                                          "id": "bar",
+                                          "label": "Bar",
+                                          "name": "bar",
+                                          "orientation": "v",
+                                          "selection": Object {
+                                            "dataLoss": "nothing",
+                                          },
+                                          "seriesAxis": "yaxis",
+                                          "type": "bar",
+                                          "visConfig": Object {
+                                            "config": Object {
+                                              "displaylogo": false,
+                                              "responsive": true,
+                                            },
+                                            "isUniColor": false,
+                                            "layout": Object {
+                                              "height": 500,
+                                              "legend": Object {
+                                                "orientation": "v",
+                                                "traceorder": "normal",
+                                              },
+                                              "margin": Object {
+                                                "b": 30,
+                                                "l": 60,
+                                                "pad": 0,
+                                                "r": 30,
+                                                "t": 50,
+                                              },
+                                              "showlegend": true,
+                                            },
+                                          },
+                                        },
+                                      }
+                                    }
+                                    vizState={Object {}}
+                                  >
+                                    <EuiAccordion
+                                      arrowDisplay="left"
+                                      buttonContent="Chart options"
+                                      id="configPanel__chart_options"
+                                      initialIsOpen={true}
+                                      isLoading={false}
+                                      isLoadingMessage={false}
+                                      paddingSize="s"
+                                    >
+                                      <div
+                                        className="euiAccordion euiAccordion-isOpen"
+                                      >
+                                        <div
+                                          className="euiAccordion__triggerWrapper"
+                                        >
+                                          <button
+                                            aria-controls="configPanel__chart_options"
+                                            aria-expanded={true}
+                                            className="euiAccordion__button"
+                                            id="random_html_id"
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <span
+                                              className="euiAccordion__iconWrapper"
+                                            >
+                                              <EuiIcon
+                                                className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                                size="m"
+                                                type="arrowRight"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                            <span
+                                              className="euiIEFlexWrapFix"
+                                            >
+                                              Chart options
+                                            </span>
+                                          </button>
+                                        </div>
+                                        <div
+                                          aria-labelledby="random_html_id"
+                                          className="euiAccordion__childWrapper"
+                                          id="configPanel__chart_options"
+                                          role="region"
+                                          tabIndex={-1}
+                                        >
+                                          <EuiResizeObserver
+                                            onResize={[Function]}
+                                          >
+                                            <div>
+                                              <div
+                                                className="euiAccordion__padding--s"
+                                              >
+                                                <PanelItem
+                                                  advancedTitle="advancedTitle"
+                                                  defaultSelections={
+                                                    Array [
+                                                      Object {
+                                                        "name": "Vertical",
+                                                        "orientationId": "v",
+                                                      },
+                                                    ]
+                                                  }
+                                                  dropdownList={
+                                                    Array [
+                                                      Object {
+                                                        "name": "Vertical",
+                                                        "orientationId": "v",
+                                                      },
+                                                      Object {
+                                                        "name": "Horizontal",
+                                                        "orientationId": "h",
+                                                      },
+                                                    ]
+                                                  }
+                                                  isSingleSelection={true}
+                                                  key="viz-series-0"
+                                                  onSelectChange={[Function]}
+                                                  paddingTitle="Orientation"
+                                                  vizState={Object {}}
+                                                >
+                                                  <EuiTitle
+                                                    size="xxs"
+                                                  >
+                                                    <h3
+                                                      className="euiTitle euiTitle--xxsmall"
+                                                    >
+                                                      Orientation
+                                                    </h3>
+                                                  </EuiTitle>
+                                                  <EuiSpacer
+                                                    size="s"
+                                                  >
+                                                    <div
+                                                      className="euiSpacer euiSpacer--s"
+                                                    />
+                                                  </EuiSpacer>
+                                                  <EuiComboBox
+                                                    aria-label="Use aria labels when no actual label is in use"
+                                                    async={false}
+                                                    compressed={false}
+                                                    fullWidth={false}
+                                                    id="axis-select-8"
+                                                    isClearable={true}
+                                                    isInvalid={true}
+                                                    onChange={[Function]}
+                                                    options={
+                                                      Array [
+                                                        Object {
+                                                          "label": "Vertical",
+                                                          "name": "Vertical",
+                                                          "orientationId": "v",
+                                                        },
+                                                        Object {
+                                                          "label": "Horizontal",
+                                                          "name": "Horizontal",
+                                                          "orientationId": "h",
+                                                        },
+                                                      ]
+                                                    }
+                                                    placeholder="Select a field"
+                                                    selectedOptions={Array []}
+                                                    singleSelection={true}
+                                                    sortMatchesBy="none"
+                                                  >
+                                                    <div
+                                                      aria-expanded={false}
+                                                      aria-haspopup="listbox"
+                                                      aria-label="Use aria labels when no actual label is in use"
+                                                      className="euiComboBox euiComboBox-isInvalid"
+                                                      onKeyDown={[Function]}
+                                                      role="combobox"
+                                                    >
+                                                      <EuiComboBoxInput
+                                                        autoSizeInputRef={[Function]}
+                                                        compressed={false}
+                                                        fullWidth={false}
+                                                        hasSelectedOptions={false}
+                                                        id="axis-select-8"
+                                                        inputRef={[Function]}
+                                                        isListOpen={false}
+                                                        noIcon={false}
+                                                        onChange={[Function]}
+                                                        onClear={[Function]}
+                                                        onClick={[Function]}
+                                                        onCloseListClick={[Function]}
+                                                        onFocus={[Function]}
+                                                        onOpenListClick={[Function]}
+                                                        onRemoveOption={[Function]}
+                                                        placeholder="Select a field"
+                                                        rootId={[Function]}
+                                                        searchValue=""
+                                                        selectedOptions={Array []}
+                                                        singleSelection={true}
+                                                        toggleButtonRef={[Function]}
+                                                        updatePosition={[Function]}
+                                                        value=""
+                                                      >
+                                                        <EuiFormControlLayout
+                                                          compressed={false}
+                                                          fullWidth={false}
+                                                          icon={
+                                                            Object {
+                                                              "aria-label": "Open list of options",
+                                                              "data-test-subj": "comboBoxToggleListButton",
+                                                              "disabled": undefined,
+                                                              "onClick": [Function],
+                                                              "ref": [Function],
+                                                              "side": "right",
+                                                              "type": "arrowDown",
+                                                            }
+                                                          }
+                                                        >
+                                                          <div
+                                                            className="euiFormControlLayout"
+                                                          >
+                                                            <div
+                                                              className="euiFormControlLayout__childrenWrapper"
+                                                            >
+                                                              <div
+                                                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                                                data-test-subj="comboBoxInput"
+                                                                onClick={[Function]}
+                                                                tabIndex={-1}
+                                                              >
+                                                                <p
+                                                                  className="euiComboBoxPlaceholder"
+                                                                >
+                                                                  Select a field
+                                                                </p>
+                                                                <AutosizeInput
+                                                                  aria-controls=""
+                                                                  className="euiComboBox__input"
+                                                                  data-test-subj="comboBoxSearchInput"
+                                                                  id="axis-select-8"
+                                                                  injectStyles={true}
+                                                                  inputRef={[Function]}
+                                                                  minWidth={1}
+                                                                  onBlur={[Function]}
+                                                                  onChange={[Function]}
+                                                                  onFocus={[Function]}
+                                                                  role="textbox"
+                                                                  style={
+                                                                    Object {
+                                                                      "fontSize": 14,
+                                                                    }
+                                                                  }
+                                                                  value=""
+                                                                >
+                                                                  <div
+                                                                    className="euiComboBox__input"
+                                                                    style={
+                                                                      Object {
+                                                                        "display": "inline-block",
+                                                                        "fontSize": 14,
+                                                                      }
+                                                                    }
+                                                                  >
+                                                                    <input
+                                                                      aria-controls=""
+                                                                      data-test-subj="comboBoxSearchInput"
+                                                                      id="axis-select-8"
+                                                                      onBlur={[Function]}
+                                                                      onChange={[Function]}
+                                                                      onFocus={[Function]}
+                                                                      role="textbox"
+                                                                      style={
+                                                                        Object {
+                                                                          "boxSizing": "content-box",
+                                                                          "width": "2px",
+                                                                        }
+                                                                      }
+                                                                      value=""
+                                                                    />
+                                                                    <div
+                                                                      style={
+                                                                        Object {
+                                                                          "height": 0,
+                                                                          "left": 0,
+                                                                          "overflow": "scroll",
+                                                                          "position": "absolute",
+                                                                          "top": 0,
+                                                                          "visibility": "hidden",
+                                                                          "whiteSpace": "pre",
+                                                                        }
+                                                                      }
+                                                                    />
+                                                                  </div>
+                                                                </AutosizeInput>
+                                                              </div>
+                                                              <EuiFormControlLayoutIcons
+                                                                compressed={false}
+                                                                icon={
+                                                                  Object {
+                                                                    "aria-label": "Open list of options",
+                                                                    "data-test-subj": "comboBoxToggleListButton",
+                                                                    "disabled": undefined,
+                                                                    "onClick": [Function],
+                                                                    "ref": [Function],
+                                                                    "side": "right",
+                                                                    "type": "arrowDown",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <div
+                                                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                                                >
+                                                                  <EuiFormControlLayoutCustomIcon
+                                                                    aria-label="Open list of options"
+                                                                    data-test-subj="comboBoxToggleListButton"
+                                                                    iconRef={[Function]}
+                                                                    onClick={[Function]}
+                                                                    size="m"
+                                                                    type="arrowDown"
+                                                                  >
+                                                                    <button
+                                                                      aria-label="Open list of options"
+                                                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                                                      data-test-subj="comboBoxToggleListButton"
+                                                                      onClick={[Function]}
+                                                                      type="button"
+                                                                    >
+                                                                      <EuiIcon
+                                                                        aria-hidden="true"
+                                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                                        size="m"
+                                                                        type="arrowDown"
+                                                                      >
+                                                                        <EuiIconEmpty
+                                                                          aria-hidden={true}
+                                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                                          focusable="false"
+                                                                          role="img"
+                                                                          style={null}
+                                                                        >
+                                                                          <svg
+                                                                            aria-hidden={true}
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                                            focusable="false"
+                                                                            height={16}
+                                                                            role="img"
+                                                                            style={null}
+                                                                            viewBox="0 0 16 16"
+                                                                            width={16}
+                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                          />
+                                                                        </EuiIconEmpty>
+                                                                      </EuiIcon>
+                                                                    </button>
+                                                                  </EuiFormControlLayoutCustomIcon>
+                                                                </div>
+                                                              </EuiFormControlLayoutIcons>
+                                                            </div>
+                                                          </div>
+                                                        </EuiFormControlLayout>
+                                                      </EuiComboBoxInput>
+                                                    </div>
+                                                  </EuiComboBox>
+                                                </PanelItem>
+                                                <EuiSpacer
+                                                  size="s"
+                                                >
+                                                  <div
+                                                    className="euiSpacer euiSpacer--s"
+                                                  />
+                                                </EuiSpacer>
+                                                <PanelItem
+                                                  advancedTitle="advancedTitle"
+                                                  defaultSelections={
+                                                    Array [
+                                                      Object {
+                                                        "modeId": "group",
+                                                        "name": "Group",
+                                                      },
+                                                    ]
+                                                  }
+                                                  dropdownList={
+                                                    Array [
+                                                      Object {
+                                                        "modeId": "group",
+                                                        "name": "Group",
+                                                      },
+                                                      Object {
+                                                        "modeId": "stack",
+                                                        "name": "Stack",
+                                                      },
+                                                    ]
+                                                  }
+                                                  isSingleSelection={true}
+                                                  key="viz-series-1"
+                                                  onSelectChange={[Function]}
+                                                  paddingTitle="Mode"
+                                                  vizState={Object {}}
+                                                >
+                                                  <EuiTitle
+                                                    size="xxs"
+                                                  >
+                                                    <h3
+                                                      className="euiTitle euiTitle--xxsmall"
+                                                    >
+                                                      Mode
+                                                    </h3>
+                                                  </EuiTitle>
+                                                  <EuiSpacer
+                                                    size="s"
+                                                  >
+                                                    <div
+                                                      className="euiSpacer euiSpacer--s"
+                                                    />
+                                                  </EuiSpacer>
+                                                  <EuiComboBox
+                                                    aria-label="Use aria labels when no actual label is in use"
+                                                    async={false}
+                                                    compressed={false}
+                                                    fullWidth={false}
+                                                    id="axis-select-9"
+                                                    isClearable={true}
+                                                    isInvalid={true}
+                                                    onChange={[Function]}
+                                                    options={
+                                                      Array [
+                                                        Object {
+                                                          "label": "Group",
+                                                          "modeId": "group",
+                                                          "name": "Group",
+                                                        },
+                                                        Object {
+                                                          "label": "Stack",
+                                                          "modeId": "stack",
+                                                          "name": "Stack",
+                                                        },
+                                                      ]
+                                                    }
+                                                    placeholder="Select a field"
+                                                    selectedOptions={Array []}
+                                                    singleSelection={true}
+                                                    sortMatchesBy="none"
+                                                  >
+                                                    <div
+                                                      aria-expanded={false}
+                                                      aria-haspopup="listbox"
+                                                      aria-label="Use aria labels when no actual label is in use"
+                                                      className="euiComboBox euiComboBox-isInvalid"
+                                                      onKeyDown={[Function]}
+                                                      role="combobox"
+                                                    >
+                                                      <EuiComboBoxInput
+                                                        autoSizeInputRef={[Function]}
+                                                        compressed={false}
+                                                        fullWidth={false}
+                                                        hasSelectedOptions={false}
+                                                        id="axis-select-9"
+                                                        inputRef={[Function]}
+                                                        isListOpen={false}
+                                                        noIcon={false}
+                                                        onChange={[Function]}
+                                                        onClear={[Function]}
+                                                        onClick={[Function]}
+                                                        onCloseListClick={[Function]}
+                                                        onFocus={[Function]}
+                                                        onOpenListClick={[Function]}
+                                                        onRemoveOption={[Function]}
+                                                        placeholder="Select a field"
+                                                        rootId={[Function]}
+                                                        searchValue=""
+                                                        selectedOptions={Array []}
+                                                        singleSelection={true}
+                                                        toggleButtonRef={[Function]}
+                                                        updatePosition={[Function]}
+                                                        value=""
+                                                      >
+                                                        <EuiFormControlLayout
+                                                          compressed={false}
+                                                          fullWidth={false}
+                                                          icon={
+                                                            Object {
+                                                              "aria-label": "Open list of options",
+                                                              "data-test-subj": "comboBoxToggleListButton",
+                                                              "disabled": undefined,
+                                                              "onClick": [Function],
+                                                              "ref": [Function],
+                                                              "side": "right",
+                                                              "type": "arrowDown",
+                                                            }
+                                                          }
+                                                        >
+                                                          <div
+                                                            className="euiFormControlLayout"
+                                                          >
+                                                            <div
+                                                              className="euiFormControlLayout__childrenWrapper"
+                                                            >
+                                                              <div
+                                                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                                                data-test-subj="comboBoxInput"
+                                                                onClick={[Function]}
+                                                                tabIndex={-1}
+                                                              >
+                                                                <p
+                                                                  className="euiComboBoxPlaceholder"
+                                                                >
+                                                                  Select a field
+                                                                </p>
+                                                                <AutosizeInput
+                                                                  aria-controls=""
+                                                                  className="euiComboBox__input"
+                                                                  data-test-subj="comboBoxSearchInput"
+                                                                  id="axis-select-9"
+                                                                  injectStyles={true}
+                                                                  inputRef={[Function]}
+                                                                  minWidth={1}
+                                                                  onBlur={[Function]}
+                                                                  onChange={[Function]}
+                                                                  onFocus={[Function]}
+                                                                  role="textbox"
+                                                                  style={
+                                                                    Object {
+                                                                      "fontSize": 14,
+                                                                    }
+                                                                  }
+                                                                  value=""
+                                                                >
+                                                                  <div
+                                                                    className="euiComboBox__input"
+                                                                    style={
+                                                                      Object {
+                                                                        "display": "inline-block",
+                                                                        "fontSize": 14,
+                                                                      }
+                                                                    }
+                                                                  >
+                                                                    <input
+                                                                      aria-controls=""
+                                                                      data-test-subj="comboBoxSearchInput"
+                                                                      id="axis-select-9"
+                                                                      onBlur={[Function]}
+                                                                      onChange={[Function]}
+                                                                      onFocus={[Function]}
+                                                                      role="textbox"
+                                                                      style={
+                                                                        Object {
+                                                                          "boxSizing": "content-box",
+                                                                          "width": "2px",
+                                                                        }
+                                                                      }
+                                                                      value=""
+                                                                    />
+                                                                    <div
+                                                                      style={
+                                                                        Object {
+                                                                          "height": 0,
+                                                                          "left": 0,
+                                                                          "overflow": "scroll",
+                                                                          "position": "absolute",
+                                                                          "top": 0,
+                                                                          "visibility": "hidden",
+                                                                          "whiteSpace": "pre",
+                                                                        }
+                                                                      }
+                                                                    />
+                                                                  </div>
+                                                                </AutosizeInput>
+                                                              </div>
+                                                              <EuiFormControlLayoutIcons
+                                                                compressed={false}
+                                                                icon={
+                                                                  Object {
+                                                                    "aria-label": "Open list of options",
+                                                                    "data-test-subj": "comboBoxToggleListButton",
+                                                                    "disabled": undefined,
+                                                                    "onClick": [Function],
+                                                                    "ref": [Function],
+                                                                    "side": "right",
+                                                                    "type": "arrowDown",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <div
+                                                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                                                >
+                                                                  <EuiFormControlLayoutCustomIcon
+                                                                    aria-label="Open list of options"
+                                                                    data-test-subj="comboBoxToggleListButton"
+                                                                    iconRef={[Function]}
+                                                                    onClick={[Function]}
+                                                                    size="m"
+                                                                    type="arrowDown"
+                                                                  >
+                                                                    <button
+                                                                      aria-label="Open list of options"
+                                                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                                                      data-test-subj="comboBoxToggleListButton"
+                                                                      onClick={[Function]}
+                                                                      type="button"
+                                                                    >
+                                                                      <EuiIcon
+                                                                        aria-hidden="true"
+                                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                                        size="m"
+                                                                        type="arrowDown"
+                                                                      >
+                                                                        <EuiIconEmpty
+                                                                          aria-hidden={true}
+                                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                                          focusable="false"
+                                                                          role="img"
+                                                                          style={null}
+                                                                        >
+                                                                          <svg
+                                                                            aria-hidden={true}
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                                            focusable="false"
+                                                                            height={16}
+                                                                            role="img"
+                                                                            style={null}
+                                                                            viewBox="0 0 16 16"
+                                                                            width={16}
+                                                                            xmlns="http://www.w3.org/2000/svg"
+                                                                          />
+                                                                        </EuiIconEmpty>
+                                                                      </EuiIcon>
+                                                                    </button>
+                                                                  </EuiFormControlLayoutCustomIcon>
+                                                                </div>
+                                                              </EuiFormControlLayoutIcons>
+                                                            </div>
+                                                          </div>
+                                                        </EuiFormControlLayout>
+                                                      </EuiComboBoxInput>
+                                                    </div>
+                                                  </EuiComboBox>
+                                                </PanelItem>
+                                                <EuiSpacer
+                                                  size="s"
+                                                >
+                                                  <div
+                                                    className="euiSpacer euiSpacer--s"
+                                                  />
+                                                </EuiSpacer>
+                                              </div>
+                                            </div>
+                                          </EuiResizeObserver>
+                                        </div>
+                                      </div>
+                                    </EuiAccordion>
+                                  </ConfigValueOptions>
+                                </div>
+                              </div>
+                            </EuiFormRow>
+                          </div>
+                        </EuiForm>
+                      </div>
+                    </VizDataPanel>
+                  </div>
+                </div>
+              </EuiTabbedContent>
+            </div>
+          </EuiPanel>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <DefaultEditorControls
+            isDirty={true}
+            isInvalid={false}
+            onConfigDiscard={[Function]}
+            onConfigUpdate={[Function]}
+          >
+            <div
+              className="visEditorSidebar__controls"
+            >
+              <EuiFlexGroup
+                gutterSize="none"
+                justifyContent="spaceBetween"
+                responsive={false}
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                >
+                  <EuiFlexItem
+                    grow={false}
+                  >
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                    >
+                      <EuiButtonEmpty
+                        data-test-subj="visualizeEditorResetButton"
+                        disabled={false}
+                        iconType="cross"
+                        onClick={[Function]}
+                        size="s"
+                      >
+                        <button
+                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+                          data-test-subj="visualizeEditorResetButton"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          <EuiButtonContent
+                            className="euiButtonEmpty__content"
+                            iconSide="left"
+                            iconSize="m"
+                            iconType="cross"
+                            textProps={
+                              Object {
+                                "className": "euiButtonEmpty__text",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonEmpty__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="cross"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                              <span
+                                className="euiButtonEmpty__text"
+                              >
+                                Reset
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonEmpty>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem
+                    grow={false}
+                  >
+                    <div
+                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                    >
+                      <EuiButton
+                        data-test-subj="visualizeEditorRenderButton"
+                        disabled={false}
+                        fill={true}
+                        iconType="play"
+                        onClick={[Function]}
+                        size="s"
+                      >
+                        <EuiButtonDisplay
+                          baseClassName="euiButton"
+                          data-test-subj="visualizeEditorRenderButton"
+                          disabled={false}
+                          element="button"
+                          fill={true}
+                          iconType="play"
+                          isDisabled={false}
+                          onClick={[Function]}
+                          size="s"
+                          type="button"
+                        >
+                          <button
+                            className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                            data-test-subj="visualizeEditorRenderButton"
+                            disabled={false}
+                            onClick={[Function]}
+                            style={
+                              Object {
+                                "minWidth": undefined,
+                              }
+                            }
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButton__content"
+                              iconSide="left"
+                              iconType="play"
+                              textProps={
+                                Object {
+                                  "className": "euiButton__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButton__content"
+                              >
+                                <EuiIcon
+                                  className="euiButtonContent__icon"
+                                  color="inherit"
+                                  size="m"
+                                  type="play"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </EuiIconEmpty>
+                                </EuiIcon>
+                                <span
+                                  className="euiButton__text"
+                                >
+                                  Apply
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonDisplay>
+                      </EuiButton>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </div>
+          </DefaultEditorControls>
+        </div>
+      </EuiFlexItem>
+    </div>
+  </EuiFlexGroup>
+</ConfigPanel>
+`;
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx
new file mode 100644
index 000000000..17744487d
--- /dev/null
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { ConfigPanel } from '../config_panel';
+import {
+  TEST_VISUALIZATIONS_DATA,
+  EXPLORER_VISUALIZATIONS
+} from '../../../../../../../test/event_analytics_constants';
+import { TabContext } from '../../../../hooks';
+import PPLService from '../../../../../../services/requests/ppl';
+import httpClientMock from '../../../../../../../test/__mocks__/httpClientMock';
+
+jest.mock('!!raw-loader!./default.layout.spec.hjson', () => 'MOCK HJSON STRING');
+
+describe('Config panel component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders config panel with visualization data', async () => {
+    const setCurVisId = jest.fn();
+    const tabId = 'query-panel-1';
+    const curVisId = 'bar';
+    const pplService = new PPLService(httpClientMock);
+    
+    const wrapper = mount(
+      <TabContext.Provider
+        value={{
+          tabId,
+          curVisId,
+          dispatch: jest.fn(),
+          changeVisualizationConfig: jest.fn(),
+          explorerVisualizations: EXPLORER_VISUALIZATIONS,
+          setToast: jest.fn(),
+          pplService: pplService,
+        }}
+      >
+        <ConfigPanel visualizations={TEST_VISUALIZATIONS_DATA} setCurVisId={setCurVisId} />
+      </TabContext.Provider>
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.scss
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
similarity index 91%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
index 83a9012f0..f2eea5902 100644
--- a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
@@ -17,13 +17,14 @@ import {
   EuiComboBox,
   EuiPanel,
   EuiIcon,
+  EuiComboBoxOptionOption
 } from '@elastic/eui';
-import { reset as resetVisualizationConfig } from '../../slices/viualization_config_slice';
+import { reset as resetVisualizationConfig } from '../../../redux/slices/viualization_config_slice';
 import { getDefaultSpec } from '../visualization_specs/default_spec';
-import { TabContext } from '../../hooks';
-import { DefaultEditorControls } from './DefaultEditorControls';
-import { getVisType } from '../../../visualizations/charts/vis_types';
-import { ENABLED_VIS_TYPES } from '../../../../../common/constants/shared';
+import { TabContext } from '../../../hooks';
+import { DefaultEditorControls } from './config_panel_footer';
+import { getVisType } from '../../../../visualizations/charts/vis_types';
+import { ENABLED_VIS_TYPES } from '../../../../../../common/constants/shared';
 
 const CONFIG_LAYOUT_TEMPLATE = `
 {
@@ -152,12 +153,12 @@ export const ConfigPanel = ({ visualizations, setCurVisId }: any) => {
     });
   }, []);
 
-  const vizSelectableItemRenderer = (option) => {
-    const { iconType, label } = option;
+  const vizSelectableItemRenderer = (option: EuiComboBoxOptionOption<any>) => {
+    const { iconType = 'empty', label = '' } = option;
 
     return (
       <div className="configPanel__vizSelector-item">
-        <EuiIcon className="lnsChartSwitch__chartIcon" type={iconType || 'empty'} size="m" />
+        <EuiIcon className="lnsChartSwitch__chartIcon" type={iconType} size="m" />
         &nbsp;&nbsp;
         <span>{label}</span>
       </div>
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/DefaultEditorControls.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
similarity index 98%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/DefaultEditorControls.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
index 4520102d2..44ad5584d 100644
--- a/dashboards-observability/public/components/explorer/visualizations/config_panel/DefaultEditorControls.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
@@ -9,7 +9,6 @@ import {
   EuiFlexItem,
   EuiButton,
   EuiButtonEmpty,
-  EuiButtonToggle,
   EuiToolTip,
 } from '@elastic/eui';
 
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_chart_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
similarity index 96%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_chart_options.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
index db74dc66f..2f946ccb2 100644
--- a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_chart_options.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
@@ -5,7 +5,7 @@
 
 import React, { useMemo, useCallback } from 'react';
 import { EuiAccordion, EuiSpacer } from '@elastic/eui';
-import { PanelItem } from '../../configPanelItem';
+import { PanelItem } from './config_panel_item';
 
 export const ConfigChartOptions = ({
   visualizations,
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_data_links.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_data_links.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_data_links.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_data_links.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_gauge_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx
similarity index 92%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_gauge_options.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx
index 6bfca43dd..fdb4b824b 100644
--- a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_gauge_options.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx
@@ -4,10 +4,10 @@
  */
 
 import React, { useMemo, useCallback } from 'react';
-import { indexOf, toString } from 'lodash';
+import { indexOf } from 'lodash';
 import { EuiAccordion, EuiSpacer } from '@elastic/eui';
-import { PanelItem } from '../../configPanelItem';
-import { NUMERICAL_FIELDS } from '../../../../../../../common/constants/shared';
+import { PanelItem } from './config_panel_item';
+import { NUMERICAL_FIELDS } from '../../../../../../../../common/constants/shared';
 
 export const ConfigGaugeValueOptions = ({
   visualizations,
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/configPanelItem.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/configPanelItem.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_panel_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_panel_options.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_text.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_text.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_thresholds.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
similarity index 98%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_thresholds.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
index 6f07807e1..7033e0080 100644
--- a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_thresholds.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
@@ -19,7 +19,7 @@ import {
   htmlIdGenerator,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
-import { PPL_SPAN_REGEX } from '../../../../../../../common/constants/shared';
+import { PPL_SPAN_REGEX } from '../../../../../../../../common/constants/shared';
 
 export const ConfigThresholds = ({
   visualizations,
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_value_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
similarity index 97%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_value_options.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
index f7ff2e609..7f0c75de5 100644
--- a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_value_options.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
@@ -5,7 +5,7 @@
 
 import React, { useMemo, useCallback } from 'react';
 import { EuiAccordion, EuiSpacer } from '@elastic/eui';
-import { PanelItem } from '../../configPanelItem';
+import { PanelItem } from './config_panel_item';
 
 export const ConfigValueOptions = ({
   visualizations,
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_visualization_selector.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_visualization_selector.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_visualization_selector.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_visualization_selector.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/default_vis_editor.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/default_vis_editor.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_editor.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/json_editor.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_editor.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/json_editor.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/config_panel/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/index.ts
diff --git a/dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx
similarity index 91%
rename from dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx
index 9ae80ea7c..9176ed34d 100644
--- a/dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx
@@ -8,7 +8,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { CountDistribution } from '../count_distribution';
-import { SAMPLE_VISUALIZATIONS } from '../../../../../../test/event_analytics_constants';
+import { SAMPLE_VISUALIZATIONS } from '../../../../../../../test/event_analytics_constants';
 
 describe('Count distribution component', () => {
   configure({ adapter: new Adapter() });
diff --git a/dashboards-observability/public/components/explorer/visualizations/count_distribution/count_distribution.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
similarity index 86%
rename from dashboards-observability/public/components/explorer/visualizations/count_distribution/count_distribution.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
index 683873b5f..ec496a77f 100644
--- a/dashboards-observability/public/components/explorer/visualizations/count_distribution/count_distribution.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import { LONG_CHART_COLOR } from '../../../../../common/constants/shared';
-import { Plt } from '../../../visualizations/plotly/plot';
+import { LONG_CHART_COLOR } from '../../../../../../common/constants/shared';
+import { Plt } from '../../../../visualizations/plotly/plot';
 
 export const CountDistribution = ({ countDistribution }: any) => {
   if (
diff --git a/dashboards-observability/public/components/explorer/visualizations/count_distribution/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/count_distribution/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/count_distribution/index.ts
diff --git a/dashboards-observability/public/components/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx
similarity index 95%
rename from dashboards-observability/public/components/explorer/visualizations/index.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx
index 4042aab30..342a3c1ef 100644
--- a/dashboards-observability/public/components/explorer/visualizations/index.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -9,8 +9,8 @@ import _ from 'lodash';
 
 import React from 'react';
 import { EuiResizableContainer } from '@elastic/eui';
-import { SELECTED_TIMESTAMP } from '../../../../common/constants/explorer';
-import { IField, IQuery, IVisualizationContainerProps } from '../../../../common/types/explorer';
+import { SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer';
+import { IField, IQuery, IVisualizationContainerProps } from '../../../../../common/types/explorer';
 import { WorkspacePanel } from './workspace_panel';
 import { ConfigPanel } from './config_panel';
 import { Sidebar } from '../sidebar';
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx
similarity index 92%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx
index 89fd64289..f7ba12836 100644
--- a/dashboards-observability/public/components/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx
@@ -8,7 +8,7 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { EmptyPlaceholder } from '../empty_placeholder';
-import { LensIconChartBar } from '../../../../visualizations/assets/chart_bar';
+import { LensIconChartBar } from '../../../../../visualizations/assets/chart_bar';
 import { ToolbarButton } from '../toolbar_button';
 
 describe('Shared components', () => {
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/index.ts
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/index.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/index.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/index.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor.scss
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor.scss
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis.scss
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis.scss
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/toolbar_button.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/toolbar_button.scss
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.scss
diff --git a/dashboards-observability/public/components/explorer/visualizations/shared_components/toolbar_button.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/shared_components/toolbar_button.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx
diff --git a/dashboards-observability/public/components/explorer/visualizations/visualization_specs/default.data.spec.hjson b/dashboards-observability/public/components/event_analytics/explorer/visualizations/visualization_specs/default.data.spec.hjson
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/visualization_specs/default.data.spec.hjson
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/visualization_specs/default.data.spec.hjson
diff --git a/dashboards-observability/public/components/explorer/visualizations/visualization_specs/default.layout.spec.hjson b/dashboards-observability/public/components/event_analytics/explorer/visualizations/visualization_specs/default.layout.spec.hjson
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/visualization_specs/default.layout.spec.hjson
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/visualization_specs/default.layout.spec.hjson
diff --git a/dashboards-observability/public/components/explorer/visualizations/visualization_specs/default_spec.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/visualization_specs/default_spec.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/visualization_specs/default_spec.ts
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/visualization_specs/default_spec.ts
diff --git a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/workspace_panel/index.ts
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/index.ts
diff --git a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.scss
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
diff --git a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
similarity index 90%
rename from dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.tsx
rename to dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
index 525083525..aaf9a4542 100644
--- a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/workspace_panel.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
@@ -8,9 +8,9 @@ import './workspace_panel.scss';
 import React, { useState, useMemo } from 'react';
 import { isEmpty } from 'lodash';
 import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiSwitch, EuiSpacer } from '@elastic/eui';
-import { Visualization } from '../../../visualizations/visualization';
-import { DataTable } from '../../../visualizations/charts/data_table/data_table';
-import { uiSettingsService } from '../../../../../common/utils';
+import { Visualization } from '../../../../visualizations/visualization';
+import { DataTable } from '../../../../visualizations/charts/data_table/data_table';
+import { uiSettingsService } from '../../../../../../common/utils';
 
 interface IWorkSpacePanel {
   curVisId: string;
diff --git a/dashboards-observability/public/components/explorer/home_table/__tests__/__snapshots__/saved_query_table.test.tsx.snap b/dashboards-observability/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
similarity index 100%
rename from dashboards-observability/public/components/explorer/home_table/__tests__/__snapshots__/saved_query_table.test.tsx.snap
rename to dashboards-observability/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
diff --git a/dashboards-observability/public/components/explorer/home_table/__tests__/saved_query_table.test.tsx b/dashboards-observability/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx
similarity index 94%
rename from dashboards-observability/public/components/explorer/home_table/__tests__/saved_query_table.test.tsx
rename to dashboards-observability/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx
index c8e4eee8b..e76121016 100644
--- a/dashboards-observability/public/components/explorer/home_table/__tests__/saved_query_table.test.tsx
+++ b/dashboards-observability/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx
@@ -7,7 +7,7 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { SavedQueryTable } from '../saved_query_table';
+import { SavedQueryTable } from '../saved_objects_table';
 import { SAVED_HISTORIES } from '../../../../../test/event_analytics_constants';
 
 describe('Saved query table component', () => {
diff --git a/dashboards-observability/public/components/explorer/home.scss b/dashboards-observability/public/components/event_analytics/home/home.scss
similarity index 100%
rename from dashboards-observability/public/components/explorer/home.scss
rename to dashboards-observability/public/components/event_analytics/home/home.scss
diff --git a/dashboards-observability/public/components/explorer/home.tsx b/dashboards-observability/public/components/event_analytics/home/home.tsx
similarity index 92%
rename from dashboards-observability/public/components/explorer/home.tsx
rename to dashboards-observability/public/components/event_analytics/home/home.tsx
index a07e7a0bb..5490d5b54 100644
--- a/dashboards-observability/public/components/explorer/home.tsx
+++ b/dashboards-observability/public/components/event_analytics/home/home.tsx
@@ -30,7 +30,7 @@ import {
   EuiText,
   EuiHorizontalRule,
 } from '@elastic/eui';
-import { Search } from '../common/search/search';
+import { Search } from '../../common/search/search';
 import {
   RAW_QUERY,
   TAB_ID_TXT_PFX,
@@ -39,26 +39,26 @@ import {
   TAB_CREATED_TYPE,
   NEW_TAB,
   REDIRECT_TAB,
-} from '../../../common/constants/explorer';
+} from '../../../../common/constants/explorer';
 import {
   OBSERVABILITY_BASE,
   EVENT_ANALYTICS,
   SAVED_OBJECTS,
-} from '../../../common/constants/shared';
-import { EmptyTabParams, SavedQueryRes, SavedVizRes } from '../../../common/types/explorer';
-import { HttpStart } from '../../../../../src/core/public';
-import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
-import { addTab, selectQueryTabs } from './slices/query_tab_slice';
-import { init as initFields } from './slices/field_slice';
-import { init as initQuery, changeQuery } from './slices/query_slice';
-import { init as initQueryResult, selectQueryResult } from './slices/query_result_slice';
-import { SavedQueryTable } from './home_table/saved_query_table';
-import { selectQueries } from './slices/query_slice';
-import { setSelectedQueryTab } from './slices/query_tab_slice';
-import { DeletePanelModal } from '../custom_panels/helpers/modal_containers';
-import { CUSTOM_PANELS_API_PREFIX } from '../../../common/constants/custom_panels';
-import { getSampleDataModal } from '../common/helpers/add_sample_modal';
-import { parseGetSuggestions, onItemSelect } from '../common/search/autocomplete_logic';
+} from '../../../../common/constants/shared';
+import { EmptyTabParams, SavedQueryRes, SavedVizRes } from '../../../../common/types/explorer';
+import { HttpStart } from '../../../../../../src/core/public';
+import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
+import { addTab, selectQueryTabs } from '../redux/slices/query_tab_slice';
+import { init as initFields } from '../redux/slices/field_slice';
+import { init as initQuery, changeQuery } from '../redux/slices/query_slice';
+import { init as initQueryResult, selectQueryResult } from '../redux/slices/query_result_slice';
+import { SavedQueryTable } from './saved_objects_table';
+import { selectQueries } from '../redux/slices/query_slice';
+import { setSelectedQueryTab } from '../redux/slices/query_tab_slice';
+import { DeletePanelModal } from '../../custom_panels/helpers/modal_containers';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
+import { getSampleDataModal } from '../../common/helpers/add_sample_modal';
+import { parseGetSuggestions, onItemSelect } from '../../common/search/autocomplete_logic';
 
 interface IHomeProps {
   pplService: any;
diff --git a/dashboards-observability/public/components/explorer/home_table/saved_query_table.tsx b/dashboards-observability/public/components/event_analytics/home/saved_objects_table.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/home_table/saved_query_table.tsx
rename to dashboards-observability/public/components/event_analytics/home/saved_objects_table.tsx
diff --git a/dashboards-observability/public/components/explorer/hooks/index.ts b/dashboards-observability/public/components/event_analytics/hooks/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/hooks/index.ts
rename to dashboards-observability/public/components/event_analytics/hooks/index.ts
diff --git a/dashboards-observability/public/components/explorer/hooks/use_fetch_events.ts b/dashboards-observability/public/components/event_analytics/hooks/use_fetch_events.ts
similarity index 94%
rename from dashboards-observability/public/components/explorer/hooks/use_fetch_events.ts
rename to dashboards-observability/public/components/event_analytics/hooks/use_fetch_events.ts
index 8abd87c99..dba08fd2c 100644
--- a/dashboards-observability/public/components/explorer/hooks/use_fetch_events.ts
+++ b/dashboards-observability/public/components/event_analytics/hooks/use_fetch_events.ts
@@ -15,10 +15,10 @@ import {
   AVAILABLE_FIELDS,
   QUERIED_FIELDS,
 } from '../../../../common/constants/explorer';
-import { fetchSuccess, reset as queryResultReset } from '../slices/query_result_slice';
-import { selectQueries } from '../slices/query_slice';
-import { reset as visualizationReset } from '../slices/visualization_slice';
-import { updateFields, sortFields, selectFields } from '../slices/field_slice';
+import { fetchSuccess, reset as queryResultReset } from '../redux/slices/query_result_slice';
+import { selectQueries } from '../redux/slices/query_slice';
+import { reset as visualizationReset } from '../redux/slices/visualization_slice';
+import { updateFields, sortFields, selectFields } from '../redux/slices/field_slice';
 import PPLService from '../../../services/requests/ppl';
 
 interface IFetchEventsParams {
diff --git a/dashboards-observability/public/components/explorer/hooks/use_fetch_visualizations.ts b/dashboards-observability/public/components/event_analytics/hooks/use_fetch_visualizations.ts
similarity index 88%
rename from dashboards-observability/public/components/explorer/hooks/use_fetch_visualizations.ts
rename to dashboards-observability/public/components/event_analytics/hooks/use_fetch_visualizations.ts
index c60492c8c..866921201 100644
--- a/dashboards-observability/public/components/explorer/hooks/use_fetch_visualizations.ts
+++ b/dashboards-observability/public/components/event_analytics/hooks/use_fetch_visualizations.ts
@@ -12,12 +12,12 @@ import {
   SELECTED_FIELDS,
   SELECTED_TIMESTAMP,
 } from '../../../../common/constants/explorer';
-import { render as renderCountDis } from '../slices/count_distribution_slice';
-import { selectQueries } from '../slices/query_slice';
-import { render as renderExplorerVis } from '../slices/visualization_slice';
-import { updateFields, sortFields } from '../slices/field_slice';
+import { render as renderCountDis } from '../redux/slices/count_distribution_slice';
+import { selectQueries } from '../redux/slices/query_slice';
+import { render as renderExplorerVis } from '../redux/slices/visualization_slice';
+import { updateFields, sortFields } from '../redux/slices/field_slice';
 import PPLService from '../../../services/requests/ppl';
-import { fetchSuccess } from '../slices/query_result_slice';
+import { fetchSuccess } from '../redux/slices/query_result_slice';
 
 interface IFetchVisualizationsParams {
   pplService: PPLService;
diff --git a/dashboards-observability/public/components/explorer/hooks/use_tab_context.ts b/dashboards-observability/public/components/event_analytics/hooks/use_tab_context.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/hooks/use_tab_context.ts
rename to dashboards-observability/public/components/event_analytics/hooks/use_tab_context.ts
diff --git a/dashboards-observability/public/components/explorer/event_analytics.tsx b/dashboards-observability/public/components/event_analytics/index.tsx
similarity index 96%
rename from dashboards-observability/public/components/explorer/event_analytics.tsx
rename to dashboards-observability/public/components/event_analytics/index.tsx
index 7690e474d..edac5e494 100644
--- a/dashboards-observability/public/components/explorer/event_analytics.tsx
+++ b/dashboards-observability/public/components/event_analytics/index.tsx
@@ -11,8 +11,8 @@ import React, { ReactChild, useState } from 'react';
 import { HashRouter, Route, Switch, useHistory } from 'react-router-dom';
 import { RAW_QUERY } from '../../../common/constants/explorer';
 import { ObservabilitySideBar } from '../common/side_nav';
-import { Home as EventExplorerHome } from './home';
-import { LogExplorer } from './log_explorer';
+import { Home as EventExplorerHome } from './home/home';
+import { LogExplorer } from './explorer/log_explorer';
 
 export const EventAnalytics = ({
   chrome,
diff --git a/dashboards-observability/public/components/explorer/reducers/fetch_reducers.ts b/dashboards-observability/public/components/event_analytics/redux/reducers/fetch_reducers.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/reducers/fetch_reducers.ts
rename to dashboards-observability/public/components/event_analytics/redux/reducers/fetch_reducers.ts
diff --git a/dashboards-observability/public/components/explorer/reducers/index.ts b/dashboards-observability/public/components/event_analytics/redux/reducers/index.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/reducers/index.ts
rename to dashboards-observability/public/components/event_analytics/redux/reducers/index.ts
diff --git a/dashboards-observability/public/components/explorer/reducers/query_reducers.ts b/dashboards-observability/public/components/event_analytics/redux/reducers/query_reducers.ts
similarity index 100%
rename from dashboards-observability/public/components/explorer/reducers/query_reducers.ts
rename to dashboards-observability/public/components/event_analytics/redux/reducers/query_reducers.ts
diff --git a/dashboards-observability/public/components/explorer/slices/count_distribution_slice.ts b/dashboards-observability/public/components/event_analytics/redux/slices/count_distribution_slice.ts
similarity index 86%
rename from dashboards-observability/public/components/explorer/slices/count_distribution_slice.ts
rename to dashboards-observability/public/components/event_analytics/redux/slices/count_distribution_slice.ts
index ad1331bfa..434682b25 100644
--- a/dashboards-observability/public/components/explorer/slices/count_distribution_slice.ts
+++ b/dashboards-observability/public/components/event_analytics/redux/slices/count_distribution_slice.ts
@@ -4,8 +4,8 @@
  */
 
 import { createSlice } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/shared_state';
-import { REDUX_EXPL_SLICE_COUNT_DISTRIBUTION } from '../../../../common/constants/explorer';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_COUNT_DISTRIBUTION } from '../../../../../common/constants/explorer';
 
 const initialState = {
   [initialTabId]: {},
diff --git a/dashboards-observability/public/components/explorer/slices/field_slice.ts b/dashboards-observability/public/components/event_analytics/redux/slices/field_slice.ts
similarity index 88%
rename from dashboards-observability/public/components/explorer/slices/field_slice.ts
rename to dashboards-observability/public/components/event_analytics/redux/slices/field_slice.ts
index 7519d2ef1..4c691d078 100644
--- a/dashboards-observability/public/components/explorer/slices/field_slice.ts
+++ b/dashboards-observability/public/components/event_analytics/redux/slices/field_slice.ts
@@ -5,15 +5,15 @@
 
 import { createSlice } from '@reduxjs/toolkit';
 import { forEach } from 'lodash';
-import { initialTabId } from '../../../framework/redux/store/shared_state';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
 import {
   SELECTED_FIELDS,
   UNSELECTED_FIELDS,
   AVAILABLE_FIELDS,
   QUERIED_FIELDS,
   REDUX_EXPL_SLICE_FIELDS,
-} from '../../../../common/constants/explorer';
-import { IField } from '../../../../common/types/explorer';
+} from '../../../../../common/constants/explorer';
+import { IField } from '../../../../../common/types/explorer';
 
 const initialFields = {
   [SELECTED_FIELDS]: [],
diff --git a/dashboards-observability/public/components/explorer/slices/query_result_slice.ts b/dashboards-observability/public/components/event_analytics/redux/slices/query_result_slice.ts
similarity index 83%
rename from dashboards-observability/public/components/explorer/slices/query_result_slice.ts
rename to dashboards-observability/public/components/event_analytics/redux/slices/query_result_slice.ts
index 2d3369d4a..0de05a6bf 100644
--- a/dashboards-observability/public/components/explorer/slices/query_result_slice.ts
+++ b/dashboards-observability/public/components/event_analytics/redux/slices/query_result_slice.ts
@@ -5,8 +5,8 @@
 
 import { createSlice } from '@reduxjs/toolkit';
 import { fetchSuccess as fetchSuccessReducer } from '../reducers';
-import { initialTabId } from '../../../framework/redux/store/shared_state';
-import { REDUX_EXPL_SLICE_QUERY_RESULT } from '../../../../common/constants/explorer';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_QUERY_RESULT } from '../../../../../common/constants/explorer';
 
 const initialState = {
   [initialTabId]: {},
diff --git a/dashboards-observability/public/components/explorer/slices/query_slice.ts b/dashboards-observability/public/components/event_analytics/redux/slices/query_slice.ts
similarity index 92%
rename from dashboards-observability/public/components/explorer/slices/query_slice.ts
rename to dashboards-observability/public/components/event_analytics/redux/slices/query_slice.ts
index 68677398d..6d82265e1 100644
--- a/dashboards-observability/public/components/explorer/slices/query_slice.ts
+++ b/dashboards-observability/public/components/event_analytics/redux/slices/query_slice.ts
@@ -4,7 +4,7 @@
  */
 
 import { createSlice } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/shared_state';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
 import {
   RAW_QUERY,
   FINAL_QUERY,
@@ -13,7 +13,7 @@ import {
   INDEX,
   SELECTED_TIMESTAMP,
   APP_ANALYTICS_TAB_ID_REGEX,
-} from '../../../../common/constants/explorer';
+} from '../../../../../common/constants/explorer';
 
 const initialQueryState = {
   [RAW_QUERY]: '',
diff --git a/dashboards-observability/public/components/explorer/slices/query_tab_slice.ts b/dashboards-observability/public/components/event_analytics/redux/slices/query_tab_slice.ts
similarity index 91%
rename from dashboards-observability/public/components/explorer/slices/query_tab_slice.ts
rename to dashboards-observability/public/components/event_analytics/redux/slices/query_tab_slice.ts
index d509b21ff..873986a34 100644
--- a/dashboards-observability/public/components/explorer/slices/query_tab_slice.ts
+++ b/dashboards-observability/public/components/event_analytics/redux/slices/query_tab_slice.ts
@@ -6,13 +6,13 @@
 import { 
   createSlice
 } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/shared_state';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
 import { 
   SELECTED_QUERY_TAB,
   QUERY_TAB_IDS,
   NEW_SELECTED_QUERY_TAB,
   REDUX_EXPL_SLICE_QUERY_TABS
-} from '../../../../common/constants/explorer';
+} from '../../../../../common/constants/explorer';
 import { assign } from 'lodash';
 
 const initialState = {
diff --git a/dashboards-observability/public/components/explorer/slices/visualization_slice.ts b/dashboards-observability/public/components/event_analytics/redux/slices/visualization_slice.ts
similarity index 80%
rename from dashboards-observability/public/components/explorer/slices/visualization_slice.ts
rename to dashboards-observability/public/components/event_analytics/redux/slices/visualization_slice.ts
index 55888a499..d55d32017 100644
--- a/dashboards-observability/public/components/explorer/slices/visualization_slice.ts
+++ b/dashboards-observability/public/components/event_analytics/redux/slices/visualization_slice.ts
@@ -4,8 +4,8 @@
  */
 
 import { createSlice } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/shared_state';
-import { REDUX_EXPL_SLICE_VISUALIZATION } from '../../../../common/constants/explorer';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_VISUALIZATION } from '../../../../../common/constants/explorer';
 
 const initialState = {
   [initialTabId]: {},
diff --git a/dashboards-observability/public/components/explorer/slices/viualization_config_slice.ts b/dashboards-observability/public/components/event_analytics/redux/slices/viualization_config_slice.ts
similarity index 86%
rename from dashboards-observability/public/components/explorer/slices/viualization_config_slice.ts
rename to dashboards-observability/public/components/event_analytics/redux/slices/viualization_config_slice.ts
index bfdd94af1..08c1e5f32 100644
--- a/dashboards-observability/public/components/explorer/slices/viualization_config_slice.ts
+++ b/dashboards-observability/public/components/event_analytics/redux/slices/viualization_config_slice.ts
@@ -4,8 +4,8 @@
  */
 
 import { createSlice } from '@reduxjs/toolkit';
-import { initialTabId } from '../../../framework/redux/store/shared_state';
-import { REDUX_EXPL_SLICE_VISUALIZATION } from '../../../../common/constants/explorer';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_VISUALIZATION } from '../../../../../common/constants/explorer';
 
 const initialState = {
   [initialTabId]: {},
diff --git a/dashboards-observability/public/components/explorer/utils/index.tsx b/dashboards-observability/public/components/event_analytics/utils/index.tsx
similarity index 100%
rename from dashboards-observability/public/components/explorer/utils/index.tsx
rename to dashboards-observability/public/components/event_analytics/utils/index.tsx
diff --git a/dashboards-observability/public/components/explorer/utils/utils.tsx b/dashboards-observability/public/components/event_analytics/utils/utils.tsx
similarity index 99%
rename from dashboards-observability/public/components/explorer/utils/utils.tsx
rename to dashboards-observability/public/components/event_analytics/utils/utils.tsx
index fc29e7a2f..d142f472f 100644
--- a/dashboards-observability/public/components/explorer/utils/utils.tsx
+++ b/dashboards-observability/public/components/event_analytics/utils/utils.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
 import { IExplorerFields, IField } from '../../../../common/types/explorer';
-import { DocViewRow, IDocType } from '../docTable';
+import { DocViewRow, IDocType } from '../explorer/events_views';
 import { HttpStart } from '../../../../../../src/core/public';
 import PPLService from '../../../services/requests/ppl';
 import { TIME_INTERVAL_OPTIONS } from '../../../../common/constants/explorer';
diff --git a/dashboards-observability/public/components/explorer/__tests__/explorer.test.tsx b/dashboards-observability/public/components/explorer/__tests__/explorer.test.tsx
deleted file mode 100644
index 29078fed1..000000000
--- a/dashboards-observability/public/components/explorer/__tests__/explorer.test.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import React, { MutableRefObject } from 'react';
-import { waitFor } from '@testing-library/react';
-import httpClientMock from '../../../../test/__mocks__/httpClientMock';
-// import { Explorer } from '../explorer';
-import PPLService from '../../../services/requests/ppl';
-import DSLService from '../../../services/requests/dsl';
-import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
-import TimestampUtils from '../../../services/timestamp/timestamp';
-import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
-
-describe.skip('Event explorer component', () => {
-  configure({ adapter: new Adapter() });
-
-  it('Renders explorer component', async () => {
-    const pplService = new PPLService(httpClientMock);
-    const dslService = new DSLService(httpClientMock);
-    const tabId = 'query-panel-1';
-    const savedObjects = new SavedObjects(httpClientMock);
-    const timestampUtils = new TimestampUtils(dslService);
-    const setToast = jest.fn();
-    const history = jest.fn() as any;
-    history.replace = jest.fn();
-    history.push = jest.fn();
-    const notifications = coreStartMock.notifications;
-    const savedObjectId = 'JIcoln0BYMuJGDsOLTnM';
-
-    const wrapper = mount(
-      <Explorer
-        pplService={pplService}
-        dslService={dslService}
-        tabId={tabId}
-        savedObjects={savedObjects}
-        timestampUtils={timestampUtils}
-        setToast={setToast}
-        history={history}
-        notifications={notifications}
-        savedObjectId={savedObjectId}
-      />
-    );
-
-    wrapper.update();
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});
diff --git a/dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewerRow.test.tsx.snap b/dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewerRow.test.tsx.snap
deleted file mode 100644
index b023ef06d..000000000
--- a/dashboards-observability/public/components/explorer/docTable/__tests__/__snapshots__/docViewerRow.test.tsx.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Datagrid Doc viewer row component Renders Doc viewer row component 1`] = `
-<ForwardRef
-  doc={
-    Object {
-      "Carrier": "JetBeats",
-      "avg(FlightDelayMin)": "45.957544288332315",
-    }
-  }
-  selectedCols={
-    Array [
-      Object {
-        "name": "avg(FlightDelayMin)",
-        "type": "double",
-      },
-    ]
-  }
->
-  <tr
-    className="osdDocTable__row"
-  >
-    <td
-      className="osdDocTableCell__toggleDetails"
-      key="grid-td-3"
-    >
-      <button
-        className="euiButtonIcon euiButtonIcon--text"
-        onClick={[Function]}
-      >
-        <EuiIcon
-          type="arrowRight"
-        >
-          <EuiIconEmpty
-            aria-hidden={true}
-            className="euiIcon euiIcon--medium euiIcon-isLoading"
-            focusable="false"
-            role="img"
-            style={null}
-          >
-            <svg
-              aria-hidden={true}
-              className="euiIcon euiIcon--medium euiIcon-isLoading"
-              focusable="false"
-              height={16}
-              role="img"
-              style={null}
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </EuiIconEmpty>
-        </EuiIcon>
-      </button>
-    </td>
-    <td
-      className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
-      key="datagrid-cell-2"
-    >
-      45.957544288332315
-    </td>
-  </tr>
-</ForwardRef>
-`;
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_helper.test.ts b/dashboards-observability/public/components/explorer/docTable/detailTable/table_helper.test.ts
deleted file mode 100644
index b714d76c5..000000000
--- a/dashboards-observability/public/components/explorer/docTable/detailTable/table_helper.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { arrayContainsObjects } from './table_helper';
-
-describe('arrayContainsObjects', () => {
-  it(`returns false for an array of primitives`, () => {
-    const actual = arrayContainsObjects(['test', 'test']);
-    expect(actual).toBeFalsy();
-  });
-
-  it(`returns true for an array of objects`, () => {
-    const actual = arrayContainsObjects([{}, {}]);
-    expect(actual).toBeTruthy();
-  });
-
-  it(`returns true for an array of objects and primitves`, () => {
-    const actual = arrayContainsObjects([{}, 'sdf']);
-    expect(actual).toBeTruthy();
-  });
-
-  it(`returns false for an array of null values`, () => {
-    const actual = arrayContainsObjects([null, null]);
-    expect(actual).toBeFalsy();
-  });
-
-  it(`returns false if no array is given`, () => {
-    const actual = arrayContainsObjects([null, null]);
-    expect(actual).toBeFalsy();
-  });
-});
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_helper.tsx b/dashboards-observability/public/components/explorer/docTable/detailTable/table_helper.tsx
deleted file mode 100644
index b0b3229d0..000000000
--- a/dashboards-observability/public/components/explorer/docTable/detailTable/table_helper.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * Returns true if the given array contains at least 1 object
- */
-export function arrayContainsObjects(value: unknown[]): boolean {
-  return Array.isArray(value) && value.some((v) => typeof v === 'object' && v !== null);
-}
-
-/**
- * Removes markup added by kibana fields html formatter
- */
-export function trimAngularSpan(text: string): string {
-  return text.replace(/^<span ng-non-bindable>/, '').replace(/<\/span>$/, '');
-}
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_add.tsx b/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_add.tsx
deleted file mode 100644
index 09a1944d9..000000000
--- a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_add.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { FormattedMessage } from '@osd/i18n/react';
-import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-
-export interface Props {
-  onClick: () => void;
-  disabled: boolean;
-}
-
-export function DocViewTableRowBtnFilterAdd({ onClick, disabled = false }: Props) {
-  const tooltipContent = disabled ? (
-    <FormattedMessage
-      id="discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip"
-      defaultMessage="Unindexed fields can not be searched"
-    />
-  ) : (
-    <FormattedMessage
-      id="discover.docViews.table.filterForValueButtonTooltip"
-      defaultMessage="Filter for value"
-    />
-  );
-
-  return (
-    <EuiToolTip content={tooltipContent}>
-      <EuiButtonIcon
-        aria-label={i18n.translate('discover.docViews.table.filterForValueButtonAriaLabel', {
-          defaultMessage: 'Filter for value',
-        })}
-        className="osdDocViewer__actionButton"
-        data-test-subj="addInclusiveFilterButton"
-        disabled={disabled}
-        onClick={onClick}
-        iconType={'magnifyWithPlus'}
-        iconSize={'s'}
-      />
-    </EuiToolTip>
-  );
-}
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_exists.tsx b/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_exists.tsx
deleted file mode 100644
index 494aec4c1..000000000
--- a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_exists.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { FormattedMessage } from '@osd/i18n/react';
-import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-
-export interface Props {
-  onClick: () => void;
-  disabled?: boolean;
-  scripted?: boolean;
-}
-
-export function DocViewTableRowBtnFilterExists({
-  onClick,
-  disabled = false,
-  scripted = false,
-}: Props) {
-  const tooltipContent = disabled ? (
-    scripted ? (
-      <FormattedMessage
-        id="discover.docViews.table.unableToFilterForPresenceOfScriptedFieldsTooltip"
-        defaultMessage="Unable to filter for presence of scripted fields"
-      />
-    ) : (
-      <FormattedMessage
-        id="discover.docViews.table.unableToFilterForPresenceOfMetaFieldsTooltip"
-        defaultMessage="Unable to filter for presence of meta fields"
-      />
-    )
-  ) : (
-    <FormattedMessage
-      id="discover.docViews.table.filterForFieldPresentButtonTooltip"
-      defaultMessage="Filter for field present"
-    />
-  );
-
-  return (
-    <EuiToolTip content={tooltipContent}>
-      <EuiButtonIcon
-        aria-label={i18n.translate('discover.docViews.table.filterForFieldPresentButtonAriaLabel', {
-          defaultMessage: 'Filter for field present',
-        })}
-        onClick={onClick}
-        className="osdDocViewer__actionButton"
-        data-test-subj="addExistsFilterButton"
-        disabled={disabled}
-        iconType={'indexOpen'}
-        iconSize={'s'}
-      />
-    </EuiToolTip>
-  );
-}
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_remove.tsx b/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_remove.tsx
deleted file mode 100644
index 201fbf902..000000000
--- a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_filter_remove.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { FormattedMessage } from '@osd/i18n/react';
-import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-
-export interface Props {
-  onClick: () => void;
-  disabled?: boolean;
-}
-
-export function DocViewTableRowBtnFilterRemove({ onClick, disabled = false }: Props) {
-  const tooltipContent = disabled ? (
-    <FormattedMessage
-      id="discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip"
-      defaultMessage="Unindexed fields can not be searched"
-    />
-  ) : (
-    <FormattedMessage
-      id="discover.docViews.table.filterOutValueButtonTooltip"
-      defaultMessage="Filter out value"
-    />
-  );
-
-  return (
-    <EuiToolTip content={tooltipContent}>
-      <EuiButtonIcon
-        aria-label={i18n.translate('discover.docViews.table.filterOutValueButtonAriaLabel', {
-          defaultMessage: 'Filter out value',
-        })}
-        className="osdDocViewer__actionButton"
-        data-test-subj="removeInclusiveFilterButton"
-        disabled={disabled}
-        onClick={onClick}
-        iconType={'magnifyWithMinus'}
-        iconSize={'s'}
-      />
-    </EuiToolTip>
-  );
-}
diff --git a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_toggle_column.tsx b/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_toggle_column.tsx
deleted file mode 100644
index f9cc8a1cf..000000000
--- a/dashboards-observability/public/components/explorer/docTable/detailTable/table_row_btn_toggle_column.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { FormattedMessage } from '@osd/i18n/react';
-import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-
-export interface Props {
-  active: boolean;
-  disabled?: boolean;
-  onClick: () => void;
-}
-
-export function DocViewTableRowBtnToggleColumn({ onClick, active, disabled = false }: Props) {
-  if (disabled) {
-    return (
-      <EuiButtonIcon
-        aria-label={i18n.translate('discover.docViews.table.toggleColumnInTableButtonAriaLabel', {
-          defaultMessage: 'Toggle column in table',
-        })}
-        className="osdDocViewer__actionButton"
-        data-test-subj="toggleColumnButton"
-        disabled
-        iconType={'tableOfContents'}
-        iconSize={'s'}
-      />
-    );
-  }
-  return (
-    <EuiToolTip
-      content={
-        <FormattedMessage
-          id="discover.docViews.table.toggleColumnInTableButtonTooltip"
-          defaultMessage="Toggle column in table"
-        />
-      }
-    >
-      <EuiButtonIcon
-        aria-label={i18n.translate('discover.docViews.table.toggleColumnInTableButtonAriaLabel', {
-          defaultMessage: 'Toggle column in table',
-        })}
-        aria-pressed={active}
-        onClick={onClick}
-        className="osdDocViewer__actionButton"
-        data-test-subj="toggleColumnButton"
-        iconType={'tableOfContents'}
-        iconSize={'s'}
-      />
-    </EuiToolTip>
-  );
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/datapanel.test.tsx.snap b/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/datapanel.test.tsx.snap
deleted file mode 100644
index dbaf5c1fc..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/datapanel.test.tsx.snap
+++ /dev/null
@@ -1,6064 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Data panel component Renders data panel component 1`] = `
-<DataPanel
-  explorerFields={
-    Object {
-      "availableFields": Array [
-        Object {
-          "name": "agent",
-          "type": "string",
-        },
-        Object {
-          "name": "bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "clientip",
-          "type": "ip",
-        },
-        Object {
-          "name": "event",
-          "type": "struct",
-        },
-        Object {
-          "name": "extension",
-          "type": "string",
-        },
-        Object {
-          "name": "geo",
-          "type": "struct",
-        },
-        Object {
-          "name": "host",
-          "type": "string",
-        },
-        Object {
-          "name": "index",
-          "type": "string",
-        },
-        Object {
-          "name": "ip",
-          "type": "ip",
-        },
-        Object {
-          "name": "machine",
-          "type": "struct",
-        },
-        Object {
-          "name": "memory",
-          "type": "double",
-        },
-        Object {
-          "name": "message",
-          "type": "string",
-        },
-        Object {
-          "name": "phpmemory",
-          "type": "long",
-        },
-        Object {
-          "name": "referer",
-          "type": "string",
-        },
-        Object {
-          "name": "request",
-          "type": "string",
-        },
-        Object {
-          "name": "response",
-          "type": "string",
-        },
-        Object {
-          "name": "tags",
-          "type": "string",
-        },
-        Object {
-          "name": "timestamp",
-          "type": "timestamp",
-        },
-        Object {
-          "name": "url",
-          "type": "string",
-        },
-        Object {
-          "name": "utc_time",
-          "type": "timestamp",
-        },
-      ],
-      "queriedFields": Array [
-        Object {
-          "name": "double_per_ip_bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "host",
-          "type": "text",
-        },
-        Object {
-          "name": "ip_count",
-          "type": "integer",
-        },
-        Object {
-          "name": "per_ip_bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "resp_code",
-          "type": "text",
-        },
-        Object {
-          "name": "sum_bytes",
-          "type": "long",
-        },
-      ],
-      "selectedFields": Array [],
-      "unselectedFields": Array [],
-    }
-  }
->
-  <EuiFlexGroup
-    className="lnsInnerIndexPatternDataPanel"
-    direction="column"
-    gutterSize="none"
-    responsive={false}
-  >
-    <div
-      className="euiFlexGroup euiFlexGroup--directionColumn lnsInnerIndexPatternDataPanel"
-    >
-      <EuiFlexItem
-        grow={false}
-      >
-        <div
-          className="euiFlexItem euiFlexItem--flexGrowZero"
-        >
-          <EuiFormControlLayout
-            clear={
-              Object {
-                "aria-label": "Clear name and type filters",
-                "onClick": [Function],
-                "title": "Clear name and type filters",
-              }
-            }
-            fullWidth={true}
-            icon="search"
-          >
-            <div
-              className="euiFormControlLayout euiFormControlLayout--fullWidth"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-label="Search fields"
-                  className="euiFieldText euiFieldText--fullWidth lnsInnerIndexPatternDataPanel__textField"
-                  data-test-subj="lnsIndexPatternFieldSearch"
-                  onChange={[Function]}
-                  placeholder="Search field names"
-                  value=""
-                />
-                <EuiFormControlLayoutIcons
-                  clear={
-                    Object {
-                      "aria-label": "Clear name and type filters",
-                      "onClick": [Function],
-                      "title": "Clear name and type filters",
-                    }
-                  }
-                  icon="search"
-                >
-                  <div
-                    className="euiFormControlLayoutIcons"
-                  >
-                    <EuiFormControlLayoutCustomIcon
-                      size="m"
-                      type="search"
-                    >
-                      <span
-                        className="euiFormControlLayoutCustomIcon"
-                      >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiFormControlLayoutCustomIcon__icon"
-                          size="m"
-                          type="search"
-                        >
-                          <EuiIconEmpty
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
-                              aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                              focusable="false"
-                              height={16}
-                              role="img"
-                              style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
-                            />
-                          </EuiIconEmpty>
-                        </EuiIcon>
-                      </span>
-                    </EuiFormControlLayoutCustomIcon>
-                  </div>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <EuiFormControlLayoutClearButton
-                      aria-label="Clear name and type filters"
-                      onClick={[Function]}
-                      size="m"
-                      title="Clear name and type filters"
-                    >
-                      <EuiI18n
-                        default="Clear input"
-                        token="euiFormControlLayoutClearButton.label"
-                      >
-                        <button
-                          aria-label="Clear name and type filters"
-                          className="euiFormControlLayoutClearButton"
-                          onClick={[Function]}
-                          title="Clear name and type filters"
-                          type="button"
-                        >
-                          <EuiIcon
-                            className="euiFormControlLayoutClearButton__icon"
-                            type="cross"
-                          >
-                            <EuiIconEmpty
-                              aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
-                              focusable="false"
-                              role="img"
-                              style={null}
-                            >
-                              <svg
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
-                                focusable="false"
-                                height={16}
-                                role="img"
-                                style={null}
-                                viewBox="0 0 16 16"
-                                width={16}
-                                xmlns="http://www.w3.org/2000/svg"
-                              />
-                            </EuiIconEmpty>
-                          </EuiIcon>
-                        </button>
-                      </EuiI18n>
-                    </EuiFormControlLayoutClearButton>
-                  </div>
-                </EuiFormControlLayoutIcons>
-              </div>
-            </div>
-          </EuiFormControlLayout>
-          <EuiSpacer
-            size="m"
-          >
-            <div
-              className="euiSpacer euiSpacer--m"
-            />
-          </EuiSpacer>
-        </div>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <div
-          className="euiFlexItem"
-        >
-          <FieldList
-            fields={
-              Array [
-                Object {
-                  "name": "agent",
-                  "type": "string",
-                },
-                Object {
-                  "name": "bytes",
-                  "type": "long",
-                },
-                Object {
-                  "name": "clientip",
-                  "type": "ip",
-                },
-                Object {
-                  "name": "event",
-                  "type": "struct",
-                },
-                Object {
-                  "name": "extension",
-                  "type": "string",
-                },
-                Object {
-                  "name": "geo",
-                  "type": "struct",
-                },
-                Object {
-                  "name": "host",
-                  "type": "string",
-                },
-                Object {
-                  "name": "index",
-                  "type": "string",
-                },
-                Object {
-                  "name": "ip",
-                  "type": "ip",
-                },
-                Object {
-                  "name": "machine",
-                  "type": "struct",
-                },
-                Object {
-                  "name": "memory",
-                  "type": "double",
-                },
-                Object {
-                  "name": "message",
-                  "type": "string",
-                },
-                Object {
-                  "name": "phpmemory",
-                  "type": "long",
-                },
-                Object {
-                  "name": "referer",
-                  "type": "string",
-                },
-                Object {
-                  "name": "request",
-                  "type": "string",
-                },
-                Object {
-                  "name": "response",
-                  "type": "string",
-                },
-                Object {
-                  "name": "tags",
-                  "type": "string",
-                },
-                Object {
-                  "name": "timestamp",
-                  "type": "timestamp",
-                },
-                Object {
-                  "name": "url",
-                  "type": "string",
-                },
-                Object {
-                  "name": "utc_time",
-                  "type": "timestamp",
-                },
-              ]
-            }
-            id="1"
-          >
-            <div
-              className="lnsIndexPatternFieldList"
-            >
-              <div
-                className="lnsIndexPatternFieldList__accordionContainer"
-              >
-                <Memo(InnerFieldsAccordion)
-                  id="1"
-                  isFiltered={false}
-                  label="Available fields"
-                  paginatedFields={
-                    Array [
-                      Object {
-                        "name": "agent",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "bytes",
-                        "type": "long",
-                      },
-                      Object {
-                        "name": "clientip",
-                        "type": "ip",
-                      },
-                      Object {
-                        "name": "event",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "extension",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "geo",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "host",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "index",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "ip",
-                        "type": "ip",
-                      },
-                      Object {
-                        "name": "machine",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "memory",
-                        "type": "double",
-                      },
-                      Object {
-                        "name": "message",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "phpmemory",
-                        "type": "long",
-                      },
-                      Object {
-                        "name": "referer",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "request",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "response",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "tags",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "timestamp",
-                        "type": "timestamp",
-                      },
-                      Object {
-                        "name": "url",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "utc_time",
-                        "type": "timestamp",
-                      },
-                    ]
-                  }
-                  showExistenceFetchError={false}
-                >
-                  <EuiAccordion
-                    arrowDisplay="left"
-                    buttonContent={
-                      <EuiText
-                        size="xs"
-                      >
-                        <strong>
-                          Available fields
-                        </strong>
-                      </EuiText>
-                    }
-                    extraAction={
-                      <EuiNotificationBadge
-                        color="subdued"
-                        size="m"
-                      >
-                        20
-                      </EuiNotificationBadge>
-                    }
-                    id="1"
-                    initialIsOpen={false}
-                    isLoading={false}
-                    isLoadingMessage={false}
-                    paddingSize="none"
-                  >
-                    <div
-                      className="euiAccordion"
-                    >
-                      <div
-                        className="euiAccordion__triggerWrapper"
-                      >
-                        <button
-                          aria-controls="1"
-                          aria-expanded={false}
-                          className="euiAccordion__button"
-                          id="random_html_id"
-                          onClick={[Function]}
-                          type="button"
-                        >
-                          <span
-                            className="euiAccordion__iconWrapper"
-                          >
-                            <EuiIcon
-                              className="euiAccordion__icon"
-                              size="m"
-                              type="arrowRight"
-                            >
-                              <EuiIconEmpty
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                                  focusable="false"
-                                  height={16}
-                                  role="img"
-                                  style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                />
-                              </EuiIconEmpty>
-                            </EuiIcon>
-                          </span>
-                          <span
-                            className="euiIEFlexWrapFix"
-                          >
-                            <EuiText
-                              size="xs"
-                            >
-                              <div
-                                className="euiText euiText--extraSmall"
-                              >
-                                <strong>
-                                  Available fields
-                                </strong>
-                              </div>
-                            </EuiText>
-                          </span>
-                        </button>
-                        <div
-                          className="euiAccordion__optionalAction"
-                        >
-                          <EuiNotificationBadge
-                            color="subdued"
-                            size="m"
-                          >
-                            <span
-                              className="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued"
-                            >
-                              20
-                            </span>
-                          </EuiNotificationBadge>
-                        </div>
-                      </div>
-                      <div
-                        aria-labelledby="random_html_id"
-                        className="euiAccordion__childWrapper"
-                        id="1"
-                        role="region"
-                        tabIndex={-1}
-                      >
-                        <EuiResizeObserver
-                          onResize={[Function]}
-                        >
-                          <div>
-                            <div
-                              className=""
-                            >
-                              <EuiSpacer
-                                size="s"
-                              >
-                                <div
-                                  className="euiSpacer euiSpacer--s"
-                                />
-                              </EuiSpacer>
-                              <div
-                                className="lnsInnerIndexPatternDataPanel__fieldItems"
-                              >
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "agent",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="agent"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "agent",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-agent"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                agent
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-agent"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-agent"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-agent"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    agent
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-agent"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          agent
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "bytes",
-                                      "type": "long",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="bytes"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "bytes",
-                                        "type": "long",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-bytes"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": long. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--long lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="long"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                bytes
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-bytes"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-bytes"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": long. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--long lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-bytes"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="long"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    bytes
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": long. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--long lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-bytes"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="long"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="long"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="long"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            color="gray"
-                                                            iconType="questionInCircle"
-                                                            size="s"
-                                                            title="long"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="long"
-                                                                size="s"
-                                                                title="long"
-                                                                type="questionInCircle"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="long"
-                                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="long"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="long"
-                                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          bytes
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "clientip",
-                                      "type": "ip",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="clientip"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "clientip",
-                                        "type": "ip",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-clientip"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": ip. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="ip"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                clientip
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-clientip"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-clientip"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": ip. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-clientip"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="ip"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    clientip
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": ip. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-clientip"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="ip"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="ip"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="ip"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenIP"
-                                                            size="s"
-                                                            title="ip"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="ip"
-                                                                size="m"
-                                                                title="ip"
-                                                                type="tokenIP"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="ip"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="ip"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="ip"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          clientip
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "event",
-                                      "type": "struct",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="event"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "event",
-                                        "type": "struct",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-event"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": struct. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="struct"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                event
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-event"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-event"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": struct. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-event"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="struct"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    event
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": struct. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-event"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="struct"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="struct"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="struct"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            color="gray"
-                                                            iconType="questionInCircle"
-                                                            size="s"
-                                                            title="struct"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="struct"
-                                                                size="s"
-                                                                title="struct"
-                                                                type="questionInCircle"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="struct"
-                                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="struct"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="struct"
-                                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          event
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "extension",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="extension"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "extension",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-extension"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                extension
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-extension"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-extension"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-extension"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    extension
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-extension"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          extension
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "geo",
-                                      "type": "struct",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="geo"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "geo",
-                                        "type": "struct",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-geo"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": struct. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="struct"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                geo
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-geo"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-geo"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": struct. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-geo"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="struct"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    geo
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": struct. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-geo"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="struct"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="struct"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="struct"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            color="gray"
-                                                            iconType="questionInCircle"
-                                                            size="s"
-                                                            title="struct"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="struct"
-                                                                size="s"
-                                                                title="struct"
-                                                                type="questionInCircle"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="struct"
-                                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="struct"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="struct"
-                                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          geo
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "host",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="host"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "host",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-host"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                host
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-host"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-host"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-host"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    host
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-host"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          host
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "index",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="index"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "index",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-index"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                index
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-index"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-index"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-index"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    index
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-index"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          index
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "ip",
-                                      "type": "ip",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="ip"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "ip",
-                                        "type": "ip",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-ip"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": ip. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="ip"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                ip
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-ip"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-ip"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": ip. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-ip"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="ip"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    ip
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": ip. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-ip"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="ip"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="ip"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="ip"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenIP"
-                                                            size="s"
-                                                            title="ip"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="ip"
-                                                                size="m"
-                                                                title="ip"
-                                                                type="tokenIP"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="ip"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="ip"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="ip"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          ip
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "machine",
-                                      "type": "struct",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="machine"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "machine",
-                                        "type": "struct",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-machine"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": struct. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="struct"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                machine
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-machine"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-machine"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": struct. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-machine"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="struct"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    machine
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": struct. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-machine"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="struct"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="struct"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="struct"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            color="gray"
-                                                            iconType="questionInCircle"
-                                                            size="s"
-                                                            title="struct"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="struct"
-                                                                size="s"
-                                                                title="struct"
-                                                                type="questionInCircle"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="struct"
-                                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="struct"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="struct"
-                                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          machine
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "memory",
-                                      "type": "double",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="memory"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "memory",
-                                        "type": "double",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-memory"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": double. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--double lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="double"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                memory
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-memory"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-memory"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": double. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--double lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-memory"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="double"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    memory
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": double. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--double lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-memory"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="double"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="double"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="double"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            color="gray"
-                                                            iconType="questionInCircle"
-                                                            size="s"
-                                                            title="double"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="double"
-                                                                size="s"
-                                                                title="double"
-                                                                type="questionInCircle"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="double"
-                                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="double"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="double"
-                                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          memory
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "message",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="message"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "message",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-message"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                message
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-message"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-message"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-message"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    message
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-message"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          message
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "phpmemory",
-                                      "type": "long",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="phpmemory"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "phpmemory",
-                                        "type": "long",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-phpmemory"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": long. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--long lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="long"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                phpmemory
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-phpmemory"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-phpmemory"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": long. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--long lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-phpmemory"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="long"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    phpmemory
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": long. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--long lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-phpmemory"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="long"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="long"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="long"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            color="gray"
-                                                            iconType="questionInCircle"
-                                                            size="s"
-                                                            title="long"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="long"
-                                                                size="s"
-                                                                title="long"
-                                                                type="questionInCircle"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="long"
-                                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="long"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="long"
-                                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          phpmemory
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "referer",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="referer"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "referer",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-referer"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                referer
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-referer"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-referer"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-referer"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    referer
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-referer"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          referer
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "request",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="request"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "request",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-request"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                request
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-request"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-request"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-request"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    request
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-request"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          request
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "response",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="response"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "response",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-response"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                response
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-response"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-response"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-response"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    response
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-response"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          response
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "tags",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="tags"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "tags",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-tags"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                tags
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-tags"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-tags"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-tags"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    tags
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-tags"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          tags
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "timestamp",
-                                      "type": "timestamp",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="timestamp"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "timestamp",
-                                        "type": "timestamp",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-timestamp"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": timestamp. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="timestamp"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                timestamp
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-timestamp"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-timestamp"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": timestamp. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-timestamp"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="timestamp"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    timestamp
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": timestamp. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-timestamp"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="timestamp"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="timestamp"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="timestamp"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            color="gray"
-                                                            iconType="questionInCircle"
-                                                            size="s"
-                                                            title="timestamp"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="timestamp"
-                                                                size="s"
-                                                                title="timestamp"
-                                                                type="questionInCircle"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="timestamp"
-                                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="timestamp"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="timestamp"
-                                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          timestamp
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "url",
-                                      "type": "string",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="url"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "url",
-                                        "type": "string",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-url"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": string. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="string"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                url
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-url"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-url"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": string. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-url"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="string"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    url
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": string. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-url"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="string"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="string"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="string"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            iconType="tokenString"
-                                                            size="s"
-                                                            title="string"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="string"
-                                                                size="m"
-                                                                title="string"
-                                                                type="tokenString"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="string"
-                                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="string"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="string"
-                                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          url
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                                <Component
-                                  exists={true}
-                                  field={
-                                    Object {
-                                      "name": "utc_time",
-                                      "type": "timestamp",
-                                    }
-                                  }
-                                  hideDetails={false}
-                                  key="utc_time"
-                                >
-                                  <Memo(InnerFieldItem)
-                                    exists={true}
-                                    field={
-                                      Object {
-                                        "name": "utc_time",
-                                        "type": "timestamp",
-                                      }
-                                    }
-                                    hideDetails={false}
-                                  >
-                                    <EuiPopover
-                                      anchorPosition="rightUp"
-                                      button={
-                                        <DragDrop
-                                          data-test-subj="lnsFieldListPanelField-utc_time"
-                                          draggable={true}
-                                        >
-                                          <FieldButton
-                                            aria-label=": timestamp. Hit enter for a field preview."
-                                            className="lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists"
-                                            fieldIcon={
-                                              <LensFieldIcon
-                                                type="timestamp"
-                                              />
-                                            }
-                                            fieldInfoIcon={
-                                              <EuiIconTip
-                                                anchorClassName="lnsFieldItem__infoIcon"
-                                                color="subdued"
-                                                content="Click for a field preview, or drag and drop to visualize."
-                                                size="s"
-                                                type="iInCircle"
-                                              />
-                                            }
-                                            fieldName={
-                                              <EuiHighlight
-                                                search=""
-                                              >
-                                                utc_time
-                                              </EuiHighlight>
-                                            }
-                                            isActive={false}
-                                            onClick={[Function]}
-                                          />
-                                        </DragDrop>
-                                      }
-                                      className="lnsFieldItem__popoverAnchor"
-                                      closePopover={[Function]}
-                                      data-test-subj="lnsFieldListPanelField"
-                                      display="block"
-                                      hasArrow={true}
-                                      isOpen={false}
-                                      ownFocus={true}
-                                      panelClassName="lnsFieldItem__fieldPanel"
-                                      panelPaddingSize="m"
-                                    >
-                                      <div
-                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                                        data-test-subj="lnsFieldListPanelField"
-                                      >
-                                        <div
-                                          className="euiPopover__anchor"
-                                        >
-                                          <DragDrop
-                                            data-test-subj="lnsFieldListPanelField-utc_time"
-                                            draggable={true}
-                                          >
-                                            <Memo(DragDropInner)
-                                              data-test-subj="lnsFieldListPanelField-utc_time"
-                                              draggable={true}
-                                              isDragging={true}
-                                              isNotDroppable={false}
-                                              setDragging={[Function]}
-                                            >
-                                              <FieldButton
-                                                aria-label=": timestamp. Hit enter for a field preview."
-                                                className="lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                data-test-subj="lnsFieldListPanelField-utc_time"
-                                                draggable={true}
-                                                fieldIcon={
-                                                  <LensFieldIcon
-                                                    type="timestamp"
-                                                  />
-                                                }
-                                                fieldInfoIcon={
-                                                  <EuiIconTip
-                                                    anchorClassName="lnsFieldItem__infoIcon"
-                                                    color="subdued"
-                                                    content="Click for a field preview, or drag and drop to visualize."
-                                                    size="s"
-                                                    type="iInCircle"
-                                                  />
-                                                }
-                                                fieldName={
-                                                  <EuiHighlight
-                                                    search=""
-                                                  >
-                                                    utc_time
-                                                  </EuiHighlight>
-                                                }
-                                                isActive={false}
-                                                onClick={[Function]}
-                                                onDragEnd={[Function]}
-                                                onDragLeave={[Function]}
-                                                onDragOver={[Function]}
-                                                onDragStart={[Function]}
-                                                onDrop={[Function]}
-                                              >
-                                                <div
-                                                  aria-label=": timestamp. Hit enter for a field preview."
-                                                  className="osdFieldButton lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                                  data-test-subj="lnsFieldListPanelField-utc_time"
-                                                  draggable={true}
-                                                  onDragEnd={[Function]}
-                                                  onDragLeave={[Function]}
-                                                  onDragOver={[Function]}
-                                                  onDragStart={[Function]}
-                                                  onDrop={[Function]}
-                                                >
-                                                  <button
-                                                    className="osd-resetFocusState osdFieldButton__button"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <span
-                                                      className="osdFieldButton__fieldIcon"
-                                                    >
-                                                      <LensFieldIcon
-                                                        type="timestamp"
-                                                      >
-                                                        <FieldIcon
-                                                          className="lnsFieldListPanel__fieldIcon"
-                                                          type="timestamp"
-                                                        >
-                                                          <EuiToken
-                                                            aria-label="timestamp"
-                                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                            color="gray"
-                                                            iconType="questionInCircle"
-                                                            size="s"
-                                                            title="timestamp"
-                                                          >
-                                                            <span
-                                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                                              style={Object {}}
-                                                            >
-                                                              <EuiIcon
-                                                                aria-label="timestamp"
-                                                                size="s"
-                                                                title="timestamp"
-                                                                type="questionInCircle"
-                                                              >
-                                                                <EuiIconEmpty
-                                                                  aria-hidden={true}
-                                                                  aria-label="timestamp"
-                                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                  focusable="false"
-                                                                  role="img"
-                                                                  style={null}
-                                                                  title="timestamp"
-                                                                >
-                                                                  <svg
-                                                                    aria-hidden={true}
-                                                                    aria-label="timestamp"
-                                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                                    focusable="false"
-                                                                    height={16}
-                                                                    role="img"
-                                                                    style={null}
-                                                                    viewBox="0 0 16 16"
-                                                                    width={16}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  />
-                                                                </EuiIconEmpty>
-                                                              </EuiIcon>
-                                                            </span>
-                                                          </EuiToken>
-                                                        </FieldIcon>
-                                                      </LensFieldIcon>
-                                                    </span>
-                                                    <span
-                                                      className="osdFieldButton__name"
-                                                    >
-                                                      <EuiHighlight
-                                                        search=""
-                                                      >
-                                                        <span>
-                                                          utc_time
-                                                        </span>
-                                                      </EuiHighlight>
-                                                    </span>
-                                                    <div
-                                                      className="osdFieldButton__infoIcon"
-                                                    >
-                                                      <EuiIconTip
-                                                        anchorClassName="lnsFieldItem__infoIcon"
-                                                        color="subdued"
-                                                        content="Click for a field preview, or drag and drop to visualize."
-                                                        size="s"
-                                                        type="iInCircle"
-                                                      >
-                                                        <EuiToolTip
-                                                          anchorClassName="lnsFieldItem__infoIcon"
-                                                          content="Click for a field preview, or drag and drop to visualize."
-                                                          delay="regular"
-                                                          position="top"
-                                                        >
-                                                          <span
-                                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                                            onKeyUp={[Function]}
-                                                            onMouseOut={[Function]}
-                                                            onMouseOver={[Function]}
-                                                          >
-                                                            <EuiIcon
-                                                              aria-label="Info"
-                                                              color="subdued"
-                                                              onBlur={[Function]}
-                                                              onFocus={[Function]}
-                                                              size="s"
-                                                              tabIndex={0}
-                                                              type="iInCircle"
-                                                            >
-                                                              <EuiIconEmpty
-                                                                aria-hidden={true}
-                                                                aria-label="Info"
-                                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                focusable="true"
-                                                                onBlur={[Function]}
-                                                                onFocus={[Function]}
-                                                                role="img"
-                                                                style={null}
-                                                                tabIndex={0}
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  aria-label="Info"
-                                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                                  focusable="true"
-                                                                  height={16}
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="img"
-                                                                  style={null}
-                                                                  tabIndex={0}
-                                                                  viewBox="0 0 16 16"
-                                                                  width={16}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                />
-                                                              </EuiIconEmpty>
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiToolTip>
-                                                      </EuiIconTip>
-                                                    </div>
-                                                  </button>
-                                                </div>
-                                              </FieldButton>
-                                            </Memo(DragDropInner)>
-                                          </DragDrop>
-                                        </div>
-                                      </div>
-                                    </EuiPopover>
-                                  </Memo(InnerFieldItem)>
-                                </Component>
-                              </div>
-                            </div>
-                          </div>
-                        </EuiResizeObserver>
-                      </div>
-                    </div>
-                  </EuiAccordion>
-                </Memo(InnerFieldsAccordion)>
-              </div>
-            </div>
-          </FieldList>
-        </div>
-      </EuiFlexItem>
-    </div>
-  </EuiFlexGroup>
-</DataPanel>
-`;
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_accordion.test.tsx.snap b/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_accordion.test.tsx.snap
deleted file mode 100644
index 3fba23c57..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_accordion.test.tsx.snap
+++ /dev/null
@@ -1,5693 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Visualization fields accordion component Renders fields accordion component 1`] = `
-<Memo(InnerFieldsAccordion)
-  id="3367"
-  isFiltered={false}
-  label="Available fields"
-  paginatedFields={
-    Array [
-      Object {
-        "name": "agent",
-        "type": "string",
-      },
-      Object {
-        "name": "bytes",
-        "type": "long",
-      },
-      Object {
-        "name": "clientip",
-        "type": "ip",
-      },
-      Object {
-        "name": "event",
-        "type": "struct",
-      },
-      Object {
-        "name": "extension",
-        "type": "string",
-      },
-      Object {
-        "name": "geo",
-        "type": "struct",
-      },
-      Object {
-        "name": "host",
-        "type": "string",
-      },
-      Object {
-        "name": "index",
-        "type": "string",
-      },
-      Object {
-        "name": "ip",
-        "type": "ip",
-      },
-      Object {
-        "name": "machine",
-        "type": "struct",
-      },
-      Object {
-        "name": "memory",
-        "type": "double",
-      },
-      Object {
-        "name": "message",
-        "type": "string",
-      },
-      Object {
-        "name": "phpmemory",
-        "type": "long",
-      },
-      Object {
-        "name": "referer",
-        "type": "string",
-      },
-      Object {
-        "name": "request",
-        "type": "string",
-      },
-      Object {
-        "name": "response",
-        "type": "string",
-      },
-      Object {
-        "name": "tags",
-        "type": "string",
-      },
-      Object {
-        "name": "timestamp",
-        "type": "timestamp",
-      },
-      Object {
-        "name": "url",
-        "type": "string",
-      },
-      Object {
-        "name": "utc_time",
-        "type": "timestamp",
-      },
-    ]
-  }
-  showExistenceFetchError={false}
->
-  <EuiAccordion
-    arrowDisplay="left"
-    buttonContent={
-      <EuiText
-        size="xs"
-      >
-        <strong>
-          Available fields
-        </strong>
-      </EuiText>
-    }
-    extraAction={
-      <EuiNotificationBadge
-        color="subdued"
-        size="m"
-      >
-        20
-      </EuiNotificationBadge>
-    }
-    id="3367"
-    initialIsOpen={false}
-    isLoading={false}
-    isLoadingMessage={false}
-    paddingSize="none"
-  >
-    <div
-      className="euiAccordion"
-    >
-      <div
-        className="euiAccordion__triggerWrapper"
-      >
-        <button
-          aria-controls="3367"
-          aria-expanded={false}
-          className="euiAccordion__button"
-          id="random_html_id"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="euiAccordion__iconWrapper"
-          >
-            <EuiIcon
-              className="euiAccordion__icon"
-              size="m"
-              type="arrowRight"
-            >
-              <EuiIconEmpty
-                aria-hidden={true}
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                focusable="false"
-                role="img"
-                style={null}
-              >
-                <svg
-                  aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                  focusable="false"
-                  height={16}
-                  role="img"
-                  style={null}
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-              </EuiIconEmpty>
-            </EuiIcon>
-          </span>
-          <span
-            className="euiIEFlexWrapFix"
-          >
-            <EuiText
-              size="xs"
-            >
-              <div
-                className="euiText euiText--extraSmall"
-              >
-                <strong>
-                  Available fields
-                </strong>
-              </div>
-            </EuiText>
-          </span>
-        </button>
-        <div
-          className="euiAccordion__optionalAction"
-        >
-          <EuiNotificationBadge
-            color="subdued"
-            size="m"
-          >
-            <span
-              className="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued"
-            >
-              20
-            </span>
-          </EuiNotificationBadge>
-        </div>
-      </div>
-      <div
-        aria-labelledby="random_html_id"
-        className="euiAccordion__childWrapper"
-        id="3367"
-        role="region"
-        tabIndex={-1}
-      >
-        <EuiResizeObserver
-          onResize={[Function]}
-        >
-          <div>
-            <div
-              className=""
-            >
-              <EuiSpacer
-                size="s"
-              >
-                <div
-                  className="euiSpacer euiSpacer--s"
-                />
-              </EuiSpacer>
-              <div
-                className="lnsInnerIndexPatternDataPanel__fieldItems"
-              >
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "agent",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="agent"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "agent",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-agent"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                agent
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-agent"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-agent"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-agent"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    agent
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-agent"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          agent
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "bytes",
-                      "type": "long",
-                    }
-                  }
-                  hideDetails={false}
-                  key="bytes"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "bytes",
-                        "type": "long",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-bytes"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": long. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--long lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="long"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                bytes
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-bytes"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-bytes"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": long. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--long lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-bytes"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="long"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    bytes
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": long. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--long lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-bytes"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="long"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="long"
-                                        >
-                                          <EuiToken
-                                            aria-label="long"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            color="gray"
-                                            iconType="questionInCircle"
-                                            size="s"
-                                            title="long"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="long"
-                                                size="s"
-                                                title="long"
-                                                type="questionInCircle"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="long"
-                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="long"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="long"
-                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          bytes
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "clientip",
-                      "type": "ip",
-                    }
-                  }
-                  hideDetails={false}
-                  key="clientip"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "clientip",
-                        "type": "ip",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-clientip"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": ip. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="ip"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                clientip
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-clientip"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-clientip"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": ip. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-clientip"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="ip"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    clientip
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": ip. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-clientip"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="ip"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="ip"
-                                        >
-                                          <EuiToken
-                                            aria-label="ip"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenIP"
-                                            size="s"
-                                            title="ip"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="ip"
-                                                size="m"
-                                                title="ip"
-                                                type="tokenIP"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="ip"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="ip"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="ip"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          clientip
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "event",
-                      "type": "struct",
-                    }
-                  }
-                  hideDetails={false}
-                  key="event"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "event",
-                        "type": "struct",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-event"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": struct. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="struct"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                event
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-event"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-event"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": struct. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-event"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="struct"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    event
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": struct. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-event"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="struct"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="struct"
-                                        >
-                                          <EuiToken
-                                            aria-label="struct"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            color="gray"
-                                            iconType="questionInCircle"
-                                            size="s"
-                                            title="struct"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="struct"
-                                                size="s"
-                                                title="struct"
-                                                type="questionInCircle"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="struct"
-                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="struct"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="struct"
-                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          event
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "extension",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="extension"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "extension",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-extension"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                extension
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-extension"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-extension"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-extension"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    extension
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-extension"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          extension
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "geo",
-                      "type": "struct",
-                    }
-                  }
-                  hideDetails={false}
-                  key="geo"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "geo",
-                        "type": "struct",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-geo"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": struct. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="struct"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                geo
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-geo"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-geo"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": struct. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-geo"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="struct"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    geo
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": struct. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-geo"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="struct"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="struct"
-                                        >
-                                          <EuiToken
-                                            aria-label="struct"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            color="gray"
-                                            iconType="questionInCircle"
-                                            size="s"
-                                            title="struct"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="struct"
-                                                size="s"
-                                                title="struct"
-                                                type="questionInCircle"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="struct"
-                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="struct"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="struct"
-                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          geo
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "host",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="host"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "host",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-host"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                host
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-host"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-host"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-host"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    host
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-host"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          host
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "index",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="index"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "index",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-index"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                index
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-index"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-index"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-index"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    index
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-index"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          index
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "ip",
-                      "type": "ip",
-                    }
-                  }
-                  hideDetails={false}
-                  key="ip"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "ip",
-                        "type": "ip",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-ip"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": ip. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="ip"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                ip
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-ip"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-ip"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": ip. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-ip"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="ip"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    ip
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": ip. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--ip lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-ip"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="ip"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="ip"
-                                        >
-                                          <EuiToken
-                                            aria-label="ip"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenIP"
-                                            size="s"
-                                            title="ip"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="ip"
-                                                size="m"
-                                                title="ip"
-                                                type="tokenIP"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="ip"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="ip"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="ip"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          ip
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "machine",
-                      "type": "struct",
-                    }
-                  }
-                  hideDetails={false}
-                  key="machine"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "machine",
-                        "type": "struct",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-machine"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": struct. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="struct"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                machine
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-machine"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-machine"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": struct. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-machine"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="struct"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    machine
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": struct. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--struct lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-machine"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="struct"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="struct"
-                                        >
-                                          <EuiToken
-                                            aria-label="struct"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            color="gray"
-                                            iconType="questionInCircle"
-                                            size="s"
-                                            title="struct"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="struct"
-                                                size="s"
-                                                title="struct"
-                                                type="questionInCircle"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="struct"
-                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="struct"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="struct"
-                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          machine
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "memory",
-                      "type": "double",
-                    }
-                  }
-                  hideDetails={false}
-                  key="memory"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "memory",
-                        "type": "double",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-memory"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": double. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--double lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="double"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                memory
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-memory"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-memory"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": double. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--double lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-memory"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="double"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    memory
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": double. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--double lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-memory"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="double"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="double"
-                                        >
-                                          <EuiToken
-                                            aria-label="double"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            color="gray"
-                                            iconType="questionInCircle"
-                                            size="s"
-                                            title="double"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="double"
-                                                size="s"
-                                                title="double"
-                                                type="questionInCircle"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="double"
-                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="double"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="double"
-                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          memory
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "message",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="message"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "message",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-message"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                message
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-message"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-message"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-message"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    message
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-message"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          message
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "phpmemory",
-                      "type": "long",
-                    }
-                  }
-                  hideDetails={false}
-                  key="phpmemory"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "phpmemory",
-                        "type": "long",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-phpmemory"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": long. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--long lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="long"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                phpmemory
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-phpmemory"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-phpmemory"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": long. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--long lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-phpmemory"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="long"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    phpmemory
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": long. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--long lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-phpmemory"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="long"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="long"
-                                        >
-                                          <EuiToken
-                                            aria-label="long"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            color="gray"
-                                            iconType="questionInCircle"
-                                            size="s"
-                                            title="long"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="long"
-                                                size="s"
-                                                title="long"
-                                                type="questionInCircle"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="long"
-                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="long"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="long"
-                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          phpmemory
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "referer",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="referer"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "referer",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-referer"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                referer
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-referer"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-referer"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-referer"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    referer
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-referer"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          referer
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "request",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="request"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "request",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-request"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                request
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-request"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-request"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-request"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    request
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-request"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          request
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "response",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="response"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "response",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-response"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                response
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-response"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-response"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-response"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    response
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-response"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          response
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "tags",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="tags"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "tags",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-tags"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                tags
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-tags"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-tags"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-tags"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    tags
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-tags"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          tags
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "timestamp",
-                      "type": "timestamp",
-                    }
-                  }
-                  hideDetails={false}
-                  key="timestamp"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "timestamp",
-                        "type": "timestamp",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-timestamp"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": timestamp. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="timestamp"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                timestamp
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-timestamp"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-timestamp"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": timestamp. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-timestamp"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="timestamp"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    timestamp
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": timestamp. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-timestamp"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="timestamp"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="timestamp"
-                                        >
-                                          <EuiToken
-                                            aria-label="timestamp"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            color="gray"
-                                            iconType="questionInCircle"
-                                            size="s"
-                                            title="timestamp"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="timestamp"
-                                                size="s"
-                                                title="timestamp"
-                                                type="questionInCircle"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="timestamp"
-                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="timestamp"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="timestamp"
-                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          timestamp
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "url",
-                      "type": "string",
-                    }
-                  }
-                  hideDetails={false}
-                  key="url"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "url",
-                        "type": "string",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-url"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": string. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="string"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                url
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-url"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-url"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": string. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-url"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="string"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    url
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": string. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-url"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="string"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="string"
-                                        >
-                                          <EuiToken
-                                            aria-label="string"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            iconType="tokenString"
-                                            size="s"
-                                            title="string"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="string"
-                                                size="m"
-                                                title="string"
-                                                type="tokenString"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="string"
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="string"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="string"
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          url
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-                <Component
-                  exists={true}
-                  field={
-                    Object {
-                      "name": "utc_time",
-                      "type": "timestamp",
-                    }
-                  }
-                  hideDetails={false}
-                  key="utc_time"
-                >
-                  <Memo(InnerFieldItem)
-                    exists={true}
-                    field={
-                      Object {
-                        "name": "utc_time",
-                        "type": "timestamp",
-                      }
-                    }
-                    hideDetails={false}
-                  >
-                    <EuiPopover
-                      anchorPosition="rightUp"
-                      button={
-                        <DragDrop
-                          data-test-subj="lnsFieldListPanelField-utc_time"
-                          draggable={true}
-                        >
-                          <FieldButton
-                            aria-label=": timestamp. Hit enter for a field preview."
-                            className="lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists"
-                            fieldIcon={
-                              <LensFieldIcon
-                                type="timestamp"
-                              />
-                            }
-                            fieldInfoIcon={
-                              <EuiIconTip
-                                anchorClassName="lnsFieldItem__infoIcon"
-                                color="subdued"
-                                content="Click for a field preview, or drag and drop to visualize."
-                                size="s"
-                                type="iInCircle"
-                              />
-                            }
-                            fieldName={
-                              <EuiHighlight
-                                search=""
-                              >
-                                utc_time
-                              </EuiHighlight>
-                            }
-                            isActive={false}
-                            onClick={[Function]}
-                          />
-                        </DragDrop>
-                      }
-                      className="lnsFieldItem__popoverAnchor"
-                      closePopover={[Function]}
-                      data-test-subj="lnsFieldListPanelField"
-                      display="block"
-                      hasArrow={true}
-                      isOpen={false}
-                      ownFocus={true}
-                      panelClassName="lnsFieldItem__fieldPanel"
-                      panelPaddingSize="m"
-                    >
-                      <div
-                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-                        data-test-subj="lnsFieldListPanelField"
-                      >
-                        <div
-                          className="euiPopover__anchor"
-                        >
-                          <DragDrop
-                            data-test-subj="lnsFieldListPanelField-utc_time"
-                            draggable={true}
-                          >
-                            <Memo(DragDropInner)
-                              data-test-subj="lnsFieldListPanelField-utc_time"
-                              draggable={true}
-                              isDragging={true}
-                              isNotDroppable={false}
-                              setDragging={[Function]}
-                            >
-                              <FieldButton
-                                aria-label=": timestamp. Hit enter for a field preview."
-                                className="lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                data-test-subj="lnsFieldListPanelField-utc_time"
-                                draggable={true}
-                                fieldIcon={
-                                  <LensFieldIcon
-                                    type="timestamp"
-                                  />
-                                }
-                                fieldInfoIcon={
-                                  <EuiIconTip
-                                    anchorClassName="lnsFieldItem__infoIcon"
-                                    color="subdued"
-                                    content="Click for a field preview, or drag and drop to visualize."
-                                    size="s"
-                                    type="iInCircle"
-                                  />
-                                }
-                                fieldName={
-                                  <EuiHighlight
-                                    search=""
-                                  >
-                                    utc_time
-                                  </EuiHighlight>
-                                }
-                                isActive={false}
-                                onClick={[Function]}
-                                onDragEnd={[Function]}
-                                onDragLeave={[Function]}
-                                onDragOver={[Function]}
-                                onDragStart={[Function]}
-                                onDrop={[Function]}
-                              >
-                                <div
-                                  aria-label=": timestamp. Hit enter for a field preview."
-                                  className="osdFieldButton lnsFieldItem lnsFieldItem--timestamp lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                                  data-test-subj="lnsFieldListPanelField-utc_time"
-                                  draggable={true}
-                                  onDragEnd={[Function]}
-                                  onDragLeave={[Function]}
-                                  onDragOver={[Function]}
-                                  onDragStart={[Function]}
-                                  onDrop={[Function]}
-                                >
-                                  <button
-                                    className="osd-resetFocusState osdFieldButton__button"
-                                    onClick={[Function]}
-                                  >
-                                    <span
-                                      className="osdFieldButton__fieldIcon"
-                                    >
-                                      <LensFieldIcon
-                                        type="timestamp"
-                                      >
-                                        <FieldIcon
-                                          className="lnsFieldListPanel__fieldIcon"
-                                          type="timestamp"
-                                        >
-                                          <EuiToken
-                                            aria-label="timestamp"
-                                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                            color="gray"
-                                            iconType="questionInCircle"
-                                            size="s"
-                                            title="timestamp"
-                                          >
-                                            <span
-                                              className="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                                              style={Object {}}
-                                            >
-                                              <EuiIcon
-                                                aria-label="timestamp"
-                                                size="s"
-                                                title="timestamp"
-                                                type="questionInCircle"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  aria-label="timestamp"
-                                                  className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                  title="timestamp"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    aria-label="timestamp"
-                                                    className="euiIcon euiIcon--small euiIcon-isLoading"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                          </EuiToken>
-                                        </FieldIcon>
-                                      </LensFieldIcon>
-                                    </span>
-                                    <span
-                                      className="osdFieldButton__name"
-                                    >
-                                      <EuiHighlight
-                                        search=""
-                                      >
-                                        <span>
-                                          utc_time
-                                        </span>
-                                      </EuiHighlight>
-                                    </span>
-                                    <div
-                                      className="osdFieldButton__infoIcon"
-                                    >
-                                      <EuiIconTip
-                                        anchorClassName="lnsFieldItem__infoIcon"
-                                        color="subdued"
-                                        content="Click for a field preview, or drag and drop to visualize."
-                                        size="s"
-                                        type="iInCircle"
-                                      >
-                                        <EuiToolTip
-                                          anchorClassName="lnsFieldItem__infoIcon"
-                                          content="Click for a field preview, or drag and drop to visualize."
-                                          delay="regular"
-                                          position="top"
-                                        >
-                                          <span
-                                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                                            onKeyUp={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                          >
-                                            <EuiIcon
-                                              aria-label="Info"
-                                              color="subdued"
-                                              onBlur={[Function]}
-                                              onFocus={[Function]}
-                                              size="s"
-                                              tabIndex={0}
-                                              type="iInCircle"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                aria-label="Info"
-                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                focusable="true"
-                                                onBlur={[Function]}
-                                                onFocus={[Function]}
-                                                role="img"
-                                                style={null}
-                                                tabIndex={0}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  aria-label="Info"
-                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                                  focusable="true"
-                                                  height={16}
-                                                  onBlur={[Function]}
-                                                  onFocus={[Function]}
-                                                  role="img"
-                                                  style={null}
-                                                  tabIndex={0}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </span>
-                                        </EuiToolTip>
-                                      </EuiIconTip>
-                                    </div>
-                                  </button>
-                                </div>
-                              </FieldButton>
-                            </Memo(DragDropInner)>
-                          </DragDrop>
-                        </div>
-                      </div>
-                    </EuiPopover>
-                  </Memo(InnerFieldItem)>
-                </Component>
-              </div>
-            </div>
-          </div>
-        </EuiResizeObserver>
-      </div>
-    </div>
-  </EuiAccordion>
-</Memo(InnerFieldsAccordion)>
-`;
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_item.test.tsx.snap b/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_item.test.tsx.snap
deleted file mode 100644
index 437475812..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_item.test.tsx.snap
+++ /dev/null
@@ -1,278 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Visualization field item component Renders field item component 1`] = `
-<Component
-  exists={true}
-  field={
-    Object {
-      "name": "agent",
-      "type": "string",
-    }
-  }
-  hideDetails={false}
-  highlight=""
->
-  <Memo(InnerFieldItem)
-    exists={true}
-    field={
-      Object {
-        "name": "agent",
-        "type": "string",
-      }
-    }
-    hideDetails={false}
-    highlight=""
-  >
-    <EuiPopover
-      anchorPosition="rightUp"
-      button={
-        <DragDrop
-          data-test-subj="lnsFieldListPanelField-agent"
-          draggable={true}
-        >
-          <FieldButton
-            aria-label=": string. Hit enter for a field preview."
-            className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists"
-            fieldIcon={
-              <LensFieldIcon
-                type="string"
-              />
-            }
-            fieldInfoIcon={
-              <EuiIconTip
-                anchorClassName="lnsFieldItem__infoIcon"
-                color="subdued"
-                content="Click for a field preview, or drag and drop to visualize."
-                size="s"
-                type="iInCircle"
-              />
-            }
-            fieldName={
-              <EuiHighlight
-                search=""
-              >
-                agent
-              </EuiHighlight>
-            }
-            isActive={false}
-            onClick={[Function]}
-          />
-        </DragDrop>
-      }
-      className="lnsFieldItem__popoverAnchor"
-      closePopover={[Function]}
-      data-test-subj="lnsFieldListPanelField"
-      display="block"
-      hasArrow={true}
-      isOpen={false}
-      ownFocus={true}
-      panelClassName="lnsFieldItem__fieldPanel"
-      panelPaddingSize="m"
-    >
-      <div
-        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock lnsFieldItem__popoverAnchor"
-        data-test-subj="lnsFieldListPanelField"
-      >
-        <div
-          className="euiPopover__anchor"
-        >
-          <DragDrop
-            data-test-subj="lnsFieldListPanelField-agent"
-            draggable={true}
-          >
-            <Memo(DragDropInner)
-              data-test-subj="lnsFieldListPanelField-agent"
-              draggable={true}
-              isDragging={true}
-              isNotDroppable={false}
-              setDragging={[Function]}
-            >
-              <FieldButton
-                aria-label=": string. Hit enter for a field preview."
-                className="lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                data-test-subj="lnsFieldListPanelField-agent"
-                draggable={true}
-                fieldIcon={
-                  <LensFieldIcon
-                    type="string"
-                  />
-                }
-                fieldInfoIcon={
-                  <EuiIconTip
-                    anchorClassName="lnsFieldItem__infoIcon"
-                    color="subdued"
-                    content="Click for a field preview, or drag and drop to visualize."
-                    size="s"
-                    type="iInCircle"
-                  />
-                }
-                fieldName={
-                  <EuiHighlight
-                    search=""
-                  >
-                    agent
-                  </EuiHighlight>
-                }
-                isActive={false}
-                onClick={[Function]}
-                onDragEnd={[Function]}
-                onDragLeave={[Function]}
-                onDragOver={[Function]}
-                onDragStart={[Function]}
-                onDrop={[Function]}
-              >
-                <div
-                  aria-label=": string. Hit enter for a field preview."
-                  className="osdFieldButton lnsFieldItem lnsFieldItem--string lnsFieldItem--exists lnsDragDrop lnsDragDrop-isDraggable lnsDragDrop-isDragging"
-                  data-test-subj="lnsFieldListPanelField-agent"
-                  draggable={true}
-                  onDragEnd={[Function]}
-                  onDragLeave={[Function]}
-                  onDragOver={[Function]}
-                  onDragStart={[Function]}
-                  onDrop={[Function]}
-                >
-                  <button
-                    className="osd-resetFocusState osdFieldButton__button"
-                    onClick={[Function]}
-                  >
-                    <span
-                      className="osdFieldButton__fieldIcon"
-                    >
-                      <LensFieldIcon
-                        type="string"
-                      >
-                        <FieldIcon
-                          className="lnsFieldListPanel__fieldIcon"
-                          type="string"
-                        >
-                          <EuiToken
-                            aria-label="string"
-                            className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-                            iconType="tokenString"
-                            size="s"
-                            title="string"
-                          >
-                            <span
-                              className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-                              style={Object {}}
-                            >
-                              <EuiIcon
-                                aria-label="string"
-                                size="m"
-                                title="string"
-                                type="tokenString"
-                              >
-                                <EuiIconEmpty
-                                  aria-hidden={true}
-                                  aria-label="string"
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                  focusable="false"
-                                  role="img"
-                                  style={null}
-                                  title="string"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    aria-label="string"
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
-                                    focusable="false"
-                                    height={16}
-                                    role="img"
-                                    style={null}
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  />
-                                </EuiIconEmpty>
-                              </EuiIcon>
-                            </span>
-                          </EuiToken>
-                        </FieldIcon>
-                      </LensFieldIcon>
-                    </span>
-                    <span
-                      className="osdFieldButton__name"
-                    >
-                      <EuiHighlight
-                        search=""
-                      >
-                        <span>
-                          agent
-                        </span>
-                      </EuiHighlight>
-                    </span>
-                    <div
-                      className="osdFieldButton__infoIcon"
-                    >
-                      <EuiIconTip
-                        anchorClassName="lnsFieldItem__infoIcon"
-                        color="subdued"
-                        content="Click for a field preview, or drag and drop to visualize."
-                        size="s"
-                        type="iInCircle"
-                      >
-                        <EuiToolTip
-                          anchorClassName="lnsFieldItem__infoIcon"
-                          content="Click for a field preview, or drag and drop to visualize."
-                          delay="regular"
-                          position="top"
-                        >
-                          <span
-                            className="euiToolTipAnchor lnsFieldItem__infoIcon"
-                            onKeyUp={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                          >
-                            <EuiIcon
-                              aria-label="Info"
-                              color="subdued"
-                              onBlur={[Function]}
-                              onFocus={[Function]}
-                              size="s"
-                              tabIndex={0}
-                              type="iInCircle"
-                            >
-                              <EuiIconEmpty
-                                aria-hidden={true}
-                                aria-label="Info"
-                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                focusable="true"
-                                onBlur={[Function]}
-                                onFocus={[Function]}
-                                role="img"
-                                style={null}
-                                tabIndex={0}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  aria-label="Info"
-                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading"
-                                  focusable="true"
-                                  height={16}
-                                  onBlur={[Function]}
-                                  onFocus={[Function]}
-                                  role="img"
-                                  style={null}
-                                  tabIndex={0}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                />
-                              </EuiIconEmpty>
-                            </EuiIcon>
-                          </span>
-                        </EuiToolTip>
-                      </EuiIconTip>
-                    </div>
-                  </button>
-                </div>
-              </FieldButton>
-            </Memo(DragDropInner)>
-          </DragDrop>
-        </div>
-      </div>
-    </EuiPopover>
-  </Memo(InnerFieldItem)>
-</Component>
-`;
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_list.test.tsx.snap b/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_list.test.tsx.snap
deleted file mode 100644
index 50dd81e5b..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/field_list.test.tsx.snap
+++ /dev/null
@@ -1,237 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Visualization field list component Renders field list component 1`] = `
-<FieldList
-  field={
-    Array [
-      Object {
-        "name": "agent",
-        "type": "string",
-      },
-      Object {
-        "name": "bytes",
-        "type": "long",
-      },
-      Object {
-        "name": "clientip",
-        "type": "ip",
-      },
-      Object {
-        "name": "event",
-        "type": "struct",
-      },
-      Object {
-        "name": "extension",
-        "type": "string",
-      },
-      Object {
-        "name": "geo",
-        "type": "struct",
-      },
-      Object {
-        "name": "host",
-        "type": "string",
-      },
-      Object {
-        "name": "index",
-        "type": "string",
-      },
-      Object {
-        "name": "ip",
-        "type": "ip",
-      },
-      Object {
-        "name": "machine",
-        "type": "struct",
-      },
-      Object {
-        "name": "memory",
-        "type": "double",
-      },
-      Object {
-        "name": "message",
-        "type": "string",
-      },
-      Object {
-        "name": "phpmemory",
-        "type": "long",
-      },
-      Object {
-        "name": "referer",
-        "type": "string",
-      },
-      Object {
-        "name": "request",
-        "type": "string",
-      },
-      Object {
-        "name": "response",
-        "type": "string",
-      },
-      Object {
-        "name": "tags",
-        "type": "string",
-      },
-      Object {
-        "name": "timestamp",
-        "type": "timestamp",
-      },
-      Object {
-        "name": "url",
-        "type": "string",
-      },
-      Object {
-        "name": "utc_time",
-        "type": "timestamp",
-      },
-    ]
-  }
-  id="3327"
->
-  <div
-    className="lnsIndexPatternFieldList"
-  >
-    <div
-      className="lnsIndexPatternFieldList__accordionContainer"
-    >
-      <Memo(InnerFieldsAccordion)
-        id="3327"
-        isFiltered={false}
-        label="Available fields"
-        paginatedFields={Array []}
-        showExistenceFetchError={false}
-      >
-        <EuiAccordion
-          arrowDisplay="left"
-          buttonContent={
-            <EuiText
-              size="xs"
-            >
-              <strong>
-                Available fields
-              </strong>
-            </EuiText>
-          }
-          extraAction={
-            <EuiNotificationBadge
-              color="subdued"
-              size="m"
-            >
-              0
-            </EuiNotificationBadge>
-          }
-          id="3327"
-          initialIsOpen={false}
-          isLoading={false}
-          isLoadingMessage={false}
-          paddingSize="none"
-        >
-          <div
-            className="euiAccordion"
-          >
-            <div
-              className="euiAccordion__triggerWrapper"
-            >
-              <button
-                aria-controls="3327"
-                aria-expanded={false}
-                className="euiAccordion__button"
-                id="random_html_id"
-                onClick={[Function]}
-                type="button"
-              >
-                <span
-                  className="euiAccordion__iconWrapper"
-                >
-                  <EuiIcon
-                    className="euiAccordion__icon"
-                    size="m"
-                    type="arrowRight"
-                  >
-                    <EuiIconEmpty
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
-                    >
-                      <svg
-                        aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                        focusable="false"
-                        height={16}
-                        role="img"
-                        style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      />
-                    </EuiIconEmpty>
-                  </EuiIcon>
-                </span>
-                <span
-                  className="euiIEFlexWrapFix"
-                >
-                  <EuiText
-                    size="xs"
-                  >
-                    <div
-                      className="euiText euiText--extraSmall"
-                    >
-                      <strong>
-                        Available fields
-                      </strong>
-                    </div>
-                  </EuiText>
-                </span>
-              </button>
-              <div
-                className="euiAccordion__optionalAction"
-              >
-                <EuiNotificationBadge
-                  color="subdued"
-                  size="m"
-                >
-                  <span
-                    className="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued"
-                  >
-                    0
-                  </span>
-                </EuiNotificationBadge>
-              </div>
-            </div>
-            <div
-              aria-labelledby="random_html_id"
-              className="euiAccordion__childWrapper"
-              id="3327"
-              role="region"
-              tabIndex={-1}
-            >
-              <EuiResizeObserver
-                onResize={[Function]}
-              >
-                <div>
-                  <div
-                    className=""
-                  >
-                    <EuiSpacer
-                      size="s"
-                    >
-                      <div
-                        className="euiSpacer euiSpacer--s"
-                      />
-                    </EuiSpacer>
-                    <div
-                      className="lnsInnerIndexPatternDataPanel__fieldItems"
-                    />
-                  </div>
-                </div>
-              </EuiResizeObserver>
-            </div>
-          </div>
-        </EuiAccordion>
-      </Memo(InnerFieldsAccordion)>
-    </div>
-  </div>
-</FieldList>
-`;
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/lens_field_icon.test.tsx.snap b/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/lens_field_icon.test.tsx.snap
deleted file mode 100644
index d9cbea0a6..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/__snapshots__/lens_field_icon.test.tsx.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Visualization field icon component Renders field icon component 1`] = `
-<LensFieldIcon
-  type="date"
->
-  <FieldIcon
-    className="lnsFieldListPanel__fieldIcon"
-    type="date"
-  >
-    <EuiToken
-      aria-label="date"
-      className="osdFieldIcon lnsFieldListPanel__fieldIcon"
-      iconType="tokenDate"
-      size="s"
-      title="date"
-    >
-      <span
-        className="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--small osdFieldIcon lnsFieldListPanel__fieldIcon"
-        style={Object {}}
-      >
-        <EuiIcon
-          aria-label="date"
-          size="m"
-          title="date"
-          type="tokenDate"
-        >
-          <EuiIconEmpty
-            aria-hidden={true}
-            aria-label="date"
-            className="euiIcon euiIcon--medium euiIcon-isLoading"
-            focusable="false"
-            role="img"
-            style={null}
-            title="date"
-          >
-            <svg
-              aria-hidden={true}
-              aria-label="date"
-              className="euiIcon euiIcon--medium euiIcon-isLoading"
-              focusable="false"
-              height={16}
-              role="img"
-              style={null}
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </EuiIconEmpty>
-        </EuiIcon>
-      </span>
-    </EuiToken>
-  </FieldIcon>
-</LensFieldIcon>
-`;
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/datapanel.test.tsx b/dashboards-observability/public/components/explorer/visualizations/__tests__/datapanel.test.tsx
deleted file mode 100644
index d6f99c338..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/datapanel.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import React from 'react';
-import { waitFor } from '@testing-library/react';
-import { DataPanel } from '../datapanel';
-import { 
-  SELECTED_FIELDS, 
-  AVAILABLE_FIELDS,
-  UNSELECTED_FIELDS,
-  QUERIED_FIELDS
-} from '../../../../../common/constants/explorer';
-import { 
-  AVAILABLE_FIELDS as SIDEBAR_AVAILABLE_FIELDS,
-  QUERY_FIELDS
-} from '../../../../../test/event_analytics_constants';
-
-describe('Data panel component', () => {
-  configure({ adapter: new Adapter() });
-
-  const explorerFields = {
-    [SELECTED_FIELDS]: [],
-    [UNSELECTED_FIELDS]: [],
-    [AVAILABLE_FIELDS]: SIDEBAR_AVAILABLE_FIELDS,
-    [QUERIED_FIELDS]: QUERY_FIELDS
-  };
-  it('Renders data panel component', async () => {
-    
-    const wrapper = mount(
-      <DataPanel
-        explorerFields={explorerFields}
-      />
-    );
-    
-    wrapper.update();
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});
\ No newline at end of file
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/field_accordion.test.tsx b/dashboards-observability/public/components/explorer/visualizations/__tests__/field_accordion.test.tsx
deleted file mode 100644
index d171927b3..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/field_accordion.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import React from 'react';
-import { waitFor } from '@testing-library/react';
-import { FieldsAccordion } from '../fields_accordion';
-import { 
-  AVAILABLE_FIELDS
-} from '../../../../../test/event_analytics_constants';
-
-describe('Visualization fields accordion component', () => {
-  configure({ adapter: new Adapter() });
-
-  it('Renders fields accordion component', async () => {
-    
-    const wrapper = mount(
-      <FieldsAccordion
-        id="3367"
-        paginatedFields={AVAILABLE_FIELDS}
-        isFiltered={false}
-        label={"Available fields"}
-        showExistenceFetchError={false}
-      />
-    );
-    
-    wrapper.update();
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
deleted file mode 100644
index 319bdb828..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ /dev/null
@@ -1,3666 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Config panel component Renders config panel wrapper component with fields 1`] = `
-<Memo(ConfigPanelWrapper)
-  explorerFields={
-    Object {
-      "availableFields": Array [
-        Object {
-          "name": "agent",
-          "type": "string",
-        },
-        Object {
-          "name": "bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "clientip",
-          "type": "ip",
-        },
-        Object {
-          "name": "event",
-          "type": "struct",
-        },
-        Object {
-          "name": "extension",
-          "type": "string",
-        },
-        Object {
-          "name": "geo",
-          "type": "struct",
-        },
-        Object {
-          "name": "host",
-          "type": "string",
-        },
-        Object {
-          "name": "index",
-          "type": "string",
-        },
-        Object {
-          "name": "ip",
-          "type": "ip",
-        },
-        Object {
-          "name": "machine",
-          "type": "struct",
-        },
-        Object {
-          "name": "memory",
-          "type": "double",
-        },
-        Object {
-          "name": "message",
-          "type": "string",
-        },
-        Object {
-          "name": "phpmemory",
-          "type": "long",
-        },
-        Object {
-          "name": "referer",
-          "type": "string",
-        },
-        Object {
-          "name": "request",
-          "type": "string",
-        },
-        Object {
-          "name": "response",
-          "type": "string",
-        },
-        Object {
-          "name": "tags",
-          "type": "string",
-        },
-        Object {
-          "name": "timestamp",
-          "type": "timestamp",
-        },
-        Object {
-          "name": "url",
-          "type": "string",
-        },
-        Object {
-          "name": "utc_time",
-          "type": "timestamp",
-        },
-      ],
-      "queriedFields": Array [
-        Object {
-          "name": "double_per_ip_bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "host",
-          "type": "text",
-        },
-        Object {
-          "name": "ip_count",
-          "type": "integer",
-        },
-        Object {
-          "name": "per_ip_bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "resp_code",
-          "type": "text",
-        },
-        Object {
-          "name": "sum_bytes",
-          "type": "long",
-        },
-      ],
-      "selectedFields": Array [],
-      "unselectedFields": Array [],
-    }
-  }
->
-  <LayerPanels
-    explorerFields={
-      Object {
-        "availableFields": Array [
-          Object {
-            "name": "agent",
-            "type": "string",
-          },
-          Object {
-            "name": "bytes",
-            "type": "long",
-          },
-          Object {
-            "name": "clientip",
-            "type": "ip",
-          },
-          Object {
-            "name": "event",
-            "type": "struct",
-          },
-          Object {
-            "name": "extension",
-            "type": "string",
-          },
-          Object {
-            "name": "geo",
-            "type": "struct",
-          },
-          Object {
-            "name": "host",
-            "type": "string",
-          },
-          Object {
-            "name": "index",
-            "type": "string",
-          },
-          Object {
-            "name": "ip",
-            "type": "ip",
-          },
-          Object {
-            "name": "machine",
-            "type": "struct",
-          },
-          Object {
-            "name": "memory",
-            "type": "double",
-          },
-          Object {
-            "name": "message",
-            "type": "string",
-          },
-          Object {
-            "name": "phpmemory",
-            "type": "long",
-          },
-          Object {
-            "name": "referer",
-            "type": "string",
-          },
-          Object {
-            "name": "request",
-            "type": "string",
-          },
-          Object {
-            "name": "response",
-            "type": "string",
-          },
-          Object {
-            "name": "tags",
-            "type": "string",
-          },
-          Object {
-            "name": "timestamp",
-            "type": "timestamp",
-          },
-          Object {
-            "name": "url",
-            "type": "string",
-          },
-          Object {
-            "name": "utc_time",
-            "type": "timestamp",
-          },
-        ],
-        "queriedFields": Array [
-          Object {
-            "name": "double_per_ip_bytes",
-            "type": "long",
-          },
-          Object {
-            "name": "host",
-            "type": "text",
-          },
-          Object {
-            "name": "ip_count",
-            "type": "integer",
-          },
-          Object {
-            "name": "per_ip_bytes",
-            "type": "long",
-          },
-          Object {
-            "name": "resp_code",
-            "type": "text",
-          },
-          Object {
-            "name": "sum_bytes",
-            "type": "long",
-          },
-        ],
-        "selectedFields": Array [],
-        "unselectedFields": Array [],
-      }
-    }
-  >
-    <EuiTabbedContent
-      autoFocus="selected"
-      id="vis-config-tabs"
-      tabs={
-        Array [
-          Object {
-            "content": <ConfigPanelItems
-              panelItems={
-                Array [
-                  Object {
-                    "advancedTitle": "Advanced",
-                    "dropdownList": Array [
-                      Object {
-                        "name": "agent",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "bytes",
-                        "type": "long",
-                      },
-                      Object {
-                        "name": "clientip",
-                        "type": "ip",
-                      },
-                      Object {
-                        "name": "event",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "extension",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "geo",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "host",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "index",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "ip",
-                        "type": "ip",
-                      },
-                      Object {
-                        "name": "machine",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "memory",
-                        "type": "double",
-                      },
-                      Object {
-                        "name": "message",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "phpmemory",
-                        "type": "long",
-                      },
-                      Object {
-                        "name": "referer",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "request",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "response",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "tags",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "timestamp",
-                        "type": "timestamp",
-                      },
-                      Object {
-                        "name": "url",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "utc_time",
-                        "type": "timestamp",
-                      },
-                    ],
-                    "paddingTitle": "X-axis",
-                  },
-                  Object {
-                    "advancedTitle": "Advanced",
-                    "dropdownList": Array [],
-                    "paddingTitle": "Y-axis",
-                  },
-                ]
-              }
-            />,
-            "id": "setting-panel",
-            "name": "Settings",
-          },
-        ]
-      }
-    >
-      <div
-        id="vis-config-tabs"
-      >
-        <EuiTabs
-          onFocus={[Function]}
-        >
-          <div
-            className="euiTabs"
-            onFocus={[Function]}
-            role="tablist"
-          >
-            <EuiTab
-              aria-controls="random_html_id"
-              id="setting-panel"
-              isSelected={true}
-              key="setting-panel"
-              onClick={[Function]}
-            >
-              <button
-                aria-controls="random_html_id"
-                aria-selected={true}
-                className="euiTab euiTab-isSelected"
-                disabled={false}
-                id="setting-panel"
-                onClick={[Function]}
-                role="tab"
-                type="button"
-              >
-                <span
-                  className="euiTab__content"
-                >
-                  Settings
-                </span>
-              </button>
-            </EuiTab>
-          </div>
-        </EuiTabs>
-        <div
-          aria-labelledby="setting-panel"
-          id="random_html_id"
-          role="tabpanel"
-        >
-          <ConfigPanelItems
-            panelItems={
-              Array [
-                Object {
-                  "advancedTitle": "Advanced",
-                  "dropdownList": Array [
-                    Object {
-                      "name": "agent",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "bytes",
-                      "type": "long",
-                    },
-                    Object {
-                      "name": "clientip",
-                      "type": "ip",
-                    },
-                    Object {
-                      "name": "event",
-                      "type": "struct",
-                    },
-                    Object {
-                      "name": "extension",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "geo",
-                      "type": "struct",
-                    },
-                    Object {
-                      "name": "host",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "index",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "ip",
-                      "type": "ip",
-                    },
-                    Object {
-                      "name": "machine",
-                      "type": "struct",
-                    },
-                    Object {
-                      "name": "memory",
-                      "type": "double",
-                    },
-                    Object {
-                      "name": "message",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "phpmemory",
-                      "type": "long",
-                    },
-                    Object {
-                      "name": "referer",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "request",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "response",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "tags",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "timestamp",
-                      "type": "timestamp",
-                    },
-                    Object {
-                      "name": "url",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "utc_time",
-                      "type": "timestamp",
-                    },
-                  ],
-                  "paddingTitle": "X-axis",
-                },
-                Object {
-                  "advancedTitle": "Advanced",
-                  "dropdownList": Array [],
-                  "paddingTitle": "Y-axis",
-                },
-              ]
-            }
-          >
-            <EuiForm
-              className="lnsConfigPanel"
-            >
-              <div
-                className="euiForm lnsConfigPanel"
-              >
-                <section
-                  key="vis-conf-panel-5"
-                >
-                  <PanelItem
-                    advancedTitle="Advanced"
-                    dropdownList={
-                      Array [
-                        Object {
-                          "name": "agent",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "bytes",
-                          "type": "long",
-                        },
-                        Object {
-                          "name": "clientip",
-                          "type": "ip",
-                        },
-                        Object {
-                          "name": "event",
-                          "type": "struct",
-                        },
-                        Object {
-                          "name": "extension",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "geo",
-                          "type": "struct",
-                        },
-                        Object {
-                          "name": "host",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "index",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "ip",
-                          "type": "ip",
-                        },
-                        Object {
-                          "name": "machine",
-                          "type": "struct",
-                        },
-                        Object {
-                          "name": "memory",
-                          "type": "double",
-                        },
-                        Object {
-                          "name": "message",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "phpmemory",
-                          "type": "long",
-                        },
-                        Object {
-                          "name": "referer",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "request",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "response",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "tags",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "timestamp",
-                          "type": "timestamp",
-                        },
-                        Object {
-                          "name": "url",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "utc_time",
-                          "type": "timestamp",
-                        },
-                      ]
-                    }
-                    paddingTitle="X-axis"
-                  >
-                    <EuiPanel
-                      paddingSize="m"
-                    >
-                      <div
-                        className="euiPanel euiPanel--paddingMedium"
-                      >
-                        <EuiTitle
-                          size="xxs"
-                        >
-                          <h3
-                            className="euiTitle euiTitle--xxsmall"
-                          >
-                            X-axis
-                          </h3>
-                        </EuiTitle>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiComboBox
-                          aria-label="Use aria labels when no actual label is in use"
-                          async={false}
-                          compressed={false}
-                          fullWidth={false}
-                          id="axis-select-7"
-                          isClearable={true}
-                          onChange={[Function]}
-                          options={
-                            Array [
-                              Object {
-                                "label": "agent",
-                              },
-                              Object {
-                                "label": "bytes",
-                              },
-                              Object {
-                                "label": "clientip",
-                              },
-                              Object {
-                                "label": "event",
-                              },
-                              Object {
-                                "label": "extension",
-                              },
-                              Object {
-                                "label": "geo",
-                              },
-                              Object {
-                                "label": "host",
-                              },
-                              Object {
-                                "label": "index",
-                              },
-                              Object {
-                                "label": "ip",
-                              },
-                              Object {
-                                "label": "machine",
-                              },
-                              Object {
-                                "label": "memory",
-                              },
-                              Object {
-                                "label": "message",
-                              },
-                              Object {
-                                "label": "phpmemory",
-                              },
-                              Object {
-                                "label": "referer",
-                              },
-                              Object {
-                                "label": "request",
-                              },
-                              Object {
-                                "label": "response",
-                              },
-                              Object {
-                                "label": "tags",
-                              },
-                              Object {
-                                "label": "timestamp",
-                              },
-                              Object {
-                                "label": "url",
-                              },
-                              Object {
-                                "label": "utc_time",
-                              },
-                            ]
-                          }
-                          placeholder="Select a field"
-                          selectedOptions={
-                            Array [
-                              Object {
-                                "label": "agent",
-                              },
-                            ]
-                          }
-                          singleSelection={
-                            Object {
-                              "asPlainText": true,
-                            }
-                          }
-                          sortMatchesBy="none"
-                        >
-                          <div
-                            aria-expanded={false}
-                            aria-haspopup="listbox"
-                            aria-label="Use aria labels when no actual label is in use"
-                            className="euiComboBox"
-                            onKeyDown={[Function]}
-                            role="combobox"
-                          >
-                            <EuiComboBoxInput
-                              autoSizeInputRef={[Function]}
-                              compressed={false}
-                              fullWidth={false}
-                              hasSelectedOptions={true}
-                              id="axis-select-7"
-                              inputRef={[Function]}
-                              isListOpen={false}
-                              noIcon={false}
-                              onChange={[Function]}
-                              onClear={[Function]}
-                              onClick={[Function]}
-                              onCloseListClick={[Function]}
-                              onFocus={[Function]}
-                              onOpenListClick={[Function]}
-                              onRemoveOption={[Function]}
-                              placeholder="Select a field"
-                              rootId={[Function]}
-                              searchValue=""
-                              selectedOptions={
-                                Array [
-                                  Object {
-                                    "label": "agent",
-                                  },
-                                ]
-                              }
-                              singleSelection={
-                                Object {
-                                  "asPlainText": true,
-                                }
-                              }
-                              toggleButtonRef={[Function]}
-                              updatePosition={[Function]}
-                              value="agent"
-                            >
-                              <EuiFormControlLayout
-                                clear={
-                                  Object {
-                                    "data-test-subj": "comboBoxClearButton",
-                                    "onClick": [Function],
-                                  }
-                                }
-                                compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "aria-label": "Open list of options",
-                                    "data-test-subj": "comboBoxToggleListButton",
-                                    "disabled": undefined,
-                                    "onClick": [Function],
-                                    "ref": [Function],
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
-                                      data-test-subj="comboBoxInput"
-                                      onClick={[Function]}
-                                      tabIndex={-1}
-                                    >
-                                      <EuiComboBoxPill
-                                        asPlainText={true}
-                                        color="hollow"
-                                        key="agent"
-                                        option={
-                                          Object {
-                                            "label": "agent",
-                                          }
-                                        }
-                                      >
-                                        <span
-                                          className="euiComboBoxPill euiComboBoxPill--plainText"
-                                        >
-                                          agent
-                                        </span>
-                                      </EuiComboBoxPill>
-                                      <AutosizeInput
-                                        aria-controls=""
-                                        className="euiComboBox__input"
-                                        data-test-subj="comboBoxSearchInput"
-                                        id="axis-select-7"
-                                        injectStyles={true}
-                                        inputRef={[Function]}
-                                        minWidth={1}
-                                        onBlur={[Function]}
-                                        onChange={[Function]}
-                                        onFocus={[Function]}
-                                        role="textbox"
-                                        style={
-                                          Object {
-                                            "fontSize": 14,
-                                          }
-                                        }
-                                        value=""
-                                      >
-                                        <div
-                                          className="euiComboBox__input"
-                                          style={
-                                            Object {
-                                              "display": "inline-block",
-                                              "fontSize": 14,
-                                            }
-                                          }
-                                        >
-                                          <input
-                                            aria-controls=""
-                                            data-test-subj="comboBoxSearchInput"
-                                            id="axis-select-7"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            role="textbox"
-                                            style={
-                                              Object {
-                                                "boxSizing": "content-box",
-                                                "width": "2px",
-                                              }
-                                            }
-                                            value=""
-                                          />
-                                          <div
-                                            style={
-                                              Object {
-                                                "height": 0,
-                                                "left": 0,
-                                                "overflow": "scroll",
-                                                "position": "absolute",
-                                                "top": 0,
-                                                "visibility": "hidden",
-                                                "whiteSpace": "pre",
-                                              }
-                                            }
-                                          />
-                                        </div>
-                                      </AutosizeInput>
-                                    </div>
-                                    <EuiFormControlLayoutIcons
-                                      clear={
-                                        Object {
-                                          "data-test-subj": "comboBoxClearButton",
-                                          "onClick": [Function],
-                                        }
-                                      }
-                                      icon={
-                                        Object {
-                                          "aria-label": "Open list of options",
-                                          "data-test-subj": "comboBoxToggleListButton",
-                                          "disabled": undefined,
-                                          "onClick": [Function],
-                                          "ref": [Function],
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <EuiFormControlLayoutClearButton
-                                          data-test-subj="comboBoxClearButton"
-                                          onClick={[Function]}
-                                        >
-                                          <EuiI18n
-                                            default="Clear input"
-                                            token="euiFormControlLayoutClearButton.label"
-                                          >
-                                            <button
-                                              aria-label="Clear input"
-                                              className="euiFormControlLayoutClearButton"
-                                              data-test-subj="comboBoxClearButton"
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiIcon
-                                                className="euiFormControlLayoutClearButton__icon"
-                                                type="cross"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </button>
-                                          </EuiI18n>
-                                        </EuiFormControlLayoutClearButton>
-                                        <EuiFormControlLayoutCustomIcon
-                                          aria-label="Open list of options"
-                                          data-test-subj="comboBoxToggleListButton"
-                                          iconRef={[Function]}
-                                          onClick={[Function]}
-                                          type="arrowDown"
-                                        >
-                                          <button
-                                            aria-label="Open list of options"
-                                            className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                            data-test-subj="comboBoxToggleListButton"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconArrowDown
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
-                                                  />
-                                                </svg>
-                                              </EuiIconArrowDown>
-                                            </EuiIcon>
-                                          </button>
-                                        </EuiFormControlLayoutCustomIcon>
-                                      </div>
-                                    </EuiFormControlLayoutIcons>
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiComboBoxInput>
-                          </div>
-                        </EuiComboBox>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent="Advanced"
-                          id="accordion1"
-                          initialIsOpen={false}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion"
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="accordion1"
-                                aria-expanded={false}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <EuiIconArrowRight
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiAccordion__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiAccordion__icon"
-                                        focusable="false"
-                                        height={16}
-                                        role="img"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
-                                          fillRule="nonzero"
-                                        />
-                                      </svg>
-                                    </EuiIconArrowRight>
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
-                                >
-                                  Advanced
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="accordion1"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className=""
-                                  >
-                                    <EuiPanel
-                                      color="subdued"
-                                    >
-                                      <div
-                                        className="euiPanel euiPanel--paddingMedium"
-                                        color="subdued"
-                                      >
-                                        here goes advanced setting
-                                      </div>
-                                    </EuiPanel>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </div>
-                    </EuiPanel>
-                  </PanelItem>
-                  <EuiSpacer
-                    size="s"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--s"
-                    />
-                  </EuiSpacer>
-                </section>
-                <section
-                  key="vis-conf-panel-6"
-                >
-                  <PanelItem
-                    advancedTitle="Advanced"
-                    dropdownList={Array []}
-                    paddingTitle="Y-axis"
-                  >
-                    <EuiPanel
-                      paddingSize="m"
-                    >
-                      <div
-                        className="euiPanel euiPanel--paddingMedium"
-                      >
-                        <EuiTitle
-                          size="xxs"
-                        >
-                          <h3
-                            className="euiTitle euiTitle--xxsmall"
-                          >
-                            Y-axis
-                          </h3>
-                        </EuiTitle>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiComboBox
-                          aria-label="Use aria labels when no actual label is in use"
-                          async={false}
-                          compressed={false}
-                          fullWidth={false}
-                          id="axis-select-8"
-                          isClearable={true}
-                          onChange={[Function]}
-                          options={Array []}
-                          placeholder="Select a field"
-                          selectedOptions={Array []}
-                          singleSelection={
-                            Object {
-                              "asPlainText": true,
-                            }
-                          }
-                          sortMatchesBy="none"
-                        >
-                          <div
-                            aria-expanded={false}
-                            aria-haspopup="listbox"
-                            aria-label="Use aria labels when no actual label is in use"
-                            className="euiComboBox"
-                            onKeyDown={[Function]}
-                            role="combobox"
-                          >
-                            <EuiComboBoxInput
-                              autoSizeInputRef={[Function]}
-                              compressed={false}
-                              fullWidth={false}
-                              hasSelectedOptions={false}
-                              id="axis-select-8"
-                              inputRef={[Function]}
-                              isListOpen={false}
-                              noIcon={false}
-                              onChange={[Function]}
-                              onClear={[Function]}
-                              onClick={[Function]}
-                              onCloseListClick={[Function]}
-                              onFocus={[Function]}
-                              onOpenListClick={[Function]}
-                              onRemoveOption={[Function]}
-                              placeholder="Select a field"
-                              rootId={[Function]}
-                              searchValue=""
-                              selectedOptions={Array []}
-                              singleSelection={
-                                Object {
-                                  "asPlainText": true,
-                                }
-                              }
-                              toggleButtonRef={[Function]}
-                              updatePosition={[Function]}
-                              value=""
-                            >
-                              <EuiFormControlLayout
-                                compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "aria-label": "Open list of options",
-                                    "data-test-subj": "comboBoxToggleListButton",
-                                    "disabled": undefined,
-                                    "onClick": [Function],
-                                    "ref": [Function],
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
-                                      data-test-subj="comboBoxInput"
-                                      onClick={[Function]}
-                                      tabIndex={-1}
-                                    >
-                                      <p
-                                        className="euiComboBoxPlaceholder"
-                                      >
-                                        Select a field
-                                      </p>
-                                      <AutosizeInput
-                                        aria-controls=""
-                                        className="euiComboBox__input"
-                                        data-test-subj="comboBoxSearchInput"
-                                        id="axis-select-8"
-                                        injectStyles={true}
-                                        inputRef={[Function]}
-                                        minWidth={1}
-                                        onBlur={[Function]}
-                                        onChange={[Function]}
-                                        onFocus={[Function]}
-                                        role="textbox"
-                                        style={
-                                          Object {
-                                            "fontSize": 14,
-                                          }
-                                        }
-                                        value=""
-                                      >
-                                        <div
-                                          className="euiComboBox__input"
-                                          style={
-                                            Object {
-                                              "display": "inline-block",
-                                              "fontSize": 14,
-                                            }
-                                          }
-                                        >
-                                          <input
-                                            aria-controls=""
-                                            data-test-subj="comboBoxSearchInput"
-                                            id="axis-select-8"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            role="textbox"
-                                            style={
-                                              Object {
-                                                "boxSizing": "content-box",
-                                                "width": "2px",
-                                              }
-                                            }
-                                            value=""
-                                          />
-                                          <div
-                                            style={
-                                              Object {
-                                                "height": 0,
-                                                "left": 0,
-                                                "overflow": "scroll",
-                                                "position": "absolute",
-                                                "top": 0,
-                                                "visibility": "hidden",
-                                                "whiteSpace": "pre",
-                                              }
-                                            }
-                                          />
-                                        </div>
-                                      </AutosizeInput>
-                                    </div>
-                                    <EuiFormControlLayoutIcons
-                                      icon={
-                                        Object {
-                                          "aria-label": "Open list of options",
-                                          "data-test-subj": "comboBoxToggleListButton",
-                                          "disabled": undefined,
-                                          "onClick": [Function],
-                                          "ref": [Function],
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <EuiFormControlLayoutCustomIcon
-                                          aria-label="Open list of options"
-                                          data-test-subj="comboBoxToggleListButton"
-                                          iconRef={[Function]}
-                                          onClick={[Function]}
-                                          type="arrowDown"
-                                        >
-                                          <button
-                                            aria-label="Open list of options"
-                                            className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                            data-test-subj="comboBoxToggleListButton"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconArrowDown
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
-                                                  />
-                                                </svg>
-                                              </EuiIconArrowDown>
-                                            </EuiIcon>
-                                          </button>
-                                        </EuiFormControlLayoutCustomIcon>
-                                      </div>
-                                    </EuiFormControlLayoutIcons>
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiComboBoxInput>
-                          </div>
-                        </EuiComboBox>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent="Advanced"
-                          id="accordion1"
-                          initialIsOpen={false}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion"
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="accordion1"
-                                aria-expanded={false}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <EuiIconArrowRight
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiAccordion__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiAccordion__icon"
-                                        focusable="false"
-                                        height={16}
-                                        role="img"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
-                                          fillRule="nonzero"
-                                        />
-                                      </svg>
-                                    </EuiIconArrowRight>
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
-                                >
-                                  Advanced
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="accordion1"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className=""
-                                  >
-                                    <EuiPanel
-                                      color="subdued"
-                                    >
-                                      <div
-                                        className="euiPanel euiPanel--paddingMedium"
-                                        color="subdued"
-                                      >
-                                        here goes advanced setting
-                                      </div>
-                                    </EuiPanel>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </div>
-                    </EuiPanel>
-                  </PanelItem>
-                  <EuiSpacer
-                    size="s"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--s"
-                    />
-                  </EuiSpacer>
-                </section>
-              </div>
-            </EuiForm>
-          </ConfigPanelItems>
-        </div>
-      </div>
-    </EuiTabbedContent>
-  </LayerPanels>
-</Memo(ConfigPanelWrapper)>
-`;
-
-exports[`Config panel component Renders empty config panel wrapper component 1`] = `
-<Memo(ConfigPanelWrapper)>
-  <LayerPanels>
-    <EuiTabbedContent
-      autoFocus="selected"
-      id="vis-config-tabs"
-      tabs={
-        Array [
-          Object {
-            "content": <ConfigPanelItems
-              panelItems={
-                Array [
-                  Object {
-                    "advancedTitle": "Advanced",
-                    "dropdownList": Array [],
-                    "paddingTitle": "X-axis",
-                  },
-                  Object {
-                    "advancedTitle": "Advanced",
-                    "dropdownList": Array [],
-                    "paddingTitle": "Y-axis",
-                  },
-                ]
-              }
-            />,
-            "id": "setting-panel",
-            "name": "Settings",
-          },
-        ]
-      }
-    >
-      <div
-        id="vis-config-tabs"
-      >
-        <EuiTabs
-          onFocus={[Function]}
-        >
-          <div
-            className="euiTabs"
-            onFocus={[Function]}
-            role="tablist"
-          >
-            <EuiTab
-              aria-controls="random_html_id"
-              id="setting-panel"
-              isSelected={true}
-              key="setting-panel"
-              onClick={[Function]}
-            >
-              <button
-                aria-controls="random_html_id"
-                aria-selected={true}
-                className="euiTab euiTab-isSelected"
-                disabled={false}
-                id="setting-panel"
-                onClick={[Function]}
-                role="tab"
-                type="button"
-              >
-                <span
-                  className="euiTab__content"
-                >
-                  Settings
-                </span>
-              </button>
-            </EuiTab>
-          </div>
-        </EuiTabs>
-        <div
-          aria-labelledby="setting-panel"
-          id="random_html_id"
-          role="tabpanel"
-        >
-          <ConfigPanelItems
-            panelItems={
-              Array [
-                Object {
-                  "advancedTitle": "Advanced",
-                  "dropdownList": Array [],
-                  "paddingTitle": "X-axis",
-                },
-                Object {
-                  "advancedTitle": "Advanced",
-                  "dropdownList": Array [],
-                  "paddingTitle": "Y-axis",
-                },
-              ]
-            }
-          >
-            <EuiForm
-              className="lnsConfigPanel"
-            >
-              <div
-                className="euiForm lnsConfigPanel"
-              >
-                <section
-                  key="vis-conf-panel-1"
-                >
-                  <PanelItem
-                    advancedTitle="Advanced"
-                    dropdownList={Array []}
-                    paddingTitle="X-axis"
-                  >
-                    <EuiPanel
-                      paddingSize="m"
-                    >
-                      <div
-                        className="euiPanel euiPanel--paddingMedium"
-                      >
-                        <EuiTitle
-                          size="xxs"
-                        >
-                          <h3
-                            className="euiTitle euiTitle--xxsmall"
-                          >
-                            X-axis
-                          </h3>
-                        </EuiTitle>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiComboBox
-                          aria-label="Use aria labels when no actual label is in use"
-                          async={false}
-                          compressed={false}
-                          fullWidth={false}
-                          id="axis-select-3"
-                          isClearable={true}
-                          onChange={[Function]}
-                          options={Array []}
-                          placeholder="Select a field"
-                          selectedOptions={Array []}
-                          singleSelection={
-                            Object {
-                              "asPlainText": true,
-                            }
-                          }
-                          sortMatchesBy="none"
-                        >
-                          <div
-                            aria-expanded={false}
-                            aria-haspopup="listbox"
-                            aria-label="Use aria labels when no actual label is in use"
-                            className="euiComboBox"
-                            onKeyDown={[Function]}
-                            role="combobox"
-                          >
-                            <EuiComboBoxInput
-                              autoSizeInputRef={[Function]}
-                              compressed={false}
-                              fullWidth={false}
-                              hasSelectedOptions={false}
-                              id="axis-select-3"
-                              inputRef={[Function]}
-                              isListOpen={false}
-                              noIcon={false}
-                              onChange={[Function]}
-                              onClear={[Function]}
-                              onClick={[Function]}
-                              onCloseListClick={[Function]}
-                              onFocus={[Function]}
-                              onOpenListClick={[Function]}
-                              onRemoveOption={[Function]}
-                              placeholder="Select a field"
-                              rootId={[Function]}
-                              searchValue=""
-                              selectedOptions={Array []}
-                              singleSelection={
-                                Object {
-                                  "asPlainText": true,
-                                }
-                              }
-                              toggleButtonRef={[Function]}
-                              updatePosition={[Function]}
-                              value=""
-                            >
-                              <EuiFormControlLayout
-                                compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "aria-label": "Open list of options",
-                                    "data-test-subj": "comboBoxToggleListButton",
-                                    "disabled": undefined,
-                                    "onClick": [Function],
-                                    "ref": [Function],
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
-                                      data-test-subj="comboBoxInput"
-                                      onClick={[Function]}
-                                      tabIndex={-1}
-                                    >
-                                      <p
-                                        className="euiComboBoxPlaceholder"
-                                      >
-                                        Select a field
-                                      </p>
-                                      <AutosizeInput
-                                        aria-controls=""
-                                        className="euiComboBox__input"
-                                        data-test-subj="comboBoxSearchInput"
-                                        id="axis-select-3"
-                                        injectStyles={true}
-                                        inputRef={[Function]}
-                                        minWidth={1}
-                                        onBlur={[Function]}
-                                        onChange={[Function]}
-                                        onFocus={[Function]}
-                                        role="textbox"
-                                        style={
-                                          Object {
-                                            "fontSize": 14,
-                                          }
-                                        }
-                                        value=""
-                                      >
-                                        <div
-                                          className="euiComboBox__input"
-                                          style={
-                                            Object {
-                                              "display": "inline-block",
-                                              "fontSize": 14,
-                                            }
-                                          }
-                                        >
-                                          <input
-                                            aria-controls=""
-                                            data-test-subj="comboBoxSearchInput"
-                                            id="axis-select-3"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            role="textbox"
-                                            style={
-                                              Object {
-                                                "boxSizing": "content-box",
-                                                "width": "2px",
-                                              }
-                                            }
-                                            value=""
-                                          />
-                                          <div
-                                            style={
-                                              Object {
-                                                "height": 0,
-                                                "left": 0,
-                                                "overflow": "scroll",
-                                                "position": "absolute",
-                                                "top": 0,
-                                                "visibility": "hidden",
-                                                "whiteSpace": "pre",
-                                              }
-                                            }
-                                          />
-                                        </div>
-                                      </AutosizeInput>
-                                    </div>
-                                    <EuiFormControlLayoutIcons
-                                      icon={
-                                        Object {
-                                          "aria-label": "Open list of options",
-                                          "data-test-subj": "comboBoxToggleListButton",
-                                          "disabled": undefined,
-                                          "onClick": [Function],
-                                          "ref": [Function],
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <EuiFormControlLayoutCustomIcon
-                                          aria-label="Open list of options"
-                                          data-test-subj="comboBoxToggleListButton"
-                                          iconRef={[Function]}
-                                          onClick={[Function]}
-                                          type="arrowDown"
-                                        >
-                                          <button
-                                            aria-label="Open list of options"
-                                            className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                            data-test-subj="comboBoxToggleListButton"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </button>
-                                        </EuiFormControlLayoutCustomIcon>
-                                      </div>
-                                    </EuiFormControlLayoutIcons>
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiComboBoxInput>
-                          </div>
-                        </EuiComboBox>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent="Advanced"
-                          id="accordion1"
-                          initialIsOpen={false}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion"
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="accordion1"
-                                aria-expanded={false}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <EuiIconEmpty
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                                        focusable="false"
-                                        height={16}
-                                        role="img"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                    </EuiIconEmpty>
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
-                                >
-                                  Advanced
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="accordion1"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className=""
-                                  >
-                                    <EuiPanel
-                                      color="subdued"
-                                    >
-                                      <div
-                                        className="euiPanel euiPanel--paddingMedium"
-                                        color="subdued"
-                                      >
-                                        here goes advanced setting
-                                      </div>
-                                    </EuiPanel>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </div>
-                    </EuiPanel>
-                  </PanelItem>
-                  <EuiSpacer
-                    size="s"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--s"
-                    />
-                  </EuiSpacer>
-                </section>
-                <section
-                  key="vis-conf-panel-2"
-                >
-                  <PanelItem
-                    advancedTitle="Advanced"
-                    dropdownList={Array []}
-                    paddingTitle="Y-axis"
-                  >
-                    <EuiPanel
-                      paddingSize="m"
-                    >
-                      <div
-                        className="euiPanel euiPanel--paddingMedium"
-                      >
-                        <EuiTitle
-                          size="xxs"
-                        >
-                          <h3
-                            className="euiTitle euiTitle--xxsmall"
-                          >
-                            Y-axis
-                          </h3>
-                        </EuiTitle>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiComboBox
-                          aria-label="Use aria labels when no actual label is in use"
-                          async={false}
-                          compressed={false}
-                          fullWidth={false}
-                          id="axis-select-4"
-                          isClearable={true}
-                          onChange={[Function]}
-                          options={Array []}
-                          placeholder="Select a field"
-                          selectedOptions={Array []}
-                          singleSelection={
-                            Object {
-                              "asPlainText": true,
-                            }
-                          }
-                          sortMatchesBy="none"
-                        >
-                          <div
-                            aria-expanded={false}
-                            aria-haspopup="listbox"
-                            aria-label="Use aria labels when no actual label is in use"
-                            className="euiComboBox"
-                            onKeyDown={[Function]}
-                            role="combobox"
-                          >
-                            <EuiComboBoxInput
-                              autoSizeInputRef={[Function]}
-                              compressed={false}
-                              fullWidth={false}
-                              hasSelectedOptions={false}
-                              id="axis-select-4"
-                              inputRef={[Function]}
-                              isListOpen={false}
-                              noIcon={false}
-                              onChange={[Function]}
-                              onClear={[Function]}
-                              onClick={[Function]}
-                              onCloseListClick={[Function]}
-                              onFocus={[Function]}
-                              onOpenListClick={[Function]}
-                              onRemoveOption={[Function]}
-                              placeholder="Select a field"
-                              rootId={[Function]}
-                              searchValue=""
-                              selectedOptions={Array []}
-                              singleSelection={
-                                Object {
-                                  "asPlainText": true,
-                                }
-                              }
-                              toggleButtonRef={[Function]}
-                              updatePosition={[Function]}
-                              value=""
-                            >
-                              <EuiFormControlLayout
-                                compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "aria-label": "Open list of options",
-                                    "data-test-subj": "comboBoxToggleListButton",
-                                    "disabled": undefined,
-                                    "onClick": [Function],
-                                    "ref": [Function],
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
-                                      data-test-subj="comboBoxInput"
-                                      onClick={[Function]}
-                                      tabIndex={-1}
-                                    >
-                                      <p
-                                        className="euiComboBoxPlaceholder"
-                                      >
-                                        Select a field
-                                      </p>
-                                      <AutosizeInput
-                                        aria-controls=""
-                                        className="euiComboBox__input"
-                                        data-test-subj="comboBoxSearchInput"
-                                        id="axis-select-4"
-                                        injectStyles={true}
-                                        inputRef={[Function]}
-                                        minWidth={1}
-                                        onBlur={[Function]}
-                                        onChange={[Function]}
-                                        onFocus={[Function]}
-                                        role="textbox"
-                                        style={
-                                          Object {
-                                            "fontSize": 14,
-                                          }
-                                        }
-                                        value=""
-                                      >
-                                        <div
-                                          className="euiComboBox__input"
-                                          style={
-                                            Object {
-                                              "display": "inline-block",
-                                              "fontSize": 14,
-                                            }
-                                          }
-                                        >
-                                          <input
-                                            aria-controls=""
-                                            data-test-subj="comboBoxSearchInput"
-                                            id="axis-select-4"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            role="textbox"
-                                            style={
-                                              Object {
-                                                "boxSizing": "content-box",
-                                                "width": "2px",
-                                              }
-                                            }
-                                            value=""
-                                          />
-                                          <div
-                                            style={
-                                              Object {
-                                                "height": 0,
-                                                "left": 0,
-                                                "overflow": "scroll",
-                                                "position": "absolute",
-                                                "top": 0,
-                                                "visibility": "hidden",
-                                                "whiteSpace": "pre",
-                                              }
-                                            }
-                                          />
-                                        </div>
-                                      </AutosizeInput>
-                                    </div>
-                                    <EuiFormControlLayoutIcons
-                                      icon={
-                                        Object {
-                                          "aria-label": "Open list of options",
-                                          "data-test-subj": "comboBoxToggleListButton",
-                                          "disabled": undefined,
-                                          "onClick": [Function],
-                                          "ref": [Function],
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <EuiFormControlLayoutCustomIcon
-                                          aria-label="Open list of options"
-                                          data-test-subj="comboBoxToggleListButton"
-                                          iconRef={[Function]}
-                                          onClick={[Function]}
-                                          type="arrowDown"
-                                        >
-                                          <button
-                                            aria-label="Open list of options"
-                                            className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                            data-test-subj="comboBoxToggleListButton"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconEmpty
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                />
-                                              </EuiIconEmpty>
-                                            </EuiIcon>
-                                          </button>
-                                        </EuiFormControlLayoutCustomIcon>
-                                      </div>
-                                    </EuiFormControlLayoutIcons>
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiComboBoxInput>
-                          </div>
-                        </EuiComboBox>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent="Advanced"
-                          id="accordion1"
-                          initialIsOpen={false}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion"
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="accordion1"
-                                aria-expanded={false}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <EuiIconEmpty
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
-                                        focusable="false"
-                                        height={16}
-                                        role="img"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                    </EuiIconEmpty>
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
-                                >
-                                  Advanced
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="accordion1"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className=""
-                                  >
-                                    <EuiPanel
-                                      color="subdued"
-                                    >
-                                      <div
-                                        className="euiPanel euiPanel--paddingMedium"
-                                        color="subdued"
-                                      >
-                                        here goes advanced setting
-                                      </div>
-                                    </EuiPanel>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </div>
-                    </EuiPanel>
-                  </PanelItem>
-                  <EuiSpacer
-                    size="s"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--s"
-                    />
-                  </EuiSpacer>
-                </section>
-              </div>
-            </EuiForm>
-          </ConfigPanelItems>
-        </div>
-      </div>
-    </EuiTabbedContent>
-  </LayerPanels>
-</Memo(ConfigPanelWrapper)>
-`;
-
-exports[`Config panel component Renders panel item component 1`] = `
-<Memo(ConfigPanelWrapper)
-  explorerFields={
-    Object {
-      "availableFields": Array [
-        Object {
-          "name": "agent",
-          "type": "string",
-        },
-        Object {
-          "name": "bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "clientip",
-          "type": "ip",
-        },
-        Object {
-          "name": "event",
-          "type": "struct",
-        },
-        Object {
-          "name": "extension",
-          "type": "string",
-        },
-        Object {
-          "name": "geo",
-          "type": "struct",
-        },
-        Object {
-          "name": "host",
-          "type": "string",
-        },
-        Object {
-          "name": "index",
-          "type": "string",
-        },
-        Object {
-          "name": "ip",
-          "type": "ip",
-        },
-        Object {
-          "name": "machine",
-          "type": "struct",
-        },
-        Object {
-          "name": "memory",
-          "type": "double",
-        },
-        Object {
-          "name": "message",
-          "type": "string",
-        },
-        Object {
-          "name": "phpmemory",
-          "type": "long",
-        },
-        Object {
-          "name": "referer",
-          "type": "string",
-        },
-        Object {
-          "name": "request",
-          "type": "string",
-        },
-        Object {
-          "name": "response",
-          "type": "string",
-        },
-        Object {
-          "name": "tags",
-          "type": "string",
-        },
-        Object {
-          "name": "timestamp",
-          "type": "timestamp",
-        },
-        Object {
-          "name": "url",
-          "type": "string",
-        },
-        Object {
-          "name": "utc_time",
-          "type": "timestamp",
-        },
-      ],
-      "queriedFields": Array [
-        Object {
-          "name": "double_per_ip_bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "host",
-          "type": "text",
-        },
-        Object {
-          "name": "ip_count",
-          "type": "integer",
-        },
-        Object {
-          "name": "per_ip_bytes",
-          "type": "long",
-        },
-        Object {
-          "name": "resp_code",
-          "type": "text",
-        },
-        Object {
-          "name": "sum_bytes",
-          "type": "long",
-        },
-      ],
-      "selectedFields": Array [],
-      "unselectedFields": Array [],
-    }
-  }
->
-  <LayerPanels
-    explorerFields={
-      Object {
-        "availableFields": Array [
-          Object {
-            "name": "agent",
-            "type": "string",
-          },
-          Object {
-            "name": "bytes",
-            "type": "long",
-          },
-          Object {
-            "name": "clientip",
-            "type": "ip",
-          },
-          Object {
-            "name": "event",
-            "type": "struct",
-          },
-          Object {
-            "name": "extension",
-            "type": "string",
-          },
-          Object {
-            "name": "geo",
-            "type": "struct",
-          },
-          Object {
-            "name": "host",
-            "type": "string",
-          },
-          Object {
-            "name": "index",
-            "type": "string",
-          },
-          Object {
-            "name": "ip",
-            "type": "ip",
-          },
-          Object {
-            "name": "machine",
-            "type": "struct",
-          },
-          Object {
-            "name": "memory",
-            "type": "double",
-          },
-          Object {
-            "name": "message",
-            "type": "string",
-          },
-          Object {
-            "name": "phpmemory",
-            "type": "long",
-          },
-          Object {
-            "name": "referer",
-            "type": "string",
-          },
-          Object {
-            "name": "request",
-            "type": "string",
-          },
-          Object {
-            "name": "response",
-            "type": "string",
-          },
-          Object {
-            "name": "tags",
-            "type": "string",
-          },
-          Object {
-            "name": "timestamp",
-            "type": "timestamp",
-          },
-          Object {
-            "name": "url",
-            "type": "string",
-          },
-          Object {
-            "name": "utc_time",
-            "type": "timestamp",
-          },
-        ],
-        "queriedFields": Array [
-          Object {
-            "name": "double_per_ip_bytes",
-            "type": "long",
-          },
-          Object {
-            "name": "host",
-            "type": "text",
-          },
-          Object {
-            "name": "ip_count",
-            "type": "integer",
-          },
-          Object {
-            "name": "per_ip_bytes",
-            "type": "long",
-          },
-          Object {
-            "name": "resp_code",
-            "type": "text",
-          },
-          Object {
-            "name": "sum_bytes",
-            "type": "long",
-          },
-        ],
-        "selectedFields": Array [],
-        "unselectedFields": Array [],
-      }
-    }
-  >
-    <EuiTabbedContent
-      autoFocus="selected"
-      id="vis-config-tabs"
-      tabs={
-        Array [
-          Object {
-            "content": <ConfigPanelItems
-              panelItems={
-                Array [
-                  Object {
-                    "advancedTitle": "Advanced",
-                    "dropdownList": Array [
-                      Object {
-                        "name": "agent",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "bytes",
-                        "type": "long",
-                      },
-                      Object {
-                        "name": "clientip",
-                        "type": "ip",
-                      },
-                      Object {
-                        "name": "event",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "extension",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "geo",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "host",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "index",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "ip",
-                        "type": "ip",
-                      },
-                      Object {
-                        "name": "machine",
-                        "type": "struct",
-                      },
-                      Object {
-                        "name": "memory",
-                        "type": "double",
-                      },
-                      Object {
-                        "name": "message",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "phpmemory",
-                        "type": "long",
-                      },
-                      Object {
-                        "name": "referer",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "request",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "response",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "tags",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "timestamp",
-                        "type": "timestamp",
-                      },
-                      Object {
-                        "name": "url",
-                        "type": "string",
-                      },
-                      Object {
-                        "name": "utc_time",
-                        "type": "timestamp",
-                      },
-                    ],
-                    "paddingTitle": "X-axis",
-                  },
-                  Object {
-                    "advancedTitle": "Advanced",
-                    "dropdownList": Array [],
-                    "paddingTitle": "Y-axis",
-                  },
-                ]
-              }
-            />,
-            "id": "setting-panel",
-            "name": "Settings",
-          },
-        ]
-      }
-    >
-      <div
-        id="vis-config-tabs"
-      >
-        <EuiTabs
-          onFocus={[Function]}
-        >
-          <div
-            className="euiTabs"
-            onFocus={[Function]}
-            role="tablist"
-          >
-            <EuiTab
-              aria-controls="random_html_id"
-              id="setting-panel"
-              isSelected={true}
-              key="setting-panel"
-              onClick={[Function]}
-            >
-              <button
-                aria-controls="random_html_id"
-                aria-selected={true}
-                className="euiTab euiTab-isSelected"
-                disabled={false}
-                id="setting-panel"
-                onClick={[Function]}
-                role="tab"
-                type="button"
-              >
-                <span
-                  className="euiTab__content"
-                >
-                  Settings
-                </span>
-              </button>
-            </EuiTab>
-          </div>
-        </EuiTabs>
-        <div
-          aria-labelledby="setting-panel"
-          id="random_html_id"
-          role="tabpanel"
-        >
-          <ConfigPanelItems
-            panelItems={
-              Array [
-                Object {
-                  "advancedTitle": "Advanced",
-                  "dropdownList": Array [
-                    Object {
-                      "name": "agent",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "bytes",
-                      "type": "long",
-                    },
-                    Object {
-                      "name": "clientip",
-                      "type": "ip",
-                    },
-                    Object {
-                      "name": "event",
-                      "type": "struct",
-                    },
-                    Object {
-                      "name": "extension",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "geo",
-                      "type": "struct",
-                    },
-                    Object {
-                      "name": "host",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "index",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "ip",
-                      "type": "ip",
-                    },
-                    Object {
-                      "name": "machine",
-                      "type": "struct",
-                    },
-                    Object {
-                      "name": "memory",
-                      "type": "double",
-                    },
-                    Object {
-                      "name": "message",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "phpmemory",
-                      "type": "long",
-                    },
-                    Object {
-                      "name": "referer",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "request",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "response",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "tags",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "timestamp",
-                      "type": "timestamp",
-                    },
-                    Object {
-                      "name": "url",
-                      "type": "string",
-                    },
-                    Object {
-                      "name": "utc_time",
-                      "type": "timestamp",
-                    },
-                  ],
-                  "paddingTitle": "X-axis",
-                },
-                Object {
-                  "advancedTitle": "Advanced",
-                  "dropdownList": Array [],
-                  "paddingTitle": "Y-axis",
-                },
-              ]
-            }
-          >
-            <EuiForm
-              className="lnsConfigPanel"
-            >
-              <div
-                className="euiForm lnsConfigPanel"
-              >
-                <section
-                  key="vis-conf-panel-9"
-                >
-                  <PanelItem
-                    advancedTitle="Advanced"
-                    dropdownList={
-                      Array [
-                        Object {
-                          "name": "agent",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "bytes",
-                          "type": "long",
-                        },
-                        Object {
-                          "name": "clientip",
-                          "type": "ip",
-                        },
-                        Object {
-                          "name": "event",
-                          "type": "struct",
-                        },
-                        Object {
-                          "name": "extension",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "geo",
-                          "type": "struct",
-                        },
-                        Object {
-                          "name": "host",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "index",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "ip",
-                          "type": "ip",
-                        },
-                        Object {
-                          "name": "machine",
-                          "type": "struct",
-                        },
-                        Object {
-                          "name": "memory",
-                          "type": "double",
-                        },
-                        Object {
-                          "name": "message",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "phpmemory",
-                          "type": "long",
-                        },
-                        Object {
-                          "name": "referer",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "request",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "response",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "tags",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "timestamp",
-                          "type": "timestamp",
-                        },
-                        Object {
-                          "name": "url",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "utc_time",
-                          "type": "timestamp",
-                        },
-                      ]
-                    }
-                    paddingTitle="X-axis"
-                  >
-                    <EuiPanel
-                      paddingSize="m"
-                    >
-                      <div
-                        className="euiPanel euiPanel--paddingMedium"
-                      >
-                        <EuiTitle
-                          size="xxs"
-                        >
-                          <h3
-                            className="euiTitle euiTitle--xxsmall"
-                          >
-                            X-axis
-                          </h3>
-                        </EuiTitle>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiComboBox
-                          aria-label="Use aria labels when no actual label is in use"
-                          async={false}
-                          compressed={false}
-                          fullWidth={false}
-                          id="axis-select-11"
-                          isClearable={true}
-                          onChange={[Function]}
-                          options={
-                            Array [
-                              Object {
-                                "label": "agent",
-                              },
-                              Object {
-                                "label": "bytes",
-                              },
-                              Object {
-                                "label": "clientip",
-                              },
-                              Object {
-                                "label": "event",
-                              },
-                              Object {
-                                "label": "extension",
-                              },
-                              Object {
-                                "label": "geo",
-                              },
-                              Object {
-                                "label": "host",
-                              },
-                              Object {
-                                "label": "index",
-                              },
-                              Object {
-                                "label": "ip",
-                              },
-                              Object {
-                                "label": "machine",
-                              },
-                              Object {
-                                "label": "memory",
-                              },
-                              Object {
-                                "label": "message",
-                              },
-                              Object {
-                                "label": "phpmemory",
-                              },
-                              Object {
-                                "label": "referer",
-                              },
-                              Object {
-                                "label": "request",
-                              },
-                              Object {
-                                "label": "response",
-                              },
-                              Object {
-                                "label": "tags",
-                              },
-                              Object {
-                                "label": "timestamp",
-                              },
-                              Object {
-                                "label": "url",
-                              },
-                              Object {
-                                "label": "utc_time",
-                              },
-                            ]
-                          }
-                          placeholder="Select a field"
-                          selectedOptions={
-                            Array [
-                              Object {
-                                "label": "agent",
-                              },
-                            ]
-                          }
-                          singleSelection={
-                            Object {
-                              "asPlainText": true,
-                            }
-                          }
-                          sortMatchesBy="none"
-                        >
-                          <div
-                            aria-expanded={false}
-                            aria-haspopup="listbox"
-                            aria-label="Use aria labels when no actual label is in use"
-                            className="euiComboBox"
-                            onKeyDown={[Function]}
-                            role="combobox"
-                          >
-                            <EuiComboBoxInput
-                              autoSizeInputRef={[Function]}
-                              compressed={false}
-                              fullWidth={false}
-                              hasSelectedOptions={true}
-                              id="axis-select-11"
-                              inputRef={[Function]}
-                              isListOpen={false}
-                              noIcon={false}
-                              onChange={[Function]}
-                              onClear={[Function]}
-                              onClick={[Function]}
-                              onCloseListClick={[Function]}
-                              onFocus={[Function]}
-                              onOpenListClick={[Function]}
-                              onRemoveOption={[Function]}
-                              placeholder="Select a field"
-                              rootId={[Function]}
-                              searchValue=""
-                              selectedOptions={
-                                Array [
-                                  Object {
-                                    "label": "agent",
-                                  },
-                                ]
-                              }
-                              singleSelection={
-                                Object {
-                                  "asPlainText": true,
-                                }
-                              }
-                              toggleButtonRef={[Function]}
-                              updatePosition={[Function]}
-                              value="agent"
-                            >
-                              <EuiFormControlLayout
-                                clear={
-                                  Object {
-                                    "data-test-subj": "comboBoxClearButton",
-                                    "onClick": [Function],
-                                  }
-                                }
-                                compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "aria-label": "Open list of options",
-                                    "data-test-subj": "comboBoxToggleListButton",
-                                    "disabled": undefined,
-                                    "onClick": [Function],
-                                    "ref": [Function],
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
-                                      data-test-subj="comboBoxInput"
-                                      onClick={[Function]}
-                                      tabIndex={-1}
-                                    >
-                                      <EuiComboBoxPill
-                                        asPlainText={true}
-                                        color="hollow"
-                                        key="agent"
-                                        option={
-                                          Object {
-                                            "label": "agent",
-                                          }
-                                        }
-                                      >
-                                        <span
-                                          className="euiComboBoxPill euiComboBoxPill--plainText"
-                                        >
-                                          agent
-                                        </span>
-                                      </EuiComboBoxPill>
-                                      <AutosizeInput
-                                        aria-controls=""
-                                        className="euiComboBox__input"
-                                        data-test-subj="comboBoxSearchInput"
-                                        id="axis-select-11"
-                                        injectStyles={true}
-                                        inputRef={[Function]}
-                                        minWidth={1}
-                                        onBlur={[Function]}
-                                        onChange={[Function]}
-                                        onFocus={[Function]}
-                                        role="textbox"
-                                        style={
-                                          Object {
-                                            "fontSize": 14,
-                                          }
-                                        }
-                                        value=""
-                                      >
-                                        <div
-                                          className="euiComboBox__input"
-                                          style={
-                                            Object {
-                                              "display": "inline-block",
-                                              "fontSize": 14,
-                                            }
-                                          }
-                                        >
-                                          <input
-                                            aria-controls=""
-                                            data-test-subj="comboBoxSearchInput"
-                                            id="axis-select-11"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            role="textbox"
-                                            style={
-                                              Object {
-                                                "boxSizing": "content-box",
-                                                "width": "2px",
-                                              }
-                                            }
-                                            value=""
-                                          />
-                                          <div
-                                            style={
-                                              Object {
-                                                "height": 0,
-                                                "left": 0,
-                                                "overflow": "scroll",
-                                                "position": "absolute",
-                                                "top": 0,
-                                                "visibility": "hidden",
-                                                "whiteSpace": "pre",
-                                              }
-                                            }
-                                          />
-                                        </div>
-                                      </AutosizeInput>
-                                    </div>
-                                    <EuiFormControlLayoutIcons
-                                      clear={
-                                        Object {
-                                          "data-test-subj": "comboBoxClearButton",
-                                          "onClick": [Function],
-                                        }
-                                      }
-                                      icon={
-                                        Object {
-                                          "aria-label": "Open list of options",
-                                          "data-test-subj": "comboBoxToggleListButton",
-                                          "disabled": undefined,
-                                          "onClick": [Function],
-                                          "ref": [Function],
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <EuiFormControlLayoutClearButton
-                                          data-test-subj="comboBoxClearButton"
-                                          onClick={[Function]}
-                                        >
-                                          <EuiI18n
-                                            default="Clear input"
-                                            token="euiFormControlLayoutClearButton.label"
-                                          >
-                                            <button
-                                              aria-label="Clear input"
-                                              className="euiFormControlLayoutClearButton"
-                                              data-test-subj="comboBoxClearButton"
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiIcon
-                                                className="euiFormControlLayoutClearButton__icon"
-                                                type="cross"
-                                              >
-                                                <EuiIconCross
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
-                                                    />
-                                                  </svg>
-                                                </EuiIconCross>
-                                              </EuiIcon>
-                                            </button>
-                                          </EuiI18n>
-                                        </EuiFormControlLayoutClearButton>
-                                        <EuiFormControlLayoutCustomIcon
-                                          aria-label="Open list of options"
-                                          data-test-subj="comboBoxToggleListButton"
-                                          iconRef={[Function]}
-                                          onClick={[Function]}
-                                          type="arrowDown"
-                                        >
-                                          <button
-                                            aria-label="Open list of options"
-                                            className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                            data-test-subj="comboBoxToggleListButton"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconArrowDown
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
-                                                  />
-                                                </svg>
-                                              </EuiIconArrowDown>
-                                            </EuiIcon>
-                                          </button>
-                                        </EuiFormControlLayoutCustomIcon>
-                                      </div>
-                                    </EuiFormControlLayoutIcons>
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiComboBoxInput>
-                          </div>
-                        </EuiComboBox>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent="Advanced"
-                          id="accordion1"
-                          initialIsOpen={false}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion"
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="accordion1"
-                                aria-expanded={false}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <EuiIconArrowRight
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiAccordion__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiAccordion__icon"
-                                        focusable="false"
-                                        height={16}
-                                        role="img"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
-                                          fillRule="nonzero"
-                                        />
-                                      </svg>
-                                    </EuiIconArrowRight>
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
-                                >
-                                  Advanced
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="accordion1"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className=""
-                                  >
-                                    <EuiPanel
-                                      color="subdued"
-                                    >
-                                      <div
-                                        className="euiPanel euiPanel--paddingMedium"
-                                        color="subdued"
-                                      >
-                                        here goes advanced setting
-                                      </div>
-                                    </EuiPanel>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </div>
-                    </EuiPanel>
-                  </PanelItem>
-                  <EuiSpacer
-                    size="s"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--s"
-                    />
-                  </EuiSpacer>
-                </section>
-                <section
-                  key="vis-conf-panel-10"
-                >
-                  <PanelItem
-                    advancedTitle="Advanced"
-                    dropdownList={Array []}
-                    paddingTitle="Y-axis"
-                  >
-                    <EuiPanel
-                      paddingSize="m"
-                    >
-                      <div
-                        className="euiPanel euiPanel--paddingMedium"
-                      >
-                        <EuiTitle
-                          size="xxs"
-                        >
-                          <h3
-                            className="euiTitle euiTitle--xxsmall"
-                          >
-                            Y-axis
-                          </h3>
-                        </EuiTitle>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiComboBox
-                          aria-label="Use aria labels when no actual label is in use"
-                          async={false}
-                          compressed={false}
-                          fullWidth={false}
-                          id="axis-select-12"
-                          isClearable={true}
-                          onChange={[Function]}
-                          options={Array []}
-                          placeholder="Select a field"
-                          selectedOptions={Array []}
-                          singleSelection={
-                            Object {
-                              "asPlainText": true,
-                            }
-                          }
-                          sortMatchesBy="none"
-                        >
-                          <div
-                            aria-expanded={false}
-                            aria-haspopup="listbox"
-                            aria-label="Use aria labels when no actual label is in use"
-                            className="euiComboBox"
-                            onKeyDown={[Function]}
-                            role="combobox"
-                          >
-                            <EuiComboBoxInput
-                              autoSizeInputRef={[Function]}
-                              compressed={false}
-                              fullWidth={false}
-                              hasSelectedOptions={false}
-                              id="axis-select-12"
-                              inputRef={[Function]}
-                              isListOpen={false}
-                              noIcon={false}
-                              onChange={[Function]}
-                              onClear={[Function]}
-                              onClick={[Function]}
-                              onCloseListClick={[Function]}
-                              onFocus={[Function]}
-                              onOpenListClick={[Function]}
-                              onRemoveOption={[Function]}
-                              placeholder="Select a field"
-                              rootId={[Function]}
-                              searchValue=""
-                              selectedOptions={Array []}
-                              singleSelection={
-                                Object {
-                                  "asPlainText": true,
-                                }
-                              }
-                              toggleButtonRef={[Function]}
-                              updatePosition={[Function]}
-                              value=""
-                            >
-                              <EuiFormControlLayout
-                                compressed={false}
-                                fullWidth={false}
-                                icon={
-                                  Object {
-                                    "aria-label": "Open list of options",
-                                    "data-test-subj": "comboBoxToggleListButton",
-                                    "disabled": undefined,
-                                    "onClick": [Function],
-                                    "ref": [Function],
-                                    "side": "right",
-                                    "type": "arrowDown",
-                                  }
-                                }
-                              >
-                                <div
-                                  className="euiFormControlLayout"
-                                >
-                                  <div
-                                    className="euiFormControlLayout__childrenWrapper"
-                                  >
-                                    <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
-                                      data-test-subj="comboBoxInput"
-                                      onClick={[Function]}
-                                      tabIndex={-1}
-                                    >
-                                      <p
-                                        className="euiComboBoxPlaceholder"
-                                      >
-                                        Select a field
-                                      </p>
-                                      <AutosizeInput
-                                        aria-controls=""
-                                        className="euiComboBox__input"
-                                        data-test-subj="comboBoxSearchInput"
-                                        id="axis-select-12"
-                                        injectStyles={true}
-                                        inputRef={[Function]}
-                                        minWidth={1}
-                                        onBlur={[Function]}
-                                        onChange={[Function]}
-                                        onFocus={[Function]}
-                                        role="textbox"
-                                        style={
-                                          Object {
-                                            "fontSize": 14,
-                                          }
-                                        }
-                                        value=""
-                                      >
-                                        <div
-                                          className="euiComboBox__input"
-                                          style={
-                                            Object {
-                                              "display": "inline-block",
-                                              "fontSize": 14,
-                                            }
-                                          }
-                                        >
-                                          <input
-                                            aria-controls=""
-                                            data-test-subj="comboBoxSearchInput"
-                                            id="axis-select-12"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            role="textbox"
-                                            style={
-                                              Object {
-                                                "boxSizing": "content-box",
-                                                "width": "2px",
-                                              }
-                                            }
-                                            value=""
-                                          />
-                                          <div
-                                            style={
-                                              Object {
-                                                "height": 0,
-                                                "left": 0,
-                                                "overflow": "scroll",
-                                                "position": "absolute",
-                                                "top": 0,
-                                                "visibility": "hidden",
-                                                "whiteSpace": "pre",
-                                              }
-                                            }
-                                          />
-                                        </div>
-                                      </AutosizeInput>
-                                    </div>
-                                    <EuiFormControlLayoutIcons
-                                      icon={
-                                        Object {
-                                          "aria-label": "Open list of options",
-                                          "data-test-subj": "comboBoxToggleListButton",
-                                          "disabled": undefined,
-                                          "onClick": [Function],
-                                          "ref": [Function],
-                                          "side": "right",
-                                          "type": "arrowDown",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                      >
-                                        <EuiFormControlLayoutCustomIcon
-                                          aria-label="Open list of options"
-                                          data-test-subj="comboBoxToggleListButton"
-                                          iconRef={[Function]}
-                                          onClick={[Function]}
-                                          type="arrowDown"
-                                        >
-                                          <button
-                                            aria-label="Open list of options"
-                                            className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                            data-test-subj="comboBoxToggleListButton"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <EuiIcon
-                                              aria-hidden="true"
-                                              className="euiFormControlLayoutCustomIcon__icon"
-                                              type="arrowDown"
-                                            >
-                                              <EuiIconArrowDown
-                                                aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                focusable="false"
-                                                role="img"
-                                                style={null}
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                  focusable="false"
-                                                  height={16}
-                                                  role="img"
-                                                  style={null}
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
-                                                    fillRule="non-zero"
-                                                  />
-                                                </svg>
-                                              </EuiIconArrowDown>
-                                            </EuiIcon>
-                                          </button>
-                                        </EuiFormControlLayoutCustomIcon>
-                                      </div>
-                                    </EuiFormControlLayoutIcons>
-                                  </div>
-                                </div>
-                              </EuiFormControlLayout>
-                            </EuiComboBoxInput>
-                          </div>
-                        </EuiComboBox>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent="Advanced"
-                          id="accordion1"
-                          initialIsOpen={false}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="none"
-                        >
-                          <div
-                            className="euiAccordion"
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="accordion1"
-                                aria-expanded={false}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
-                                >
-                                  <EuiIcon
-                                    className="euiAccordion__icon"
-                                    size="m"
-                                    type="arrowRight"
-                                  >
-                                    <EuiIconArrowRight
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiAccordion__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiAccordion__icon"
-                                        focusable="false"
-                                        height={16}
-                                        role="img"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
-                                          fillRule="nonzero"
-                                        />
-                                      </svg>
-                                    </EuiIconArrowRight>
-                                  </EuiIcon>
-                                </span>
-                                <span
-                                  className="euiIEFlexWrapFix"
-                                >
-                                  Advanced
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              className="euiAccordion__childWrapper"
-                              id="accordion1"
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className=""
-                                  >
-                                    <EuiPanel
-                                      color="subdued"
-                                    >
-                                      <div
-                                        className="euiPanel euiPanel--paddingMedium"
-                                        color="subdued"
-                                      >
-                                        here goes advanced setting
-                                      </div>
-                                    </EuiPanel>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </div>
-                    </EuiPanel>
-                  </PanelItem>
-                  <EuiSpacer
-                    size="s"
-                  >
-                    <div
-                      className="euiSpacer euiSpacer--s"
-                    />
-                  </EuiSpacer>
-                </section>
-              </div>
-            </EuiForm>
-          </ConfigPanelItems>
-        </div>
-      </div>
-    </EuiTabbedContent>
-  </LayerPanels>
-</Memo(ConfigPanelWrapper)>
-`;
diff --git a/dashboards-observability/public/components/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx b/dashboards-observability/public/components/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx
deleted file mode 100644
index 24f76212a..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import React from 'react';
-import { waitFor } from '@testing-library/react';
-// import { ConfigPanel } from '../config_panel';
-import {
-  SELECTED_FIELDS,
-  AVAILABLE_FIELDS,
-  UNSELECTED_FIELDS,
-  QUERIED_FIELDS,
-} from '../../../../../../common/constants/explorer';
-import {
-  AVAILABLE_FIELDS as SIDEBAR_AVAILABLE_FIELDS,
-  QUERY_FIELDS,
-} from '../../../../../../test/event_analytics_constants';
-
-describe.skip('Config panel component', () => {
-  configure({ adapter: new Adapter() });
-
-  it('Renders empty config panel wrapper component', async () => {
-    const wrapper = mount(<ConfigPanel />);
-
-    wrapper.update();
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  it('Renders config panel wrapper component with fields', async () => {
-    const explorerFields = {
-      [SELECTED_FIELDS]: [],
-      [UNSELECTED_FIELDS]: [],
-      [AVAILABLE_FIELDS]: SIDEBAR_AVAILABLE_FIELDS,
-      [QUERIED_FIELDS]: QUERY_FIELDS,
-    };
-
-    const wrapper = mount(<ConfigPanel explorerFields={explorerFields} />);
-
-    wrapper.update();
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  it('Renders panel item component', async () => {
-    const explorerFields = {
-      [SELECTED_FIELDS]: [],
-      [UNSELECTED_FIELDS]: [],
-      [AVAILABLE_FIELDS]: SIDEBAR_AVAILABLE_FIELDS,
-      [QUERIED_FIELDS]: QUERY_FIELDS,
-    };
-
-    const wrapper = mount(<ConfigPanel explorerFields={explorerFields} />);
-
-    wrapper.update();
-
-    await waitFor(() => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});
diff --git a/dashboards-observability/public/components/explorer/visualizations/datapanel.scss b/dashboards-observability/public/components/explorer/visualizations/datapanel.scss
deleted file mode 100644
index 9e97b1058..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/datapanel.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.lnsInnerIndexPatternDataPanel {
-  width: 100%;
-  height: 100%;
-  padding: $euiSize $euiSize 0;
-}
-
-.lnsInnerIndexPatternDataPanel__header {
-  display: flex;
-  align-items: center;
-  margin-bottom: $euiSizeS;
-}
-
-.lnsInnerIndexPatternDataPanel__fieldItems {
-  // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
-  padding: $euiSizeXS;
-}
-
-.lnsInnerIndexPatternDataPanel__textField {
-  @include euiFormControlLayoutPadding(1, 'right');
-  @include euiFormControlLayoutPadding(1, 'left');
-}
-
-.lnsInnerIndexPatternDataPanel__filterType {
-  font-size: $euiFontSizeS;
-  padding: $euiSizeS;
-  border-bottom: 1px solid $euiColorLightestShade;
-}
-
-.lnsInnerIndexPatternDataPanel__filterTypeInner {
-  display: flex;
-  align-items: center;
-
-  .lnsFieldListPanel__fieldIcon {
-    margin-right: $euiSizeS;
-  }
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/datapanel.tsx b/dashboards-observability/public/components/explorer/visualizations/datapanel.tsx
deleted file mode 100644
index deccff299..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/datapanel.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './datapanel.scss';
-import './field_item.scss';
-import React, { useState } from 'react';
-import _ from 'lodash';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormControlLayout,
-  EuiSpacer
-} from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-import { FieldList } from './fieldList';
-
-export const DataPanel = (props: any) => {
-
-  const fields = props.explorerFields?.availableFields;
-
-  const [searchTerm, setSearchTerm] = useState<string>('');
-
-  return (
-    <EuiFlexGroup
-      gutterSize="none"
-      className="lnsInnerIndexPatternDataPanel"
-      direction="column"
-      responsive={false}
-    >
-      <EuiFlexItem grow={false}>
-        <EuiFormControlLayout
-          icon="search"
-          fullWidth
-          clear={{
-            title: i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
-              defaultMessage: 'Clear name and type filters',
-            }),
-            'aria-label': i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
-              defaultMessage: 'Clear name and type filters',
-            }),
-            onClick: () => {},
-          }}
-        >
-          <input
-            className="euiFieldText euiFieldText--fullWidth lnsInnerIndexPatternDataPanel__textField"
-            data-test-subj="lnsIndexPatternFieldSearch"
-            placeholder={i18n.translate('xpack.lens.indexPatterns.filterByNameLabel', {
-              defaultMessage: 'Search field names',
-              description: 'Search the list of fields in the index pattern for the provided text',
-            })}
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-            }}
-            aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', {
-              defaultMessage: 'Search fields',
-            })}
-          />
-        </EuiFormControlLayout>
-        <EuiSpacer size="m" />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <FieldList
-          id={_.uniqueId()}
-          fields={ fields?.filter((field) => searchTerm === '' || field.name.indexOf(searchTerm) !== -1) }
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-}
\ No newline at end of file
diff --git a/dashboards-observability/public/components/explorer/visualizations/drag_drop/drag_drop.scss b/dashboards-observability/public/components/explorer/visualizations/drag_drop/drag_drop.scss
deleted file mode 100644
index cc5399d13..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/drag_drop/drag_drop.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@import '../variables';
-@import '../mixins';
-
-.lnsDragDrop {
-  transition: background-color $euiAnimSpeedFast ease-in-out, border-color $euiAnimSpeedFast ease-in-out;
-}
-
-// Draggable item
-.lnsDragDrop-isDraggable {
-  @include lnsDraggable;
-  @include lnsDragDropHover;
-
-  // Include a possible nested button like when using FieldButton
-  > .kbnFieldButton__button {
-    cursor: grab;
-  }
-
-  &:focus {
-    @include euiFocusRing;
-  }
-}
-
-// Draggable item when it is moving
-.lnsDragDrop-isHidden {
-  opacity: 0;
-}
-
-// Drop area
-.lnsDragDrop-isDroppable {
-  @include lnsDroppable;
-}
-
-// Drop area when there's an item being dragged
-.lnsDragDrop-isDropTarget {
-  @include lnsDroppableActive;
-}
-
-// Drop area while hovering with item
-.lnsDragDrop-isActiveDropTarget {
-  @include lnsDroppableActiveHover;
-}
-
-// Drop area that is not allowed for current item
-.lnsDragDrop-isNotDroppable {
-  @include lnsDroppableNotAllowed;
-}
-
-// Drop area will be replacing existing content
-.lnsDragDrop-isReplacing {
-  &,
-  .lnsLayerPanel__triggerLink {
-    text-decoration: line-through;
-  }
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/drag_drop/drag_drop.tsx b/dashboards-observability/public/components/explorer/visualizations/drag_drop/drag_drop.tsx
deleted file mode 100644
index 2d47eb175..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/drag_drop/drag_drop.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './drag_drop.scss';
-
-import React, { useState, useContext } from 'react';
-import classNames from 'classnames';
-import { DragContext } from './providers';
-// import { trackUiEvent } from '../lens_ui_telemetry';
-
-type DroppableEvent = React.DragEvent<HTMLElement>;
-
-/**
- * A function that handles a drop event.
- */
-export type DropHandler = (item: unknown) => void;
-
-/**
- * The base props to the DragDrop component.
- */
-interface BaseProps {
-  /**
-   * The CSS class(es) for the root element.
-   */
-  className?: string;
-
-  /**
-   * The event handler that fires when an item
-   * is dropped onto this DragDrop component.
-   */
-  onDrop?: DropHandler;
-
-  /**
-   * The value associated with this item, if it is draggable.
-   * If this component is dragged, this will be the value of
-   * "dragging" in the root drag/drop context.
-   */
-  value?: unknown;
-
-  /**
-   * Optional comparison function to check whether a value is the dragged one
-   */
-  isValueEqual?: (value1: unknown, value2: unknown) => boolean;
-
-  /**
-   * The React element which will be passed the draggable handlers
-   */
-  children: React.ReactElement;
-
-  /**
-   * Indicates whether or not the currently dragged item
-   * can be dropped onto this component.
-   */
-  droppable?: boolean;
-
-  /**
-   * Additional class names to apply when another element is over the drop target
-   */
-  getAdditionalClassesOnEnter?: () => string;
-
-  /**
-   * The optional test subject associated with this DOM element.
-   */
-  'data-test-subj'?: string;
-
-  /**
-   * Indicates to the user whether the currently dragged item
-   * will be moved or copied
-   */
-  dragType?: 'copy' | 'move';
-
-  /**
-   * Indicates to the user whether the drop action will
-   * replace something that is existing or add a new one
-   */
-  dropType?: 'add' | 'replace';
-}
-
-/**
- * The props for a draggable instance of that component.
- */
-interface DraggableProps extends BaseProps {
-  /**
-   * Indicates whether or not this component is draggable.
-   */
-  draggable: true;
-  /**
-   * The label, which should be attached to the drag event, and which will e.g.
-   * be used if the element will be dropped into a text field.
-   */
-  label: string;
-}
-
-/**
- * The props for a non-draggable instance of that component.
- */
-interface NonDraggableProps extends BaseProps {
-  /**
-   * Indicates whether or not this component is draggable.
-   */
-  draggable?: false;
-}
-
-type Props = DraggableProps | NonDraggableProps;
-
-/**
- * A draggable / droppable item. Items can be both draggable and droppable at
- * the same time.
- *
- * @param props
- */
-
-export const DragDrop = (props: Props) => {
-  const { dragging, setDragging } = useContext(DragContext);
-  const { value, draggable, droppable, isValueEqual } = props;
-  return (
-    <DragDropInner
-      {...props}
-      dragging={droppable ? dragging : undefined}
-      isDragging={
-        !!(draggable && ((isValueEqual && isValueEqual(value, dragging)) || value === dragging))
-      }
-      isNotDroppable={
-        // If the configuration has provided a droppable flag, but this particular item is not
-        // droppable, then it should be less prominent. Ignores items that are both
-        // draggable and drop targets
-        droppable === false && Boolean(dragging) && value !== dragging
-      }
-      setDragging={setDragging}
-    />
-  );
-};
-
-const DragDropInner = React.memo(function DragDropInner(
-  props: Props & {
-    dragging: unknown;
-    setDragging: (dragging: unknown) => void;
-    isDragging: boolean;
-    isNotDroppable: boolean;
-  }
-) {
-  const [state, setState] = useState({
-    isActive: false,
-    dragEnterClassNames: '',
-  });
-  const {
-    className,
-    onDrop,
-    value,
-    children,
-    droppable,
-    draggable,
-    dragging,
-    setDragging,
-    isDragging,
-    isNotDroppable,
-    dragType = 'copy',
-    dropType = 'add',
-  } = props;
-
-  const isMoveDragging = isDragging && dragType === 'move';
-
-  const classes = classNames(
-    'lnsDragDrop',
-    {
-      'lnsDragDrop-isDraggable': draggable,
-      'lnsDragDrop-isDragging': isDragging,
-      'lnsDragDrop-isHidden': isMoveDragging,
-      'lnsDragDrop-isDroppable': !draggable,
-      'lnsDragDrop-isDropTarget': droppable,
-      'lnsDragDrop-isActiveDropTarget': droppable && state.isActive,
-      'lnsDragDrop-isNotDroppable': !isMoveDragging && isNotDroppable,
-      'lnsDragDrop-isReplacing': droppable && state.isActive && dropType === 'replace',
-    },
-    className,
-    state.dragEnterClassNames
-  );
-
-  const dragStart = (e: DroppableEvent) => {
-    // Setting stopPropgagation causes Chrome failures, so
-    // we are manually checking if we've already handled this
-    // in a nested child, and doing nothing if so...
-    if (e.dataTransfer.getData('text')) {
-      return;
-    }
-
-    // We only can reach the dragStart method if the element is draggable,
-    // so we know we have DraggableProps if we reach this code.
-    e.dataTransfer.setData('text', (props as DraggableProps).label);
-
-    // Chrome causes issues if you try to render from within a
-    // dragStart event, so we drop a setTimeout to avoid that.
-    setTimeout(() => setDragging(value));
-  };
-
-  const dragEnd = (e: DroppableEvent) => {
-    e.stopPropagation();
-    setDragging(undefined);
-  };
-
-  const dragOver = (e: DroppableEvent) => {
-    if (!droppable) {
-      return;
-    }
-
-    e.preventDefault();
-
-    // An optimization to prevent a bunch of React churn.
-    if (!state.isActive) {
-      setState({
-        ...state,
-        isActive: true,
-        dragEnterClassNames: props.getAdditionalClassesOnEnter
-          ? props.getAdditionalClassesOnEnter()
-          : '',
-      });
-    }
-  };
-
-  const dragLeave = () => {
-    setState({ ...state, isActive: false, dragEnterClassNames: '' });
-  };
-
-  const drop = (e: DroppableEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setState({ ...state, isActive: false, dragEnterClassNames: '' });
-    setDragging(undefined);
-
-    if (onDrop && droppable) {
-      // trackUiEvent('drop_total');
-      onDrop(dragging);
-    }
-  };
-
-  return React.cloneElement(children, {
-    'data-test-subj': props['data-test-subj'] || 'lnsDragDrop',
-    className: classNames(children.props.className, classes),
-    onDragOver: dragOver,
-    onDragLeave: dragLeave,
-    onDrop: drop,
-    draggable,
-    onDragEnd: dragEnd,
-    onDragStart: dragStart,
-  });
-});
diff --git a/dashboards-observability/public/components/explorer/visualizations/drag_drop/index.ts b/dashboards-observability/public/components/explorer/visualizations/drag_drop/index.ts
deleted file mode 100644
index e2a5489cd..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/drag_drop/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-export * from './providers';
-export * from './drag_drop';
diff --git a/dashboards-observability/public/components/explorer/visualizations/drag_drop/providers.tsx b/dashboards-observability/public/components/explorer/visualizations/drag_drop/providers.tsx
deleted file mode 100644
index d5105277b..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/drag_drop/providers.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useState, useMemo } from 'react';
-
-/**
- * The shape of the drag / drop context.
- */
-export interface DragContextState {
-  /**
-   * The item being dragged or undefined.
-   */
-  dragging: unknown;
-
-  /**
-   * Set the item being dragged.
-   */
-  setDragging: (dragging: unknown) => void;
-}
-
-/**
- * The drag / drop context singleton, used like so:
- *
- * const { dragging, setDragging } = useContext(DragContext);
- */
-export const DragContext = React.createContext<DragContextState>({
-  dragging: undefined,
-  setDragging: () => {},
-});
-
-/**
- * The argument to DragDropProvider.
- */
-export interface ProviderProps {
-  /**
-   * The item being dragged. If unspecified, the provider will
-   * behave as if it is the root provider.
-   */
-  dragging: unknown;
-
-  /**
-   * Sets the item being dragged. If unspecified, the provider
-   * will behave as if it is the root provider.
-   */
-  setDragging: (dragging: unknown) => void;
-
-  /**
-   * The React children.
-   */
-  children: React.ReactNode;
-}
-
-/**
- * A React provider that tracks the dragging state. This should
- * be placed at the root of any React application that supports
- * drag / drop.
- *
- * @param props
- */
-export function RootDragDropProvider({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState<{ dragging: unknown }>({
-    dragging: undefined,
-  });
-  const setDragging = useMemo(() => (dragging: unknown) => setState({ dragging }), [setState]);
-
-  return (
-    <ChildDragDropProvider dragging={state.dragging} setDragging={setDragging}>
-      {children}
-    </ChildDragDropProvider>
-  );
-}
-
-/**
- * A React drag / drop provider that derives its state from a RootDragDropProvider. If
- * part of a React application is rendered separately from the root, this provider can
- * be used to enable drag / drop functionality within the disconnected part.
- *
- * @param props
- */
-export function ChildDragDropProvider({ dragging, setDragging, children }: ProviderProps) {
-  const value = useMemo(() => ({ dragging, setDragging }), [setDragging, dragging]);
-  return <DragContext.Provider value={value}>{children}</DragContext.Provider>;
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/drag_drop/readme.md b/dashboards-observability/public/components/explorer/visualizations/drag_drop/readme.md
deleted file mode 100644
index 8d11cb622..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/drag_drop/readme.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Drag / Drop
-
-This is a simple drag / drop mechanism that plays nice with React.
-
-We aren't using EUI or another library, due to the fact that Lens visualizations and datasources may or may not be written in React. Even visualizations which are written in React will end up having their own ReactDOM.render call, and in that sense will be a standalone React application. We want to enable drag / drop across React and native DOM boundaries.
-
-## Getting started
-
-First, place a RootDragDropProvider at the root of your application.
-
-```js
-<RootDragDropProvider>
-  ... your app here ...
-</RootDragDropProvider>
-```
-
-If you have a child React application (e.g. a visualization), you will need to pass the drag / drop context down into it. This can be obtained like so:
-
-```js
-const context = useContext(DragContext);
-```
-
-In your child application, place a `ChildDragDropProvider` at the root of that, and spread the context into it:
-
-```js
-<ChildDragDropProvider {...context}>
-  ... your child app here ...
-</ChildDragDropProvider>
-```
-
-This enables your child application to share the same drag / drop context as the root application.
-
-## Dragging
-
-An item can be both draggable and droppable at the same time, but for simplicity's sake, we'll treat these two cases separately.
-
-To enable dragging an item, use `DragDrop` with both a `draggable` and a `value` attribute.
-
-```js
-<div className="field-list">
-  {fields.map(f => (
-    <DragDrop key={f.id} className="field-list-item" value={f} draggable>
-      {f.name}
-    </DragDrop>
-  ))}
-</div>
-```
-
-## Dropping
-
-To enable dropping, use `DragDrop` with both a `droppable` attribute and an `onDrop` handler attribute. Droppable should only be set to true if there is an item being dragged, and if a drop of the dragged item is supported.
-
-```js
-const { dragging } = useContext(DragContext);
-  
-return (
-  <DragDrop
-    className="axis"
-    droppable={dragging && canHandleDrop(dragging)}
-    onDrop={item => onChange([...items, item])}
-  >
-    {items.map(x => <div>{x.name}</div>)}
-  </DragDrop>
-);
-```
-
-## Limitations
-
-Currently this is a very simple drag / drop mechanism. We don't support reordering out of the box, though it could probably be built on top of this solution without modification of the core.
diff --git a/dashboards-observability/public/components/explorer/visualizations/fieldList.tsx b/dashboards-observability/public/components/explorer/visualizations/fieldList.tsx
deleted file mode 100644
index 0375cd680..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/fieldList.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { FieldsAccordion } from './fields_accordion';
-
-export const FieldList = (
-  {
-    fields,
-    id
-  }: any
-) => {
-  
-  return (
-    <div
-      className="lnsIndexPatternFieldList"
-    >
-      <div className="lnsIndexPatternFieldList__accordionContainer">
-        {
-          <>
-            <FieldsAccordion
-              id={id}
-              paginatedFields={ fields || [] }
-              isFiltered={ false }
-              label={ "Available fields" }
-              showExistenceFetchError={ false }
-            />
-          </>
-        }
-      </div>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/dashboards-observability/public/components/explorer/visualizations/field_item.scss b/dashboards-observability/public/components/explorer/visualizations/field_item.scss
deleted file mode 100644
index 670884bb9..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/field_item.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.lnsFieldItem {
-  .lnsFieldItem__infoIcon {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &:hover:not([class*='isActive']) {
-    cursor: grab;
-
-    .lnsFieldItem__infoIcon {
-      visibility: visible;
-      opacity: 1;
-      transition: opacity $euiAnimSpeedFast ease-in-out 1s;
-    }
-  }
-}
-
-.lnsFieldItem--missing {
-  background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
-  color: $euiColorDarkShade;
-}
-
-.lnsFieldItem__topValue {
-  margin-bottom: $euiSizeS;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-}
-
-.lnsFieldItem__topValueProgress {
-  background-color: $euiColorLightestShade;
-
-  // sass-lint:disable-block no-vendor-prefixes
-  &::-webkit-progress-bar {
-    background-color: $euiColorLightestShade;
-  }
-}
-
-.lnsFieldItem__fieldPanel {
-  min-width: 260px;
-  max-width: 300px;
-}
-
-.lnsFieldItem__buttonGroup {
-  // Enforce lowercase for buttons or else some browsers inherit all caps from flyout title
-  text-transform: none;
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/field_item.tsx b/dashboards-observability/public/components/explorer/visualizations/field_item.tsx
deleted file mode 100644
index 0405b3df0..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/field_item.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './field_item.scss';
-
-import React, { useState } from 'react';
-import {
-  EuiIconTip,
-  EuiPopover
-} from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-import { EuiHighlight } from '@elastic/eui';
-import { FieldButton } from '../../common/field_button';
-import { DragDrop } from './drag_drop';
-import { LensFieldIcon } from './lens_field_icon';
-
-import { debouncedComponent } from '../../common/debounced_component';
-
-function wrapOnDot(str?: string) {
-  // u200B is a non-width white-space character, which allows
-  // the browser to efficiently word-wrap right after the dot
-  // without us having to draw a lot of extra DOM elements, etc
-  return str ? str.replace(/\./g, '.\u200B') : '';
-}
-
-export const InnerFieldItem = function InnerFieldItem(props: any) {
-  const {
-    field,
-    highlight,
-    exists,
-    hideDetails,
-  } = props;
-
-  const [infoIsOpen, setOpen] = useState(false);
-
-  function togglePopover() {}
-
-  const lensFieldIcon = <LensFieldIcon type={field.type} />;
-  const lensInfoIcon = (
-    <EuiIconTip
-      anchorClassName="lnsFieldItem__infoIcon"
-      content={
-        hideDetails
-          ? i18n.translate('xpack.lens.indexPattern.fieldItemTooltip', {
-              defaultMessage: 'Drag and drop to visualize.',
-            })
-          : exists
-          ? i18n.translate('xpack.lens.indexPattern.fieldStatsButtonLabel', {
-              defaultMessage: 'Click for a field preview, or drag and drop to visualize.',
-            })
-          : i18n.translate('xpack.lens.indexPattern.fieldStatsButtonEmptyLabel', {
-              defaultMessage:
-                'This field doesn’t have any data but you can still drag and drop to visualize.',
-            })
-      }
-      type="iInCircle"
-      color="subdued"
-      size="s"
-    />
-  );
-  return (
-    <EuiPopover
-      ownFocus
-      className="lnsFieldItem__popoverAnchor"
-      display="block"
-      data-test-subj="lnsFieldListPanelField"
-      container={document.querySelector<HTMLElement>('.application') || undefined}
-      button={
-        <DragDrop
-          label={field.displayName}
-          data-test-subj={`lnsFieldListPanelField-${field.name}`}
-          draggable
-        >
-          <FieldButton
-            className={`lnsFieldItem lnsFieldItem--${field.type} lnsFieldItem--${
-              exists ? 'exists' : 'missing'
-            }`}
-            isActive={infoIsOpen}
-            onClick={togglePopover}
-            aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButtonAriaLabel', {
-              defaultMessage: '{fieldName}: {fieldType}. Hit enter for a field preview.',
-              values: {
-                fieldName: field.displayName,
-                fieldType: field.type,
-              },
-            })}
-            fieldIcon={lensFieldIcon}
-            fieldName={
-              <EuiHighlight search={wrapOnDot(highlight)}>
-                {wrapOnDot(field.name)}
-              </EuiHighlight>
-            }
-            fieldInfoIcon={lensInfoIcon}
-          />
-        </DragDrop>
-      }
-      isOpen={infoIsOpen}
-      closePopover={() => setOpen(false)}
-      anchorPosition="rightUp"
-      panelClassName="lnsFieldItem__fieldPanel"
-    >
-    </EuiPopover>
-  );
-};
-
-export const FieldItem = debouncedComponent(InnerFieldItem);
diff --git a/dashboards-observability/public/components/explorer/visualizations/field_list.scss b/dashboards-observability/public/components/explorer/visualizations/field_list.scss
deleted file mode 100644
index 33faa8dfe..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/field_list.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * 1. Don't cut off the shadow of the field items
- */
-
-.lnsIndexPatternFieldList {
-  @include euiOverflowShadow;
-  @include euiScrollBar;
-  margin-left: -$euiSize; /* 1 */
-  position: relative;
-  flex-grow: 1;
-  overflow: auto;
-}
-
-.lnsIndexPatternFieldList__accordionContainer {
-  padding-top: $euiSizeS;
-  position: absolute;
-  top: 0;
-  left: $euiSize; /* 1 */
-  right: $euiSizeXS; /* 1 */
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/fields_accordion.tsx b/dashboards-observability/public/components/explorer/visualizations/fields_accordion.tsx
deleted file mode 100644
index 955558d3d..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/fields_accordion.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './datapanel.scss';
-import React, { memo, useCallback } from 'react';
-import { i18n } from '@osd/i18n';
-import {
-  EuiText,
-  EuiNotificationBadge,
-  EuiSpacer,
-  EuiAccordion,
-  EuiLoadingSpinner,
-  EuiIconTip,
-} from '@elastic/eui';
-import { FieldItem } from './field_item';
-
-export const InnerFieldsAccordion = function InnerFieldsAccordion({
-  id,
-  label,
-  isFiltered,
-  paginatedFields,
-  showExistenceFetchError,
-}: any) {
-  const renderField = useCallback(
-    (field) => (
-      <FieldItem 
-        exists={ true }
-        field={ field }
-        hideDetails={ false }
-        key={field.name}
-      />
-    ),
-    []
-  );
-
-  return (
-    <EuiAccordion
-      id={id}
-      buttonContent={
-        <EuiText size="xs">
-          <strong>{label}</strong>
-        </EuiText>
-      }
-      extraAction={
-        showExistenceFetchError ? (
-          <EuiIconTip
-            aria-label={i18n.translate('xpack.lens.indexPattern.existenceErrorAriaLabel', {
-              defaultMessage: 'Existence fetch failed',
-            })}
-            type="alert"
-            color="warning"
-            content={i18n.translate('xpack.lens.indexPattern.existenceErrorLabel', {
-              defaultMessage: "Field information can't be loaded",
-            })}
-          />
-        ) : true ? (
-          <EuiNotificationBadge size="m" color={isFiltered ? 'accent' : 'subdued'}>
-            {paginatedFields?.length}
-          </EuiNotificationBadge>
-        ) : (
-          <EuiLoadingSpinner size="m" />
-        )
-      }
-    >
-      <EuiSpacer size="s" />
-      <div className="lnsInnerIndexPatternDataPanel__fieldItems">
-        {paginatedFields && paginatedFields.map(renderField)}
-      </div>
-    </EuiAccordion>
-  );
-};
-
-export const FieldsAccordion = memo(InnerFieldsAccordion);
diff --git a/dashboards-observability/public/components/explorer/visualizations/frame_layout.scss b/dashboards-observability/public/components/explorer/visualizations/frame_layout.scss
deleted file mode 100644
index 8d07d5a0a..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/frame_layout.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-$lnsPanelMinWidth: $euiSize * 18;
-
-// These sizes also match canvas' page thumbnails for consistency
-$lnsSuggestionHeight: 100px;
-$lnsSuggestionWidth: 150px;
-
-.lnsFrameLayout {
-  padding: 0;
-  // position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  flex-direction: column;
-}
-
-.lnsFrameLayout__pageContent {
-  display: flex;
-  overflow: hidden;
-  flex-grow: 1;
-}
-
-.lnsFrameLayout__pageBody {
-  @include euiScrollBar;
-  min-width: $lnsPanelMinWidth + $euiSizeXL;
-  max-height: 100%;
-  overflow: hidden auto;
-  // Leave out bottom padding so the suggestions scrollbar stays flush to window edge
-  // Leave out left padding so the left sidebar's focus states are visible outside of content bounds
-  // This also means needing to add same amount of margin to page content and suggestion items
-  padding: $euiSize $euiSize 0;
-
-  &:first-child {
-    padding-left: $euiSize;
-  }
-}
-
-.lnsFrameLayout__sidebar {
-  margin: 0 16px 0;
-  flex: 1 0 18%;
-  min-width: $lnsPanelMinWidth + $euiSize;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.lnsFrameLayout__sidebar--right {
-  flex-basis: 25%;
-  background-color: lightOrDarkTheme($euiColorLightestShade, $euiColorInk);
-  min-width: $lnsPanelMinWidth + $euiSizeXL;
-  max-width: $euiFormMaxWidth + $euiSizeXXL;
-  max-height: 100%;
-
-  .lnsConfigPanel {
-    @include euiScrollBar;
-    padding: $euiSize 0 $euiSize $euiSize;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/frame_layout.tsx b/dashboards-observability/public/components/explorer/visualizations/frame_layout.tsx
deleted file mode 100644
index 86781b213..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/frame_layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './frame_layout.scss';
-
-import React from 'react';
-import { EuiPage, EuiPageSideBar, EuiPageBody } from '@elastic/eui';
-
-export interface FrameLayoutProps {
-  dataPanel: React.ReactNode;
-  configPanel?: React.ReactNode;
-  suggestionsPanel?: React.ReactNode;
-  workspacePanel?: React.ReactNode;
-}
-
-export function FrameLayout(props: FrameLayoutProps) {
-  return (
-    <EuiPage className="lnsFrameLayout">
-      <div className="lnsFrameLayout__pageContent">
-        <EuiPageBody className="lnsFrameLayout__pageBody" restrictWidth={false}>
-          {props.workspacePanel}
-        </EuiPageBody>
-        <EuiPageBody className="lnsFrameLayout__pageBody" restrictWidth={false}>
-          {props.configPanel}
-        </EuiPageBody>
-      </div>
-    </EuiPage>
-  );
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/lens_field_icon.tsx b/dashboards-observability/public/components/explorer/visualizations/lens_field_icon.tsx
deleted file mode 100644
index 59c947bce..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/lens_field_icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { FieldIcon } from '../../common/field_icon';
-export function LensFieldIcon({ type, ...rest }) {
-  return (
-    <FieldIcon
-      className="lnsFieldListPanel__fieldIcon"
-      type={normalizeOperationDataType(type)}
-      {...rest}
-    />
-  );
-}
-
-export function normalizeOperationDataType(type) {
-  return type === 'document' ? 'number' : type;
-}
diff --git a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/chart_switch.scss b/dashboards-observability/public/components/explorer/visualizations/workspace_panel/chart_switch.scss
deleted file mode 100644
index 4c90496cd..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/chart_switch.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.lnsChartSwitch__header {
-  > * {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.lnsChartSwitch__summaryIcon {
-  margin-right: $euiSizeS;
-  transform: translateY(-1px);
-  color: $euiTextSubduedColor;
-}
-
-// Targeting img as this won't target normal EuiIcon's only the custom svgs's
-img.lnsChartSwitch__chartIcon { // sass-lint:disable-line no-qualifying-elements
-  // The large icons aren't square so max out the width to fill the height
-  width: 100%;
-}
-
-.lnsChartSwitch__search {
-  width: 4 * $euiSizeXXL;
-}
\ No newline at end of file
diff --git a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/chart_switch.tsx b/dashboards-observability/public/components/explorer/visualizations/workspace_panel/chart_switch.tsx
deleted file mode 100644
index 4d96e88df..000000000
--- a/dashboards-observability/public/components/explorer/visualizations/workspace_panel/chart_switch.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import './chart_switch.scss';
-
-import React, { useState } from 'react';
-import { i18n } from '@osd/i18n';
-import {
-  EuiPopover,
-  EuiPopoverTitle,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiKeyPadMenu,
-  EuiKeyPadMenuItem,
-  EuiIcon,
-} from '@elastic/eui';
-import { ToolbarButton } from '../shared_components/toolbar_button';
-import { getPlotlyCategory } from '../../../visualizations/charts/shared/shared_configs';
-
-function VisualizationSummary(vis: any) {
-  return (
-    <>
-      <EuiIcon size="l" className="lnsChartSwitch__summaryIcon" type={vis.icon} />
-      {vis.label}
-    </>
-  );
-}
-
-const VIS_CATEGORY = getPlotlyCategory('list');
-
-export const ChartSwitch = ({ setVis, vis, visualizationTypes }: any) => {
-  const [flyoutOpen, setFlyoutOpen] = useState<boolean>(false);
-
-  const popoverWrappedSwitch = (
-    <EuiPopover
-      id="lnsChartSwitchPopover"
-      ownFocus
-      initialFocus=".lnsChartSwitch__popoverPanel"
-      panelClassName="lnsChartSwitch__popoverPanel"
-      panelPaddingSize="s"
-      button={
-        <ToolbarButton
-          onClick={() => setFlyoutOpen(!flyoutOpen)}
-          data-test-subj="lnsChartSwitchPopover"
-          fontWeight="bold"
-        >
-          <VisualizationSummary {...vis} />
-        </ToolbarButton>
-      }
-      isOpen={flyoutOpen}
-      closePopover={() => setFlyoutOpen(false)}
-      anchorPosition="downLeft"
-    >
-      {VIS_CATEGORY.map((vis_category) => {
-        return (
-          <>
-            <EuiPopoverTitle>
-              <EuiFlexGroup alignItems="center" responsive={false}>
-                <EuiFlexItem>
-                  {i18n.translate('xpack.lens.configPanel.chartType', {
-                    defaultMessage: `${vis_category}`,
-                  })}
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPopoverTitle>
-            <EuiKeyPadMenu>
-              {visualizationTypes
-                .filter((v) => vis_category === v.category)
-                .map((v) => (
-                  <EuiKeyPadMenuItem
-                    key={`${v.visualizationId}:${v.id}`}
-                    label={<span data-test-subj="visTypeTitle">{v.label}</span>}
-                    title={v.fullLabel}
-                    role="menuitem"
-                    data-test-subj={`lnsChartSwitchPopover_${v.id}`}
-                    onClick={() => {
-                      setVis(v.id);
-                      setFlyoutOpen(false);
-                    }}
-                    betaBadgeLabel={
-                      v.selection.dataLoss !== 'nothing'
-                        ? i18n.translate('xpack.lens.chartSwitch.dataLossLabel', {
-                            defaultMessage: 'Data loss',
-                          })
-                        : undefined
-                    }
-                    betaBadgeTooltipContent={
-                      v.selection.dataLoss !== 'nothing'
-                        ? i18n.translate('xpack.lens.chartSwitch.dataLossDescription', {
-                            defaultMessage:
-                              'Switching to this chart will lose some of the configuration',
-                          })
-                        : undefined
-                    }
-                    betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined}
-                  >
-                    <EuiIcon
-                      className="lnsChartSwitch__chartIcon"
-                      type={v.icon || 'empty'}
-                      size="l"
-                    />
-                  </EuiKeyPadMenuItem>
-                ))}
-            </EuiKeyPadMenu>
-          </>
-        );
-      })}
-    </EuiPopover>
-  );
-
-  return <div className="lnsChartSwitch__header">{popoverWrappedSwitch}</div>;
-};
diff --git a/dashboards-observability/public/components/trace_analytics/components/common/legacy_route_helpers.ts b/dashboards-observability/public/components/trace_analytics/components/common/legacy_route_helpers.ts
new file mode 100644
index 000000000..139456bf5
--- /dev/null
+++ b/dashboards-observability/public/components/trace_analytics/components/common/legacy_route_helpers.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { observabilityID } from "../../../../../common/constants/shared";
+
+export const convertLegacyTraceAnalyticsUrl = (location: Location)=> {
+  const pathname = location.pathname.replace('trace-analytics-dashboards', observabilityID);
+  const hash = `#/trace_analytics${location.hash.replace(/^#/, '/home')}${
+    location.hash.includes('?') ? location.search.replace(/^\?/, '&') : location.search
+  }`;
+  return pathname + hash;
+};
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index 9a16cf5d6..a9ebf70b0 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Bar component Renders bar component 1`] = `
 <Bar
-  isUniColor={true}
-  layoutConfig={
+  config={true}
+  layout={
     Object {
       "colorway": Array [
         "#8C55A3",
@@ -19,229 +19,321 @@ exports[`Bar component Renders bar component 1`] = `
       "showlegend": true,
     }
   }
-  name="Event counts"
   visualizations={
     Object {
       "data": Object {
-        "count()": Array [
-          2549,
-          9337,
-          1173,
-        ],
-        "span(timestamp,1M)": Array [
-          "2021-05-01 00:00:00",
-          "2021-06-01 00:00:00",
-          "2021-07-01 00:00:00",
-        ],
-      },
-      "jsonData": Array [
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-05-01 00:00:00",
-        },
-        Object {
-          "count()": 9337,
-          "span(timestamp,1M)": "2021-06-01 00:00:00",
-        },
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-07-01 00:00:00",
+        "appData": Object {
+          "fromApp": false,
         },
-      ],
-      "metadata": Object {
-        "fields": Array [
-          Object {
-            "name": "count()",
-            "type": "integer",
-          },
-          Object {
-            "name": "span(timestamp,1M)",
-            "type": "timestamp",
-          },
-        ],
-      },
-    }
-  }
->
-  <Plt
-    config={Object {}}
-    data={
-      Array [
-        Object {
-          "marker": Object {},
-          "name": "count()",
-          "type": "bar",
-          "x": Array [
-            "2021-05-01 00:00:00",
-            "2021-06-01 00:00:00",
-            "2021-07-01 00:00:00",
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
           ],
-          "y": Array [
-            2549,
-            9337,
-            1173,
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
           ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
         },
-      ]
-    }
-    layout={
-      Object {
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "height": 220,
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": true,
-        "xaxis": Object {
-          "automargin": true,
-        },
-        "yaxis": Object {
-          "automargin": true,
-        },
-      }
-    }
-  >
-    <PlotlyComponent
-      config={
-        Object {
-          "displayModeBar": false,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "marker": Object {},
-            "name": "count()",
-            "type": "bar",
-            "x": Array [
-              "2021-05-01 00:00:00",
-              "2021-06-01 00:00:00",
-              "2021-07-01 00:00:00",
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
             ],
-            "y": Array [
-              2549,
-              9337,
-              1173,
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
             ],
           },
-        ]
-      }
-      debug={false}
-      layout={
-        Object {
-          "autosize": true,
-          "barmode": "stack",
-          "colorway": Array [
-            "#8C55A3",
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
           ],
-          "height": 220,
-          "hovermode": "closest",
-          "legend": Object {
-            "orientation": "h",
-            "traceorder": "normal",
-          },
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": true,
-          "xaxis": Object {
-            "automargin": true,
-          },
-          "yaxis": Object {
-            "automargin": true,
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
           },
-        }
-      }
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-      useResizeHandler={true}
-    >
-      <div
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      />
-    </PlotlyComponent>
-  </Plt>
-</Bar>
-`;
-
-exports[`Bar component Renders bar component 2`] = `
-<Bar
-  isUniColor={true}
-  layoutConfig={
-    Object {
-      "colorway": Array [
-        "#8C55A3",
-      ],
-      "height": 220,
-      "margin": Object {
-        "b": 15,
-        "l": 60,
-        "pad": 0,
-        "r": 10,
-        "t": 30,
-      },
-      "showlegend": true,
-    }
-  }
-  name="Event counts"
-  visualizations={
-    Object {
-      "data": Object {
-        "count()": Array [
-          2549,
-          9337,
-          1173,
-        ],
-        "span(timestamp,1M)": Array [
-          "2021-05-01 00:00:00",
-          "2021-06-01 00:00:00",
-          "2021-07-01 00:00:00",
-        ],
-      },
-      "jsonData": Array [
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-05-01 00:00:00",
         },
-        Object {
-          "count()": 9337,
-          "span(timestamp,1M)": "2021-06-01 00:00:00",
+        "userConfigs": Object {},
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "categoryAxis": "xaxis",
+        "component": [Function],
+        "editorConfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Data",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "value_options",
+                  "mapTo": "valueOptions",
+                  "name": "Value options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "xaxis",
+                      "name": "X-axis",
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "yaxis",
+                      "name": "Y-axis",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_options",
+                  "mapTo": "chartOptions",
+                  "name": "Chart options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                          Object {
+                            "name": "Horizontal",
+                            "orientationId": "h",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "modeId": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
         },
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-07-01 00:00:00",
+        "fullLabel": "Bar",
+        "icon": [Function],
+        "iconType": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Bar",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
         },
-      ],
-      "metadata": Object {
-        "fields": Array [
-          Object {
-            "name": "count()",
-            "type": "integer",
+        "seriesAxis": "yaxis",
+        "type": "bar",
+        "visConfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
           },
-          Object {
-            "name": "span(timestamp,1M)",
-            "type": "timestamp",
+          "isUniColor": false,
+          "layout": Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
           },
-        ],
+        },
       },
     }
   }
@@ -251,23 +343,41 @@ exports[`Bar component Renders bar component 2`] = `
     data={
       Array [
         Object {
+          "marker": Object {
+            "color": Array [
+              "#3CA1C7",
+              "#8C55A3",
+              "#DB748A",
+              "#F2BE4B",
+              "#68CCC2",
+              "#2A7866",
+            ],
+          },
           "name": "count()",
+          "orientation": "v",
           "type": "bar",
           "x": Array [
-            "2021-05-01 00:00:00",
-            "2021-06-01 00:00:00",
-            "2021-07-01 00:00:00",
+            "error",
+            "info",
+            "login",
+            "security",
+            "success",
+            "warning",
           ],
           "y": Array [
-            2549,
-            9337,
-            1173,
+            154,
+            1753,
+            116,
+            468,
+            1964,
+            219,
           ],
         },
       ]
     }
     layout={
       Object {
+        "barmode": "",
         "colorway": Array [
           "#8C55A3",
         ],
@@ -280,24 +390,7 @@ exports[`Bar component Renders bar component 2`] = `
           "t": 30,
         },
         "showlegend": true,
-        "xaxis": Object {
-          "automargin": true,
-          "autorange": true,
-          "range": Array [
-            "2021-04-16",
-            "2021-07-16",
-          ],
-          "type": "date",
-        },
-        "yaxis": Object {
-          "automargin": true,
-          "autorange": true,
-          "range": Array [
-            0,
-            9828.421052631578,
-          ],
-          "type": "linear",
-        },
+        "title": "",
       }
     }
   >
@@ -310,17 +403,34 @@ exports[`Bar component Renders bar component 2`] = `
       data={
         Array [
           Object {
+            "marker": Object {
+              "color": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+              ],
+            },
             "name": "count()",
+            "orientation": "v",
             "type": "bar",
             "x": Array [
-              "2021-05-01 00:00:00",
-              "2021-06-01 00:00:00",
-              "2021-07-01 00:00:00",
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
             ],
             "y": Array [
-              2549,
-              9337,
-              1173,
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
             ],
           },
         ]
@@ -329,7 +439,7 @@ exports[`Bar component Renders bar component 2`] = `
       layout={
         Object {
           "autosize": true,
-          "barmode": "stack",
+          "barmode": "",
           "colorway": Array [
             "#8C55A3",
           ],
@@ -347,23 +457,17 @@ exports[`Bar component Renders bar component 2`] = `
             "t": 30,
           },
           "showlegend": true,
+          "title": "",
           "xaxis": Object {
             "automargin": true,
-            "autorange": true,
-            "range": Array [
-              "2021-04-16",
-              "2021-07-16",
-            ],
-            "type": "date",
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
           },
           "yaxis": Object {
-            "automargin": true,
-            "autorange": true,
-            "range": Array [
-              0,
-              9828.421052631578,
-            ],
-            "type": "linear",
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
           },
         }
       }
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap
new file mode 100644
index 000000000..7108292e5
--- /dev/null
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap
@@ -0,0 +1,498 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Data table component Renders data table component 1`] = `
+<DataTable
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {},
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "categoryAxis": "xaxis",
+        "component": [Function],
+        "editorConfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Data",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "value_options",
+                  "mapTo": "valueOptions",
+                  "name": "Value options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "xaxis",
+                      "name": "X-axis",
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "yaxis",
+                      "name": "Y-axis",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_options",
+                  "mapTo": "chartOptions",
+                  "name": "Chart options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                          Object {
+                            "name": "Horizontal",
+                            "orientationId": "h",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "modeId": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
+        },
+        "fullLabel": "Bar",
+        "icon": [Function],
+        "iconType": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Bar",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesAxis": "yaxis",
+        "type": "bar",
+        "visConfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <EuiDataGrid
+    aria-label="viz data table"
+    columnVisibility={
+      Object {
+        "setVisibleColumns": [Function],
+        "visibleColumns": Array [
+          "count()",
+          "tags",
+        ],
+      }
+    }
+    columns={
+      Array [
+        Object {
+          "id": "count()",
+        },
+        Object {
+          "id": "tags",
+        },
+      ]
+    }
+    data-test-subj="workspace__dataTable"
+    pagination={
+      Object {
+        "onChangeItemsPerPage": [Function],
+        "onChangePage": [Function],
+        "pageIndex": 0,
+        "pageSize": 10,
+        "pageSizeOptions": Array [
+          10,
+          50,
+          100,
+        ],
+      }
+    }
+    renderCellValue={[Function]}
+    rowCount={6}
+    sorting={
+      Object {
+        "columns": Array [],
+        "onSort": [Function],
+      }
+    }
+  >
+    <EuiFocusTrap
+      className="euiDataGrid__focusWrap"
+      clickOutsideDisables={false}
+      disabled={true}
+      noIsolation={true}
+      returnFocus={true}
+      scrollLock={false}
+    >
+      <ForwardRef
+        className="euiDataGrid__focusWrap"
+        enabled={false}
+        noIsolation={true}
+        onClickOutside={[Function]}
+        returnFocus={true}
+        scrollLock={false}
+      >
+        <ForwardRef
+          className="euiDataGrid__focusWrap"
+          enabled={false}
+          noIsolation={true}
+          onClickOutside={[Function]}
+          returnFocus={true}
+          scrollLock={false}
+          sideCar={[Function]}
+        >
+          <ForwardRef(FocusLockUI)
+            as={
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "classNames": Object {
+                  "fullWidth": "width-before-scroll-bar",
+                  "zeroRight": "right-scroll-bar-position",
+                },
+                "defaultProps": Object {
+                  "enabled": true,
+                  "inert": false,
+                  "removeScrollBar": true,
+                },
+                "render": [Function],
+              }
+            }
+            autoFocus={true}
+            className="euiDataGrid__focusWrap"
+            crossFrame={true}
+            disabled={true}
+            lockProps={
+              Object {
+                "allowPinchZoom": undefined,
+                "as": undefined,
+                "enabled": false,
+                "inert": undefined,
+                "shards": undefined,
+                "sideCar": [Function],
+                "style": undefined,
+              }
+            }
+            noFocusGuards={false}
+            persistentFocus={false}
+            returnFocus={true}
+            sideCar={[Function]}
+          >
+            <div
+              data-focus-guard={true}
+              key="guard-first"
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={-1}
+            />
+            <ForwardRef
+              className="euiDataGrid__focusWrap"
+              data-focus-lock-disabled="disabled"
+              enabled={false}
+              inert={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              removeScrollBar={true}
+              sideCar={[Function]}
+            >
+              <div
+                className="euiDataGrid__focusWrap"
+                data-focus-lock-disabled="disabled"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onScrollCapture={[Function]}
+                onTouchMoveCapture={[Function]}
+                onWheelCapture={[Function]}
+              >
+                <div
+                  className="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
+                  data-test-subj="workspace__dataTable"
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": undefined,
+                    }
+                  }
+                />
+              </div>
+            </ForwardRef>
+            <div
+              data-focus-guard={true}
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={-1}
+            />
+          </ForwardRef(FocusLockUI)>
+        </ForwardRef>
+      </ForwardRef>
+    </EuiFocusTrap>
+  </EuiDataGrid>
+</DataTable>
+`;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
new file mode 100644
index 000000000..d59b50b98
--- /dev/null
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -0,0 +1,419 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heatmap component Renders heatmap component 1`] = `
+<HeatMap
+  config={Object {}}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {},
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "categoryAxis": "xaxis",
+        "component": [Function],
+        "editorConfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Data",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "value_options",
+                  "mapTo": "valueOptions",
+                  "name": "Value options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "xaxis",
+                      "name": "X-axis",
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "yaxis",
+                      "name": "Y-axis",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_options",
+                  "mapTo": "chartOptions",
+                  "name": "Chart options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                          Object {
+                            "name": "Horizontal",
+                            "orientationId": "h",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "modeId": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
+        },
+        "fullLabel": "Bar",
+        "icon": [Function],
+        "iconType": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Bar",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesAxis": "yaxis",
+        "type": "bar",
+        "visConfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <EmptyPlaceholder
+    icon="visBarVerticalStacked"
+  >
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
+    >
+      <div
+        className="euiText euiText--extraSmall lnsChart__empty"
+        data-test-subj="vizWorkspace__noData"
+      >
+        <EuiTextAlign
+          textAlign="center"
+        >
+          <div
+            className="euiTextAlign euiTextAlign--center"
+          >
+            <EuiTextColor
+              color="subdued"
+              component="div"
+            >
+              <div
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiIcon
+                  color="subdued"
+                  size="l"
+                  type="visBarVerticalStacked"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--large euiIcon--subdued euiIcon-isLoading"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--large euiIcon--subdued euiIcon-isLoading"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <EuiSpacer
+                  size="s"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--s"
+                  />
+                </EuiSpacer>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="No results found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No results found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
+</HeatMap>
+`;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
deleted file mode 100644
index f73261fc7..000000000
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
+++ /dev/null
@@ -1,567 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Horizontal bar component Renders horizontal bar component 1`] = `
-<HorizontalBar
-  isUniColor={true}
-  layoutConfig={
-    Object {
-      "colorway": Array [
-        "#8C55A3",
-      ],
-      "height": 220,
-      "margin": Object {
-        "b": 15,
-        "l": 60,
-        "pad": 0,
-        "r": 10,
-        "t": 30,
-      },
-      "showlegend": true,
-    }
-  }
-  name="Event counts"
-  visualizations={
-    Object {
-      "data": Object {
-        "count()": Array [
-          2549,
-          9337,
-          1173,
-        ],
-        "span(timestamp,1M)": Array [
-          "2021-05-01 00:00:00",
-          "2021-06-01 00:00:00",
-          "2021-07-01 00:00:00",
-        ],
-      },
-      "jsonData": Array [
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-05-01 00:00:00",
-        },
-        Object {
-          "count()": 9337,
-          "span(timestamp,1M)": "2021-06-01 00:00:00",
-        },
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-07-01 00:00:00",
-        },
-      ],
-      "metadata": Object {
-        "fields": Array [
-          Object {
-            "name": "count()",
-            "type": "integer",
-          },
-          Object {
-            "name": "span(timestamp,1M)",
-            "type": "timestamp",
-          },
-        ],
-      },
-    }
-  }
->
-  <Bar
-    barConfig={
-      Object {
-        "orientation": "h",
-      }
-    }
-    layoutConfig={
-      Object {
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "height": 220,
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": true,
-        "yaxis": Object {
-          "automargin": true,
-        },
-      }
-    }
-    visualizations={
-      Object {
-        "data": Object {
-          "count()": Array [
-            2549,
-            9337,
-            1173,
-          ],
-          "span(timestamp,1M)": Array [
-            "2021-05-01 00:00:00",
-            "2021-06-01 00:00:00",
-            "2021-07-01 00:00:00",
-          ],
-        },
-        "jsonData": Array [
-          Object {
-            "count()": 2549,
-            "span(timestamp,1M)": "2021-05-01 00:00:00",
-          },
-          Object {
-            "count()": 9337,
-            "span(timestamp,1M)": "2021-06-01 00:00:00",
-          },
-          Object {
-            "count()": 2549,
-            "span(timestamp,1M)": "2021-07-01 00:00:00",
-          },
-        ],
-        "metadata": Object {
-          "fields": Array [
-            Object {
-              "name": "count()",
-              "type": "integer",
-            },
-            Object {
-              "name": "span(timestamp,1M)",
-              "type": "timestamp",
-            },
-          ],
-        },
-      }
-    }
-  >
-    <Plt
-      config={
-        Object {
-          "orientation": "h",
-        }
-      }
-      data={
-        Array [
-          Object {
-            "marker": Object {
-              "color": Array [
-                "#3CA1C7",
-                "#8C55A3",
-                "#DB748A",
-              ],
-            },
-            "name": "count()",
-            "orientation": "h",
-            "type": "bar",
-            "x": Array [
-              2549,
-              9337,
-              1173,
-            ],
-            "y": Array [
-              "2021-05-01 00:00:00",
-              "2021-06-01 00:00:00",
-              "2021-07-01 00:00:00",
-            ],
-          },
-        ]
-      }
-      layout={
-        Object {
-          "colorway": Array [
-            "#8C55A3",
-          ],
-          "height": 220,
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": true,
-          "xaxis": Object {
-            "automargin": true,
-          },
-          "yaxis": Object {
-            "automargin": true,
-          },
-        }
-      }
-    >
-      <PlotlyComponent
-        config={
-          Object {
-            "displayModeBar": false,
-            "orientation": "h",
-          }
-        }
-        data={
-          Array [
-            Object {
-              "marker": Object {
-                "color": Array [
-                  "#3CA1C7",
-                  "#8C55A3",
-                  "#DB748A",
-                ],
-              },
-              "name": "count()",
-              "orientation": "h",
-              "type": "bar",
-              "x": Array [
-                2549,
-                9337,
-                1173,
-              ],
-              "y": Array [
-                "2021-05-01 00:00:00",
-                "2021-06-01 00:00:00",
-                "2021-07-01 00:00:00",
-              ],
-            },
-          ]
-        }
-        debug={false}
-        layout={
-          Object {
-            "autosize": true,
-            "barmode": "stack",
-            "colorway": Array [
-              "#8C55A3",
-            ],
-            "height": 220,
-            "hovermode": "closest",
-            "legend": Object {
-              "orientation": "h",
-              "traceorder": "normal",
-            },
-            "margin": Object {
-              "b": 15,
-              "l": 60,
-              "pad": 0,
-              "r": 10,
-              "t": 30,
-            },
-            "showlegend": true,
-            "xaxis": Object {
-              "automargin": true,
-            },
-            "yaxis": Object {
-              "automargin": true,
-            },
-          }
-        }
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-        useResizeHandler={true}
-      >
-        <div
-          style={
-            Object {
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        />
-      </PlotlyComponent>
-    </Plt>
-  </Bar>
-</HorizontalBar>
-`;
-
-exports[`Horizontal bar component Renders horizontal bar component 2`] = `
-<HorizontalBar
-  isUniColor={true}
-  layoutConfig={
-    Object {
-      "colorway": Array [
-        "#8C55A3",
-      ],
-      "height": 220,
-      "margin": Object {
-        "b": 15,
-        "l": 60,
-        "pad": 0,
-        "r": 10,
-        "t": 30,
-      },
-      "showlegend": true,
-    }
-  }
-  name="Event counts"
-  visualizations={
-    Object {
-      "data": Object {
-        "count()": Array [
-          2549,
-          9337,
-          1173,
-        ],
-        "span(timestamp,1M)": Array [
-          "2021-05-01 00:00:00",
-          "2021-06-01 00:00:00",
-          "2021-07-01 00:00:00",
-        ],
-      },
-      "jsonData": Array [
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-05-01 00:00:00",
-        },
-        Object {
-          "count()": 9337,
-          "span(timestamp,1M)": "2021-06-01 00:00:00",
-        },
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-07-01 00:00:00",
-        },
-      ],
-      "metadata": Object {
-        "fields": Array [
-          Object {
-            "name": "count()",
-            "type": "integer",
-          },
-          Object {
-            "name": "span(timestamp,1M)",
-            "type": "timestamp",
-          },
-        ],
-      },
-    }
-  }
->
-  <Bar
-    barConfig={
-      Object {
-        "orientation": "h",
-      }
-    }
-    layoutConfig={
-      Object {
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "height": 220,
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": true,
-        "yaxis": Object {
-          "automargin": true,
-        },
-      }
-    }
-    visualizations={
-      Object {
-        "data": Object {
-          "count()": Array [
-            2549,
-            9337,
-            1173,
-          ],
-          "span(timestamp,1M)": Array [
-            "2021-05-01 00:00:00",
-            "2021-06-01 00:00:00",
-            "2021-07-01 00:00:00",
-          ],
-        },
-        "jsonData": Array [
-          Object {
-            "count()": 2549,
-            "span(timestamp,1M)": "2021-05-01 00:00:00",
-          },
-          Object {
-            "count()": 9337,
-            "span(timestamp,1M)": "2021-06-01 00:00:00",
-          },
-          Object {
-            "count()": 2549,
-            "span(timestamp,1M)": "2021-07-01 00:00:00",
-          },
-        ],
-        "metadata": Object {
-          "fields": Array [
-            Object {
-              "name": "count()",
-              "type": "integer",
-            },
-            Object {
-              "name": "span(timestamp,1M)",
-              "type": "timestamp",
-            },
-          ],
-        },
-      }
-    }
-  >
-    <Plt
-      config={
-        Object {
-          "orientation": "h",
-        }
-      }
-      data={
-        Array [
-          Object {
-            "marker": Object {
-              "color": Array [
-                "#3CA1C7",
-                "#8C55A3",
-                "#DB748A",
-              ],
-            },
-            "name": "count()",
-            "orientation": "h",
-            "type": "bar",
-            "x": Array [
-              2549,
-              9337,
-              1173,
-            ],
-            "y": Array [
-              "2021-05-01 00:00:00",
-              "2021-06-01 00:00:00",
-              "2021-07-01 00:00:00",
-            ],
-          },
-        ]
-      }
-      layout={
-        Object {
-          "colorway": Array [
-            "#8C55A3",
-          ],
-          "height": 220,
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": true,
-          "xaxis": Object {
-            "automargin": true,
-            "autorange": true,
-            "range": Array [
-              0,
-              9828.421052631578,
-            ],
-            "type": "linear",
-          },
-          "yaxis": Object {
-            "automargin": true,
-            "autorange": true,
-            "range": Array [
-              "2021-04-16",
-              "2021-07-16",
-            ],
-            "type": "date",
-          },
-        }
-      }
-    >
-      <PlotlyComponent
-        config={
-          Object {
-            "displayModeBar": false,
-            "orientation": "h",
-          }
-        }
-        data={
-          Array [
-            Object {
-              "marker": Object {
-                "color": Array [
-                  "#3CA1C7",
-                  "#8C55A3",
-                  "#DB748A",
-                ],
-              },
-              "name": "count()",
-              "orientation": "h",
-              "type": "bar",
-              "x": Array [
-                2549,
-                9337,
-                1173,
-              ],
-              "y": Array [
-                "2021-05-01 00:00:00",
-                "2021-06-01 00:00:00",
-                "2021-07-01 00:00:00",
-              ],
-            },
-          ]
-        }
-        debug={false}
-        layout={
-          Object {
-            "autosize": true,
-            "barmode": "stack",
-            "colorway": Array [
-              "#8C55A3",
-            ],
-            "height": 220,
-            "hovermode": "closest",
-            "legend": Object {
-              "orientation": "h",
-              "traceorder": "normal",
-            },
-            "margin": Object {
-              "b": 15,
-              "l": 60,
-              "pad": 0,
-              "r": 10,
-              "t": 30,
-            },
-            "showlegend": true,
-            "xaxis": Object {
-              "automargin": true,
-              "autorange": true,
-              "range": Array [
-                0,
-                9828.421052631578,
-              ],
-              "type": "linear",
-            },
-            "yaxis": Object {
-              "automargin": true,
-              "autorange": true,
-              "range": Array [
-                "2021-04-16",
-                "2021-07-16",
-              ],
-              "type": "date",
-            },
-          }
-        }
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-        useResizeHandler={true}
-      >
-        <div
-          style={
-            Object {
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        />
-      </PlotlyComponent>
-    </Plt>
-  </Bar>
-</HorizontalBar>
-`;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index 915d62476..96effb73e 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Line component Renders line component 1`] = `
 <Line
-  isUniColor={true}
-  layoutConfig={
+  config={Object {}}
+  layout={
     Object {
       "colorway": Array [
         "#8C55A3",
@@ -19,232 +19,321 @@ exports[`Line component Renders line component 1`] = `
       "showlegend": true,
     }
   }
-  name="Event counts"
   visualizations={
     Object {
       "data": Object {
-        "count()": Array [
-          2549,
-          9337,
-          1173,
-        ],
-        "span(timestamp,1M)": Array [
-          "2021-05-01 00:00:00",
-          "2021-06-01 00:00:00",
-          "2021-07-01 00:00:00",
-        ],
-      },
-      "jsonData": Array [
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-05-01 00:00:00",
-        },
-        Object {
-          "count()": 9337,
-          "span(timestamp,1M)": "2021-06-01 00:00:00",
-        },
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-07-01 00:00:00",
+        "appData": Object {
+          "fromApp": false,
         },
-      ],
-      "metadata": Object {
-        "fields": Array [
-          Object {
-            "name": "count()",
-            "type": "integer",
-          },
-          Object {
-            "name": "span(timestamp,1M)",
-            "type": "timestamp",
-          },
-        ],
-      },
-    }
-  }
->
-  <Plt
-    config={Object {}}
-    data={
-      Array [
-        Object {
-          "name": "count()",
-          "type": "line",
-          "x": Array [
-            "2021-05-01 00:00:00",
-            "2021-06-01 00:00:00",
-            "2021-07-01 00:00:00",
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
           ],
-          "y": Array [
-            2549,
-            9337,
-            1173,
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
           ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
         },
-      ]
-    }
-    layout={
-      Object {
-        "barmode": "line",
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "height": 220,
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "paper_bgcolor": "rgba(0, 0, 0, 0)",
-        "plot_bgcolor": "rgba(0, 0, 0, 0)",
-        "showlegend": true,
-        "xaxis": Object {
-          "automargin": true,
-        },
-        "yaxis": Object {
-          "automargin": true,
-        },
-      }
-    }
-  >
-    <PlotlyComponent
-      config={
-        Object {
-          "displayModeBar": false,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "name": "count()",
-            "type": "line",
-            "x": Array [
-              "2021-05-01 00:00:00",
-              "2021-06-01 00:00:00",
-              "2021-07-01 00:00:00",
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
             ],
-            "y": Array [
-              2549,
-              9337,
-              1173,
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
             ],
           },
-        ]
-      }
-      debug={false}
-      layout={
-        Object {
-          "autosize": true,
-          "barmode": "line",
-          "colorway": Array [
-            "#8C55A3",
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
           ],
-          "height": 220,
-          "hovermode": "closest",
-          "legend": Object {
-            "orientation": "h",
-            "traceorder": "normal",
-          },
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "paper_bgcolor": "rgba(0, 0, 0, 0)",
-          "plot_bgcolor": "rgba(0, 0, 0, 0)",
-          "showlegend": true,
-          "xaxis": Object {
-            "automargin": true,
-          },
-          "yaxis": Object {
-            "automargin": true,
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
           },
-        }
-      }
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-      useResizeHandler={true}
-    >
-      <div
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      />
-    </PlotlyComponent>
-  </Plt>
-</Line>
-`;
-
-exports[`Line component Renders line component 2`] = `
-<Line
-  isUniColor={true}
-  layoutConfig={
-    Object {
-      "colorway": Array [
-        "#8C55A3",
-      ],
-      "height": 220,
-      "margin": Object {
-        "b": 15,
-        "l": 60,
-        "pad": 0,
-        "r": 10,
-        "t": 30,
-      },
-      "showlegend": true,
-    }
-  }
-  name="Event counts"
-  visualizations={
-    Object {
-      "data": Object {
-        "count()": Array [
-          2549,
-          9337,
-          1173,
-        ],
-        "span(timestamp,1M)": Array [
-          "2021-05-01 00:00:00",
-          "2021-06-01 00:00:00",
-          "2021-07-01 00:00:00",
-        ],
-      },
-      "jsonData": Array [
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-05-01 00:00:00",
         },
-        Object {
-          "count()": 9337,
-          "span(timestamp,1M)": "2021-06-01 00:00:00",
+        "userConfigs": Object {},
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "categoryAxis": "xaxis",
+        "component": [Function],
+        "editorConfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Data",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "value_options",
+                  "mapTo": "valueOptions",
+                  "name": "Value options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "xaxis",
+                      "name": "X-axis",
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "yaxis",
+                      "name": "Y-axis",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_options",
+                  "mapTo": "chartOptions",
+                  "name": "Chart options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                          Object {
+                            "name": "Horizontal",
+                            "orientationId": "h",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "modeId": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
         },
-        Object {
-          "count()": 2549,
-          "span(timestamp,1M)": "2021-07-01 00:00:00",
+        "fullLabel": "Bar",
+        "icon": [Function],
+        "iconType": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Bar",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
         },
-      ],
-      "metadata": Object {
-        "fields": Array [
-          Object {
-            "name": "count()",
-            "type": "integer",
+        "seriesAxis": "yaxis",
+        "type": "bar",
+        "visConfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
           },
-          Object {
-            "name": "span(timestamp,1M)",
-            "type": "timestamp",
+          "isUniColor": false,
+          "layout": Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
           },
-        ],
+        },
       },
     }
   }
@@ -254,24 +343,30 @@ exports[`Line component Renders line component 2`] = `
     data={
       Array [
         Object {
+          "mode": "line",
           "name": "count()",
           "type": "line",
           "x": Array [
-            "2021-05-01 00:00:00",
-            "2021-06-01 00:00:00",
-            "2021-07-01 00:00:00",
+            "error",
+            "info",
+            "login",
+            "security",
+            "success",
+            "warning",
           ],
           "y": Array [
-            2549,
-            9337,
-            1173,
+            154,
+            1753,
+            116,
+            468,
+            1964,
+            219,
           ],
         },
       ]
     }
     layout={
       Object {
-        "barmode": "line",
         "colorway": Array [
           "#8C55A3",
         ],
@@ -283,27 +378,8 @@ exports[`Line component Renders line component 2`] = `
           "r": 10,
           "t": 30,
         },
-        "paper_bgcolor": "rgba(0, 0, 0, 0)",
-        "plot_bgcolor": "rgba(0, 0, 0, 0)",
         "showlegend": true,
-        "xaxis": Object {
-          "automargin": true,
-          "autorange": true,
-          "range": Array [
-            "2021-04-27 03:45:50.6702",
-            "2021-07-04 20:14:09.3298",
-          ],
-          "type": "date",
-        },
-        "yaxis": Object {
-          "automargin": true,
-          "autorange": true,
-          "range": Array [
-            425.69084628670123,
-            10084.309153713299,
-          ],
-          "type": "linear",
-        },
+        "title": "",
       }
     }
   >
@@ -316,17 +392,24 @@ exports[`Line component Renders line component 2`] = `
       data={
         Array [
           Object {
+            "mode": "line",
             "name": "count()",
             "type": "line",
             "x": Array [
-              "2021-05-01 00:00:00",
-              "2021-06-01 00:00:00",
-              "2021-07-01 00:00:00",
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
             ],
             "y": Array [
-              2549,
-              9337,
-              1173,
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
             ],
           },
         ]
@@ -335,7 +418,7 @@ exports[`Line component Renders line component 2`] = `
       layout={
         Object {
           "autosize": true,
-          "barmode": "line",
+          "barmode": "stack",
           "colorway": Array [
             "#8C55A3",
           ],
@@ -352,26 +435,18 @@ exports[`Line component Renders line component 2`] = `
             "r": 10,
             "t": 30,
           },
-          "paper_bgcolor": "rgba(0, 0, 0, 0)",
-          "plot_bgcolor": "rgba(0, 0, 0, 0)",
           "showlegend": true,
+          "title": "",
           "xaxis": Object {
             "automargin": true,
-            "autorange": true,
-            "range": Array [
-              "2021-04-27 03:45:50.6702",
-              "2021-07-04 20:14:09.3298",
-            ],
-            "type": "date",
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
           },
           "yaxis": Object {
-            "automargin": true,
-            "autorange": true,
-            "range": Array [
-              425.69084628670123,
-              10084.309153713299,
-            ],
-            "type": "linear",
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
           },
         }
       }
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
new file mode 100644
index 000000000..9d7f69aa8
--- /dev/null
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -0,0 +1,482 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pie component Renders pie component 1`] = `
+<Pie
+  config={Object {}}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {},
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "categoryAxis": "xaxis",
+        "component": [Function],
+        "editorConfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Data",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "value_options",
+                  "mapTo": "valueOptions",
+                  "name": "Value options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "xaxis",
+                      "name": "X-axis",
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "yaxis",
+                      "name": "Y-axis",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_options",
+                  "mapTo": "chartOptions",
+                  "name": "Chart options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                          Object {
+                            "name": "Horizontal",
+                            "orientationId": "h",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "modeId": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
+        },
+        "fullLabel": "Bar",
+        "icon": [Function],
+        "iconType": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Bar",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesAxis": "yaxis",
+        "type": "bar",
+        "visConfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <Plt
+    config={Object {}}
+    data={
+      Array [
+        Object {
+          "automargin": true,
+          "domain": Object {
+            "column": 0,
+            "row": 0,
+          },
+          "hole": 0,
+          "labels": undefined,
+          "name": "count()",
+          "text": "count()",
+          "textinfo": "percent",
+          "textposition": "outside",
+          "type": "pie",
+          "values": Array [
+            154,
+            1753,
+            116,
+            468,
+            1964,
+            219,
+          ],
+        },
+      ]
+    }
+    layout={
+      Object {
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "grid": Object {
+          "columns": 1,
+          "rows": 1,
+        },
+        "height": 220,
+        "margin": Object {
+          "b": 15,
+          "l": 60,
+          "pad": 0,
+          "r": 10,
+          "t": 30,
+        },
+        "showlegend": true,
+        "title": "",
+      }
+    }
+  >
+    <PlotlyComponent
+      config={
+        Object {
+          "displayModeBar": false,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "automargin": true,
+            "domain": Object {
+              "column": 0,
+              "row": 0,
+            },
+            "hole": 0,
+            "labels": undefined,
+            "name": "count()",
+            "text": "count()",
+            "textinfo": "percent",
+            "textposition": "outside",
+            "type": "pie",
+            "values": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+          },
+        ]
+      }
+      debug={false}
+      layout={
+        Object {
+          "autosize": true,
+          "barmode": "stack",
+          "colorway": Array [
+            "#8C55A3",
+          ],
+          "grid": Object {
+            "columns": 1,
+            "rows": 1,
+          },
+          "height": 220,
+          "hovermode": "closest",
+          "legend": Object {
+            "orientation": "h",
+            "traceorder": "normal",
+          },
+          "margin": Object {
+            "b": 15,
+            "l": 60,
+            "pad": 0,
+            "r": 10,
+            "t": 30,
+          },
+          "showlegend": true,
+          "title": "",
+          "xaxis": Object {
+            "automargin": true,
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+        }
+      }
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+      useResizeHandler={true}
+    >
+      <div
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      />
+    </PlotlyComponent>
+  </Plt>
+</Pie>
+`;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
new file mode 100644
index 000000000..ad95f0fc3
--- /dev/null
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
@@ -0,0 +1,356 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text component Renders text component 1`] = `
+<Text
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {},
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "categoryAxis": "xaxis",
+        "component": [Function],
+        "editorConfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Data",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "value_options",
+                  "mapTo": "valueOptions",
+                  "name": "Value options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "xaxis",
+                      "name": "X-axis",
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": false,
+                      "mapTo": "yaxis",
+                      "name": "Y-axis",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_options",
+                  "mapTo": "chartOptions",
+                  "name": "Chart options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "name": "Vertical",
+                            "orientationId": "v",
+                          },
+                          Object {
+                            "name": "Horizontal",
+                            "orientationId": "h",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "isSingleSelection": true,
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "dropdownList": Array [
+                          Object {
+                            "modeId": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "modeId": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
+        },
+        "fullLabel": "Bar",
+        "icon": [Function],
+        "iconType": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Bar",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesAxis": "yaxis",
+        "type": "bar",
+        "visConfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 500,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <div
+    data-test-subj="workspace__viz_markdown"
+  >
+    <EuiMarkdownFormat>
+      <div
+        className="euiMarkdownFormat"
+      >
+        <div>
+          <h2
+            key="h-2"
+          >
+            Text
+          </h2>
+          
+
+          <p
+            key="h-3"
+          >
+            Welcome to text editor!
+          </p>
+          
+
+          <p
+            key="h-4"
+          >
+            With text editor, you are able to add text description(s) to your dashboards.
+          </p>
+        </div>
+      </div>
+    </EuiMarkdownFormat>
+  </div>
+</Text>
+`;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx
index 3e56516fd..421f5f27c 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/bar.test.tsx
@@ -10,19 +10,18 @@ import { waitFor } from '@testing-library/react';
 import { Bar } from '../bar/bar';
 import {
   LAYOUT_CONFIG,
-  SAMPLE_VISUALIZATIONS,
+  TEST_VISUALIZATIONS_DATA
 } from '../../../../../test/event_analytics_constants';
 
-describe.skip('Bar component', () => {
+describe('Bar component', () => {
   configure({ adapter: new Adapter() });
 
   it('Renders bar component', async () => {
     const wrapper = mount(
       <Bar
-        visualizations={SAMPLE_VISUALIZATIONS}
-        name="Event counts"
-        layoutConfig={LAYOUT_CONFIG}
-        isUniColor={true}
+        visualizations={TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={true}
       />
     );
 
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/field_item.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/data_table.test.tsx
similarity index 52%
rename from dashboards-observability/public/components/explorer/visualizations/__tests__/field_item.test.tsx
rename to dashboards-observability/public/components/visualizations/charts/__tests__/data_table.test.tsx
index c5e4cd8f8..e6826ac2a 100644
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/field_item.test.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/data_table.test.tsx
@@ -7,26 +7,19 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { FieldItem } from '../field_item';
-import { 
-  AVAILABLE_FIELDS
-} from '../../../../../test/event_analytics_constants';
+import { DataTable } from '../data_table/data_table';
+import { TEST_VISUALIZATIONS_DATA } from '../../../../../test/event_analytics_constants';
 
-describe('Visualization field item component', () => {
+describe('Data table component', () => {
   configure({ adapter: new Adapter() });
 
-  it('Renders field item component', async () => {
-    
+  it('Renders data table component', async () => {
     const wrapper = mount(
-      <FieldItem
-        field={AVAILABLE_FIELDS[0]}
-        highlight=""
-        exists={true}
-        hideDetails={false}
-        key={AVAILABLE_FIELDS[0].name}
+      <DataTable
+        visualizations={TEST_VISUALIZATIONS_DATA}
       />
     );
-    
+
     wrapper.update();
 
     await waitFor(() => {
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/horizontal_bar.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/heatmap.test.tsx
similarity index 60%
rename from dashboards-observability/public/components/visualizations/charts/__tests__/horizontal_bar.test.tsx
rename to dashboards-observability/public/components/visualizations/charts/__tests__/heatmap.test.tsx
index 744783727..530e65908 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/horizontal_bar.test.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/heatmap.test.tsx
@@ -7,22 +7,21 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { HorizontalBar } from '../horizontal_bar';
+import { HeatMap } from '../maps/heatmap';
 import {
   LAYOUT_CONFIG,
-  SAMPLE_VISUALIZATIONS,
+  TEST_VISUALIZATIONS_DATA
 } from '../../../../../test/event_analytics_constants';
 
-describe.skip('Horizontal bar component', () => {
+describe('Heatmap component', () => {
   configure({ adapter: new Adapter() });
 
-  it('Renders horizontal bar component', async () => {
+  it('Renders heatmap component', async () => {
     const wrapper = mount(
-      <HorizontalBar
-        visualizations={SAMPLE_VISUALIZATIONS}
-        name="Event counts"
-        layoutConfig={LAYOUT_CONFIG}
-        isUniColor={true}
+      <HeatMap
+        visualizations={TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={{}}
       />
     );
 
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/line.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/line.test.tsx
index b5cce02e3..cbbc51819 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/line.test.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/line.test.tsx
@@ -10,19 +10,18 @@ import { waitFor } from '@testing-library/react';
 import { Line } from '../lines/line';
 import {
   LAYOUT_CONFIG,
-  SAMPLE_VISUALIZATIONS,
+  TEST_VISUALIZATIONS_DATA
 } from '../../../../../test/event_analytics_constants';
 
-describe.skip('Line component', () => {
+describe('Line component', () => {
   configure({ adapter: new Adapter() });
 
   it('Renders line component', async () => {
     const wrapper = mount(
       <Line
-        visualizations={SAMPLE_VISUALIZATIONS}
-        name="Event counts"
-        layoutConfig={LAYOUT_CONFIG}
-        isUniColor={true}
+        visualizations={TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={{}}
       />
     );
 
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/field_list.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/pie.test.tsx
similarity index 64%
rename from dashboards-observability/public/components/explorer/visualizations/__tests__/field_list.test.tsx
rename to dashboards-observability/public/components/visualizations/charts/__tests__/pie.test.tsx
index 15f97b5c2..44f6675ec 100644
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/field_list.test.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/pie.test.tsx
@@ -7,23 +7,24 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { FieldList } from '../fieldList';
-import { 
-  AVAILABLE_FIELDS
+import { Pie } from '../pie/pie';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA
 } from '../../../../../test/event_analytics_constants';
 
-describe('Visualization field list component', () => {
+describe('Pie component', () => {
   configure({ adapter: new Adapter() });
 
-  it('Renders field list component', async () => {
-    
+  it('Renders pie component', async () => {
     const wrapper = mount(
-      <FieldList
-        id="3327"
-        field={AVAILABLE_FIELDS}
+      <Pie
+        visualizations={TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={{}}
       />
     );
-    
+
     wrapper.update();
 
     await waitFor(() => {
diff --git a/dashboards-observability/public/components/explorer/visualizations/__tests__/lens_field_icon.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/text.test.tsx
similarity index 61%
rename from dashboards-observability/public/components/explorer/visualizations/__tests__/lens_field_icon.test.tsx
rename to dashboards-observability/public/components/visualizations/charts/__tests__/text.test.tsx
index bdc846feb..62cea476c 100644
--- a/dashboards-observability/public/components/explorer/visualizations/__tests__/lens_field_icon.test.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/text.test.tsx
@@ -7,23 +7,23 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
-import { LensFieldIcon } from '../lens_field_icon';
+import { Text } from '../text/text';
+import { TEST_VISUALIZATIONS_DATA } from '../../../../../test/event_analytics_constants';
 
-describe('Visualization field icon component', () => {
+describe('Text component', () => {
   configure({ adapter: new Adapter() });
 
-  it('Renders field icon component', async () => {
-    
+  it('Renders text component', async () => {
     const wrapper = mount(
-      <LensFieldIcon
-        type="date"
+      <Text
+        visualizations={TEST_VISUALIZATIONS_DATA}
       />
     );
-    
+
     wrapper.update();
 
     await waitFor(() => {
       expect(wrapper).toMatchSnapshot();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
index 4f51c08e5..9e851d48b 100644
--- a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
@@ -6,13 +6,9 @@
 import { Bar } from './bar';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartBar } from '../../assets/chart_bar';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../explorer/visualizations/config_panel/config_editor/config_editor';
-import {
-  ConfigValueOptions,
-  ConfigDataLinks,
-  ConfigThresholds,
-} from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts
index 9a3523208..cbc25a1dc 100644
--- a/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts
@@ -1,9 +1,9 @@
 import { Bar } from './bar';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartBar } from '../../assets/chart_bar';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../explorer/visualizations/config_panel/config_editor/config_editor';
-import { ConfigValueOptions } from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/bubble/bubble_type.ts b/dashboards-observability/public/components/visualizations/charts/bubble/bubble_type.ts
index 03b8181c2..091298ce5 100644
--- a/dashboards-observability/public/components/visualizations/charts/bubble/bubble_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/bubble/bubble_type.ts
@@ -6,9 +6,9 @@
 import { Bubble } from './bubble';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartPie } from '../../assets/chart_pie';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../explorer/visualizations/config_panel/config_editor/config_editor';
-import { ConfigValueOptions } from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/financial/candle_stick/candle_stick_type.ts b/dashboards-observability/public/components/visualizations/charts/financial/candle_stick/candle_stick_type.ts
index d7d17db80..df9dd2fa9 100644
--- a/dashboards-observability/public/components/visualizations/charts/financial/candle_stick/candle_stick_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/financial/candle_stick/candle_stick_type.ts
@@ -6,9 +6,9 @@
 import { CandleStick } from './candle_stick';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../../shared/shared_configs';
 import { LensIconChartBar } from '../../../assets/chart_bar';
-import { VizDataPanel } from '../../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../../explorer/visualizations/config_panel/config_editor/config_editor';
-import { ConfigValueOptions } from '../../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts
index 8201814ca..e5e91b7db 100644
--- a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts
@@ -6,13 +6,13 @@
 import { Gauge } from './gauge';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../../shared/shared_configs';
 import { LensIconChartLine } from '../../../assets/chart_line';
-import { VizDataPanel } from '../../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../../explorer/visualizations/config_panel/config_editor/config_editor';
+import { VizDataPanel } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
 import {
   ConfigValueOptions,
   ConfigThresholds,
   ConfigGaugeValueOptions,
-} from '../../../../explorer/visualizations/config_panel/config_editor/config_controls';
+} from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts
index fbc9543f5..3e6e0d967 100644
--- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts
@@ -6,9 +6,9 @@
 import { Histogram } from './histogram';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartLine } from '../../assets/chart_line';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../explorer/visualizations/config_panel/config_editor/config_editor';
-import { ConfigValueOptions } from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/horizontal_bar.tsx b/dashboards-observability/public/components/visualizations/charts/horizontal_bar.tsx
deleted file mode 100644
index 0875f3861..000000000
--- a/dashboards-observability/public/components/visualizations/charts/horizontal_bar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from 'react';
-import { merge } from 'lodash';
-import { Bar } from './bar/bar';
-
-interface IBarTrace {
-  xvalues: any[];
-  yvalues: any[];
-  mode: string;
-  name: string;
-}
-
-export interface IStackedBarProps {
-  name: string;
-  barValues: IBarTrace[];
-  layoutConfig?: any;
-}
-
-export const HorizontalBar = ({
-  visualizations,
-  layoutConfig = {},
-  dispatch,
-  customVizData,
-}: any) => {
-  // const horizontalBarLayoutConfig = merge(
-  //   {
-  //     yaxis: {
-  //       automargin: true,
-  //     },
-  //   },
-  //   layoutConfig
-  // );
-
-  return (
-    <Bar
-      visualizations={visualizations}
-      orientation="h"
-      layoutConfig={layoutConfig}
-      dispatch={dispatch}
-      customVizData={customVizData}
-    />
-  );
-};
diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
index 74cde8ffe..68e0df75e 100644
--- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
@@ -7,12 +7,12 @@ import { Line } from './line';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartLine } from '../../assets/chart_line';
 import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../explorer/visualizations/config_panel/config_editor/config_editor';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
 import {
   ConfigValueOptions,
   ConfigThresholds,
-} from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx
index cb565284f..db746b50f 100644
--- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx
@@ -8,7 +8,7 @@ import { uniq, has, isArray, isEmpty } from 'lodash';
 import Plotly from 'plotly.js-dist';
 import { Plt } from '../../plotly/plot';
 import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
-import { EmptyPlaceholder } from '../../../../components/explorer/visualizations/shared_components/empty_placeholder';
+import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
 
 export const HeatMap = ({ visualizations, layout, config }: any) => {
   const {
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts
index daa5fa3b8..269e429c2 100644
--- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts
@@ -6,9 +6,9 @@
 import { HeatMap } from './heatmap';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartPie } from '../../assets/chart_pie';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../explorer/visualizations/config_panel/config_editor/config_editor';
-import { ConfigValueOptions } from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts
index d25665e1e..74330f342 100644
--- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts
@@ -6,9 +6,9 @@
 import { TreeMap } from './treemaps';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartBar } from '../../assets/chart_bar';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../explorer/visualizations/config_panel/config_editor/config_editor';
-import { ConfigValueOptions } from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx
index 961d090d1..0c07892e9 100644
--- a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx
@@ -4,9 +4,8 @@
  */
 
 import React from 'react';
-import { take, merge, isEmpty } from 'lodash';
+import { take, isEmpty } from 'lodash';
 import { Plt } from '../../plotly/plot';
-import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
 
 export const Pie = ({ visualizations, layout, config }: any) => {
   const { vis } = visualizations;
diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts
index 721c4211d..7dbc507aa 100644
--- a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts
@@ -7,9 +7,9 @@ import { Pie } from './pie';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartPie } from '../../assets/chart_pie';
 import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigEditor } from '../../../explorer/visualizations/config_panel/config_editor/config_editor';
-import { ConfigValueOptions } from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/charts/text/text_type.ts b/dashboards-observability/public/components/visualizations/charts/text/text_type.ts
index 3a826498a..bc6b90ca9 100644
--- a/dashboards-observability/public/components/visualizations/charts/text/text_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/text/text_type.ts
@@ -7,8 +7,8 @@ import { Text } from './text';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
 import { LensIconChartLine } from '../../assets/chart_line';
 import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
-import { VizDataPanel } from '../../../explorer/visualizations/config_panel/config_editor/default_vis_editor';
-import { ConfigText } from '../../../explorer/visualizations/config_panel/config_editor/config_controls';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigText } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
diff --git a/dashboards-observability/public/components/visualizations/visualization.tsx b/dashboards-observability/public/components/visualizations/visualization.tsx
index fb22f6bf6..329e6881b 100644
--- a/dashboards-observability/public/components/visualizations/visualization.tsx
+++ b/dashboards-observability/public/components/visualizations/visualization.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { isArray } from 'lodash';
 import { VisualizationChart } from './visualization_chart';
-import { EmptyPlaceholder } from '../../components/explorer/visualizations/shared_components/empty_placeholder';
+import { EmptyPlaceholder } from '../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
 
 interface IVisualizationProps {}
 
diff --git a/dashboards-observability/public/framework/redux/reducers/index.ts b/dashboards-observability/public/framework/redux/reducers/index.ts
index 18565c69c..1dfcf743c 100644
--- a/dashboards-observability/public/framework/redux/reducers/index.ts
+++ b/dashboards-observability/public/framework/redux/reducers/index.ts
@@ -5,13 +5,13 @@
 
 import { combineReducers } from 'redux';
 
-import queriesReducer from '../../../components/explorer/slices/query_slice';
-import queryResultsReducer from '../../../components/explorer/slices/query_result_slice';
-import queryTabReducer from '../../../components/explorer/slices/query_tab_slice';
-import FieldsReducer from '../../../components/explorer/slices/field_slice';
-import countDistributionReducer from '../../../components/explorer/slices/count_distribution_slice';
-import explorerVisualizationReducer from '../../../components/explorer/slices/visualization_slice';
-import explorerVisualizationConfigReducer from '../../../components/explorer/slices/viualization_config_slice';
+import queriesReducer from '../../../components/event_analytics/redux/slices/query_slice';
+import queryResultsReducer from '../../../components/event_analytics/redux/slices/query_result_slice';
+import queryTabReducer from '../../../components/event_analytics/redux/slices/query_tab_slice';
+import FieldsReducer from '../../../components/event_analytics/redux/slices/field_slice';
+import countDistributionReducer from '../../../components/event_analytics/redux/slices/count_distribution_slice';
+import explorerVisualizationReducer from '../../../components/event_analytics/redux/slices/visualization_slice';
+import explorerVisualizationConfigReducer from '../../../components/event_analytics/redux/slices/viualization_config_slice';
 
 const rootReducer = combineReducers({
   // explorer reducers
diff --git a/dashboards-observability/public/plugin.ts b/dashboards-observability/public/plugin.ts
index 5180cf3e3..4c3b7f7a2 100644
--- a/dashboards-observability/public/plugin.ts
+++ b/dashboards-observability/public/plugin.ts
@@ -15,6 +15,7 @@ import TimestampUtils from './services/timestamp/timestamp';
 import SavedObjects from './services/saved_objects/event_analytics/saved_objects';
 import { AppPluginStartDependencies, ObservabilitySetup, ObservabilityStart } from './types';
 import { convertLegacyNotebooksUrl } from './components/notebooks/components/helpers/legacy_route_helpers';
+import { convertLegacyTraceAnalyticsUrl } from './components/trace_analytics/components/common/legacy_route_helpers';
 import { uiSettingsService } from '../common/utils';
 
 export class ObservabilityPlugin implements Plugin<ObservabilitySetup, ObservabilityStart> {
@@ -26,6 +27,11 @@ export class ObservabilityPlugin implements Plugin<ObservabilitySetup, Observabi
       window.location.assign(convertLegacyNotebooksUrl(window.location));
     }
 
+    // redirect legacy trace analytics URL to current URL under observability
+    if (window.location.pathname.includes('trace-analytics-dashboards')) {
+      window.location.assign(convertLegacyTraceAnalyticsUrl(window.location));
+    }
+
     core.application.register({
       id: observabilityID,
       title: observabilityTitle,
diff --git a/dashboards-observability/test/event_analytics_constants.ts b/dashboards-observability/test/event_analytics_constants.ts
index e35504e05..a8a3a70a6 100644
--- a/dashboards-observability/test/event_analytics_constants.ts
+++ b/dashboards-observability/test/event_analytics_constants.ts
@@ -4,6 +4,13 @@
  */
 
 import { LONG_CHART_COLOR } from '../common/constants/shared';
+import { createBarTypeDefinition } from '../public/components/visualizations/charts/bar/bar_type';
+import {
+  SELECTED_FIELDS,
+  AVAILABLE_FIELDS as AVAILABLE_FIELDS_NAME,
+  UNSELECTED_FIELDS,
+  QUERIED_FIELDS,
+} from '../common/constants/explorer';
 
 export const AVAILABLE_FIELDS = [
   {
@@ -469,4 +476,60 @@ export const LAYOUT_CONFIG = {
   },
   height: 220,
   colorway: [LONG_CHART_COLOR],
-};
\ No newline at end of file
+};
+
+export const EXPLORER_FIELDS = {
+  [SELECTED_FIELDS]: [],
+  [UNSELECTED_FIELDS]: [],
+  [AVAILABLE_FIELDS_NAME]: AVAILABLE_FIELDS,
+  [QUERIED_FIELDS]: QUERY_FIELDS,
+};
+
+export const EXPLORER_VISUALIZATIONS = {
+  data: {
+    'count()': [154, 1753, 116, 468, 1964, 219],
+    tags:["error", "info", "login", "security", "success", "warning"],
+  },
+  jsonData: [
+    {'count()': 154, tags: "error"},
+    {'count()': 1753, tags: "info"},
+    {'count()': 116, tags: "login"},
+    {'count()': 468, tags: "security"},
+    {'count()': 1964, tags: "success"},
+    {'count()': 219, tags: "warning"}
+  ],
+  metadata: {
+    fields: [
+      {name: "count()", type: "integer"},
+      {name: "tags", type: "text"}
+    ],
+    size: 6,
+    status: 200
+  },
+};
+
+export const TEST_VISUALIZATIONS_DATA = {
+  data: {
+    appData: {fromApp: false},
+    defaultAxes: {},
+    indexFields: EXPLORER_FIELDS,
+    query: {},
+    rawVizData: EXPLORER_VISUALIZATIONS,
+    userConfigs: {}
+  },
+  vis: createBarTypeDefinition({})
+};
+
+export const PIE_TEST_VISUALIZATIONS_DATA = {
+  data: {
+    ...TEST_VISUALIZATIONS_DATA.data,
+    defaultAxes: {
+      xaxis: [{name: "tags", type: "text"}], 
+      yaxis: [{name: "count()", type: "integer"}]
+    }
+  },
+  vis: {
+    ...TEST_VISUALIZATIONS_DATA.vis
+  }
+};
+
diff --git a/dashboards-observability/test/jest.config.js b/dashboards-observability/test/jest.config.js
index 427853a61..7ce1f85d8 100644
--- a/dashboards-observability/test/jest.config.js
+++ b/dashboards-observability/test/jest.config.js
@@ -26,6 +26,7 @@ module.exports = {
     '\\.(css|less|sass|scss)$': '<rootDir>/test/__mocks__/styleMock.js',
     '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
     '\\@algolia/autocomplete-theme-classic$': '<rootDir>/test/__mocks__/styleMock.js',
+    "^!!raw-loader!.*": "jest-raw-loader",
   },
   testEnvironment: "jsdom",
 };
diff --git a/dashboards-observability/yarn.lock b/dashboards-observability/yarn.lock
index 689c3533f..c205c9bf8 100644
--- a/dashboards-observability/yarn.lock
+++ b/dashboards-observability/yarn.lock
@@ -419,9 +419,9 @@ astral-regex@^1.0.0:
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
 async@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/async/-/async-3.2.1.tgz#d3274ec66d107a47476a4c49136aacdb00665fc8"
-  integrity sha512-XdD5lRO/87udXCMC9meWdYiR+Nq6ZjUfXidViUZGu2F1MO4T3XwZ1et0hb2++BgLfhyJwy44BGB/yx80ABx8hg==
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
+  integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -1881,12 +1881,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.5:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
-  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
-
-minimist@^1.2.6:
+minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -1906,9 +1901,9 @@ mkdirp@^0.5.4:
     minimist "^1.2.5"
 
 moment@^2.27.0:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+  version "2.29.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.2.tgz#00910c60b20843bcba52d37d58c628b47b1f20e4"
+  integrity sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==
 
 ms@2.0.0:
   version "2.0.0"
diff --git a/opensearch-observability/build.gradle b/opensearch-observability/build.gradle
index 6f5d6fcbb..fcbf8c3c3 100644
--- a/opensearch-observability/build.gradle
+++ b/opensearch-observability/build.gradle
@@ -10,9 +10,9 @@ import org.opensearch.gradle.testclusters.StandaloneRestIntegTestTask
 buildscript {
     ext {
         isSnapshot = "true" == System.getProperty("build.snapshot", "true")
-        opensearch_version = System.getProperty("opensearch.version", "2.0.0-alpha1-SNAPSHOT")
-        buildVersionQualifier = System.getProperty("build.version_qualifier", "alpha1")
-        // 2.0.0-alpha1-SNAPSHOT -> 2.0.0.0-alpha1-SNAPSHOT
+        opensearch_version = System.getProperty("opensearch.version", "2.0.0-rc1-SNAPSHOT")
+        buildVersionQualifier = System.getProperty("build.version_qualifier", "rc1")
+        // 2.0.0-rc1-SNAPSHOT -> 2.0.0.0-rc1-SNAPSHOT
         version_tokens = opensearch_version.tokenize('-')
         opensearch_build = version_tokens[0] + '.0'
         if (buildVersionQualifier) {
@@ -261,6 +261,7 @@ testClusters.integTest {
 String bwcVersion = "1.2.0-SNAPSHOT"
 String baseName = "obsBwcCluster"
 String bwcFilePath = "src/test/kotlin/org/opensearch/observability/resources/bwc/"
+String remoteFileURL = "https://github.com/opensearch-project/observability/releases/download/1.2.0.0/opensearch-observability-1.2.0.0.zip"
 
 2.times {i ->
     testClusters {
@@ -274,6 +275,14 @@ String bwcFilePath = "src/test/kotlin/org/opensearch/observability/resources/bwc
                     return new RegularFile() {
                         @Override
                         File getAsFile() {
+                            File dir = new File(bwcFilePath + bwcVersion)
+                            if (!dir.exists()) {
+                                dir.mkdirs()
+                            }
+                            File file = new File(dir, "opensearch-observability-1.2.0.0-SNAPSHOT.zip")
+                            if (!file.exists()) {
+                                new URL(remoteFileURL).withInputStream{ ins -> file.withOutputStream{ it << ins }}
+                            }
                             return fileTree(bwcFilePath + bwcVersion).getSingleFile()
                         }
                     }
diff --git a/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/.gitignore b/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/.gitignore
new file mode 100644
index 000000000..99f6ad50f
--- /dev/null
+++ b/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/.gitignore
@@ -0,0 +1,4 @@
+# ignore artifacts in this directory
+*
+*/
+!.gitignore
diff --git a/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/1.1.0-SNAPSHOT/opensearch-notebooks-1.1.0.0-SNAPSHOT.zip b/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/1.1.0-SNAPSHOT/opensearch-notebooks-1.1.0.0-SNAPSHOT.zip
deleted file mode 100644
index c51b51033..000000000
Binary files a/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/1.1.0-SNAPSHOT/opensearch-notebooks-1.1.0.0-SNAPSHOT.zip and /dev/null differ
diff --git a/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/1.2.0-SNAPSHOT/opensearch-observability-1.2.0.0-SNAPSHOT.zip b/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/1.2.0-SNAPSHOT/opensearch-observability-1.2.0.0-SNAPSHOT.zip
deleted file mode 100644
index ec0aa0dd9..000000000
Binary files a/opensearch-observability/src/test/kotlin/org/opensearch/observability/resources/bwc/1.2.0-SNAPSHOT/opensearch-observability-1.2.0.0-SNAPSHOT.zip and /dev/null differ