From 0283f2b08366ffe197d7fafdb5774df0c912edce Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 24 Oct 2023 20:58:00 -0700
Subject: [PATCH] [Feature] Match discover look and feel (#1135) (#1180)

* remove unused files

* missing snapshots

* remove unused files

* move sidebar out of explorer for match look and feel

* sidebar panel always with full height

* adjust padding

* make search components wrappable

* adjust noresult/novisualize page

* add padding to datagrid

* restructured sidebar fields to use exact same spacing/paneling as discover, so that field type icons look the same and field action buttons disappear if not hovered over

* address datasource persistency issue

* code changes preparing for integration with app analytics

* resolve page crash and hide datasource for app analytics

* saved object supports datasources, query language, and direct query

* change saved object icon

* bulk delete for saved query

* change data grid to separate sort/page query to not interfere with other components

* basic drag and drop added

* viz config changes

* add margin to resizable

* wrap countdistribution with panel

* pr requested changes

* remove panel wrapper for inner countdistribution

* change datasource selector to only showopensearch/ default cluste

* remove unused files

* missing snapshots

* remove unused files

* url datasource data prsing and clean up

* minor format

* query bar issue when loading direct query saved object

* minor cleanup

* update snapshots

* fix minor query bar issue and add types to searchMeta slice

* stop polling when load from saved object and few related minor changes

* fix polling cleanup issue

* save will not trigger reload

* add language enum

* direct query status indicator

* turn default timestamp/pattern mark to badge and on hover

* flyout resize button margin fix

* direct query data grid fixes

* pr changes and added test

* removed console logs

* searchMetaData type change

* use datasource variable

* fixed types and reduced redundancy

* fixed when data grix shows

* simplify condition checking for datagrid

* update snapshot

---------

(cherry picked from commit ea2fb2c1669a229f4a58de145db81247eaec6b18)

Signed-off-by: Eric Wei <menwe@amazon.com>
Signed-off-by: Eric <menwe@amazon.com>
Signed-off-by: Paul Sebastian <paulstn@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Paul Sebastian <paulstn@amazon.com>
(cherry picked from commit b2ff898ed38b453a4c037dfe95ba811474cc7010)
---
 auto_sync_commit_metadata.json                |     4 +-
 common/constants/data_sources.ts              |    16 +
 common/constants/shared.ts                    |     1 +
 common/types/explorer.ts                      |    23 +-
 .../observability_saved_object_attributes.ts  |    16 +-
 common/utils/index.ts                         |     1 +
 .../components/application.tsx                |     2 +
 .../components/application_analytics/home.tsx |     2 +
 .../common/field_icon/field_icon.tsx          |     2 +-
 public/components/common/query_utils/index.ts |    57 +-
 public/components/common/search/search.tsx    |    79 +-
 .../components/common/search/sql_search.tsx   |   122 +-
 .../__snapshots__/no_results.test.tsx.snap    |   298 +-
 .../__snapshots__/data_grid.test.tsx.snap     |   378 +-
 .../datasources/datasources_selection.tsx     |   197 +-
 .../explorer/direct_query_running.tsx         |    47 +-
 .../explorer/events_views/data_grid.scss      |     3 -
 .../explorer/events_views/data_grid.tsx       |   114 +-
 .../explorer/events_views/docView.scss        |     4 +-
 .../explorer/events_views/doc_flyout.tsx      |     2 +-
 .../event_analytics/explorer/explorer.scss    |     2 +-
 .../event_analytics/explorer/explorer.tsx     |   405 +-
 .../event_analytics/explorer/log_explorer.tsx |     1 +
 .../event_analytics/explorer/no_results.tsx   |    78 +-
 .../__snapshots__/field.test.tsx.snap         |   546 +-
 .../__snapshots__/sidebar.test.tsx.snap       | 18472 +++++++---------
 .../explorer/sidebar/field.tsx                |   136 +-
 .../explorer/sidebar/field_insights.tsx       |    10 +-
 .../sidebar/observability_sidebar.tsx         |    95 +
 .../explorer/sidebar/sidebar.scss             |    28 +
 .../explorer/sidebar/sidebar.tsx              |   327 +-
 .../config_panel/config_panel.scss            |    10 +
 .../data_config_panel_fields.tsx              |   117 +-
 .../data_configurations_panel.scss            |    46 +
 .../data_configurations_panel.tsx             |   103 +-
 .../count_distribution/count_distribution.tsx |     1 +
 .../visualizations/direct_query_vis.tsx       |    81 +-
 .../explorer/visualizations/index.tsx         |    11 +-
 .../redux/slices/query_slice.ts               |     2 +-
 .../redux/slices/search_meta_data_slice.ts    |    57 +-
 .../utils/__tests__/utils.test.tsx            |    16 +-
 .../event_analytics/utils/utils.tsx           |     8 +-
 public/components/hooks/index.ts              |     2 +-
 .../hooks/use_direct_query_search.ts          |     4 -
 public/components/hooks/use_polling.ts        |    78 +-
 public/components/metrics/index.scss          |     2 +-
 .../visualizations/visualization.tsx          |     2 +-
 .../datasources/obs_opensearch_datasource.ts  |    30 +
 .../saved_object_client/client_factory.ts     |     8 +-
 .../osd_saved_object_client.ts                |     4 +
 .../osd_saved_objects/saved_searches.ts       |   179 +
 .../osd_saved_objects/saved_visualization.ts  |     6 +
 .../saved_objects_actions.ts                  |    31 +-
 .../explorer_saved_object_loader.ts           |   387 +
 .../saved_object_loaders/ppl/ppl_loader.ts    |    22 +-
 server/plugin.ts                              |     6 +-
 .../observability_saved_object.ts             |    40 +-
 57 files changed, 10689 insertions(+), 12032 deletions(-)
 create mode 100644 common/constants/data_sources.ts
 create mode 100644 public/components/event_analytics/explorer/sidebar/observability_sidebar.tsx
 delete mode 100644 public/components/hooks/use_direct_query_search.ts
 create mode 100644 public/framework/datasources/obs_opensearch_datasource.ts
 create mode 100644 public/services/saved_objects/saved_object_client/osd_saved_objects/saved_searches.ts
 create mode 100644 public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts

diff --git a/auto_sync_commit_metadata.json b/auto_sync_commit_metadata.json
index f37e6f1fb0..aba11a88b5 100644
--- a/auto_sync_commit_metadata.json
+++ b/auto_sync_commit_metadata.json
@@ -1,4 +1,4 @@
 {
-    "last_github_commit": "e81cc9cad789acddcddef3ec4898bdbf1ecc19d1",
-    "last_gitfarm_commit": "132ea75d7567e1871e822132bb81ac2c04a14769"
+    "last_github_commit": "b2ff898ed38b453a4c037dfe95ba811474cc7010",
+    "last_gitfarm_commit": "d7df9bfb37dec77de9fee47c214b4bb9e23dc0a7"
 }
\ No newline at end of file
diff --git a/common/constants/data_sources.ts b/common/constants/data_sources.ts
new file mode 100644
index 0000000000..aa596ad108
--- /dev/null
+++ b/common/constants/data_sources.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const DATA_SOURCE_NAME_URL_PARAM_KEY = 'datasourceName';
+export const DATA_SOURCE_TYPE_URL_PARAM_KEY = 'datasourceType';
+export const DEFAULT_DATA_SOURCE_TYPE = 'DEFAULT_INDEX_PATTERNS';
+export const DEFAULT_DATA_SOURCE_NAME = 'Default cluster';
+export const DEFAULT_DATA_SOURCE_OBSERVABILITY_DISPLAY_NAME = 'OpenSearch';
+export const DEFAULT_DATA_SOURCE_TYPE_NAME = 'Default Group';
+export const enum QUERY_LANGUAGE {
+  PPL = 'PPL',
+  SQL = 'SQL',
+  DQL = 'DQL',
+}
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
index 8175f33801..198ce05a33 100644
--- a/common/constants/shared.ts
+++ b/common/constants/shared.ts
@@ -242,6 +242,7 @@ export const WAITING_TIME_ON_USER_ACTIONS = 300;
 export const VISUALIZATION_ERROR = {
   NO_DATA: 'No data found.',
   INVALID_DATA: 'Invalid visualization data',
+  NO_SERIES: 'Add a field to start',
 };
 
 export const S3_DATASOURCE_TYPE = 'S3_DATASOURCE';
diff --git a/common/types/explorer.ts b/common/types/explorer.ts
index af94da8026..a36dd81a8d 100644
--- a/common/types/explorer.ts
+++ b/common/types/explorer.ts
@@ -38,6 +38,7 @@ import {
   SavedObjectsStart,
 } from '../../../../src/core/public/saved_objects';
 import { ChromeBreadcrumb } from '../../../../src/core/public/chrome';
+import { DataSourceType } from '../../../../src/plugins/data/public';
 
 export interface IQueryTab {
   id: string;
@@ -145,13 +146,23 @@ export interface IExplorerProps {
   queryManager?: QueryManager;
 }
 
-export interface SavedQuery {
+export interface SelectedDataSource {
+  label: string;
+  name: string;
+  value: string;
+  type: string;
+  ds?: DataSourceType;
+}
+
+export interface SavedQuery extends SavedObjectAttributes {
   description: string;
   name: string;
   query: string;
   selected_date_range: { start: string; end: string; text: string };
   selected_fields: { text: string; tokens: IField[] };
   selected_timestamp: IField;
+  dataSources: string; // list of type SelectedDataSources that is stringified
+  queryLang: string;
 }
 
 export interface SavedVisualization extends SavedObjectAttributes {
@@ -166,6 +177,8 @@ export interface SavedVisualization extends SavedObjectAttributes {
   user_configs?: string;
   units_of_measure?: string;
   application_id?: string;
+  dataSources: string; // list of type SelectedDataSources that is stringified
+  queryLang: string;
 }
 
 export interface ExplorerDataType {
@@ -406,3 +419,11 @@ export interface GridSortingColumn {
   id: string;
   direction: 'asc' | 'desc';
 }
+
+export enum DirectQueryLoadingStatus {
+  SUCCESS = 'SUCCESS',
+  FAILED = 'FAILED',
+  RUNNING = 'RUNNING',
+  SCHEDULED = 'SCHEDULED',
+  CANCELED = 'CANCELED',
+}
diff --git a/common/types/observability_saved_object_attributes.ts b/common/types/observability_saved_object_attributes.ts
index 520f922bc7..a98f0b4b2d 100644
--- a/common/types/observability_saved_object_attributes.ts
+++ b/common/types/observability_saved_object_attributes.ts
@@ -4,10 +4,14 @@
  */
 
 import { SavedObjectAttributes } from '../../../../src/core/types';
-import { SavedVisualization } from './explorer';
+import { SavedQuery, SavedVisualization } from './explorer';
 
 export const VISUALIZATION_SAVED_OBJECT = 'observability-visualization';
-export const OBSERVABILTY_SAVED_OBJECTS = [VISUALIZATION_SAVED_OBJECT] as const;
+export const SEARCH_SAVED_OBJECT = 'observability-search';
+export const OBSERVABILTY_SAVED_OBJECTS = [
+  VISUALIZATION_SAVED_OBJECT,
+  SEARCH_SAVED_OBJECT,
+] as const;
 export const SAVED_OBJECT_VERSION = 1;
 
 export interface VisualizationSavedObjectAttributes extends SavedObjectAttributes {
@@ -17,3 +21,11 @@ export interface VisualizationSavedObjectAttributes extends SavedObjectAttribute
   createdTimeMs: number;
   savedVisualization: SavedVisualization;
 }
+
+export interface SearchSavedObjectAttributes extends SavedObjectAttributes {
+  title: string;
+  description: string;
+  version: number;
+  createdTimeMs: number;
+  savedQuery: SavedQuery;
+}
diff --git a/common/utils/index.ts b/common/utils/index.ts
index 284c1f4b0c..0becefc0ac 100644
--- a/common/utils/index.ts
+++ b/common/utils/index.ts
@@ -10,6 +10,7 @@ export {
   buildRawQuery,
   composeFinalQuery,
   removeBacktick,
+  getSavingCommonParams,
 } from '../../public/components/common/query_utils';
 
 export * from './core_services';
diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
index d5ba1b8fe7..bdfea879a8 100644
--- a/public/components/application_analytics/components/application.tsx
+++ b/public/components/application_analytics/components/application.tsx
@@ -116,6 +116,7 @@ export function Application(props: AppDetailProps) {
     callback,
     queryManager,
     mode,
+    dataSourcePluggables,
   } = props;
   const [application, setApplication] = useState<ApplicationType>({
     id: '',
@@ -371,6 +372,7 @@ export function Application(props: AppDetailProps) {
         callbackInApp={callbackInApp}
         queryManager={queryManager}
         curSelectedTabId={selectedTabId}
+        dataSourcePluggables={dataSourcePluggables}
       />
     );
   };
diff --git a/public/components/application_analytics/home.tsx b/public/components/application_analytics/home.tsx
index a97f56f34d..c360e50d9b 100644
--- a/public/components/application_analytics/home.tsx
+++ b/public/components/application_analytics/home.tsx
@@ -73,6 +73,7 @@ export const Home = (props: HomeProps) => {
     chrome,
     notifications,
     queryManager,
+    dataSourcePluggables,
   } = props;
   const [triggerSwitchToEvent, setTriggerSwitchToEvent] = useState(0);
   const dispatch = useDispatch();
@@ -140,6 +141,7 @@ export const Home = (props: HomeProps) => {
     setEndTime,
     mode: 'data_prepper',
     dataPrepperIndicesExist: indicesExist,
+    dataSourcePluggables,
   };
 
   const setToast = (title: string, color = 'success', text?: ReactChild) => {
diff --git a/public/components/common/field_icon/field_icon.tsx b/public/components/common/field_icon/field_icon.tsx
index 467c2c7c0b..e5b2d01173 100644
--- a/public/components/common/field_icon/field_icon.tsx
+++ b/public/components/common/field_icon/field_icon.tsx
@@ -50,7 +50,7 @@ export const typeToEuiIconMap: Partial<Record<string, EuiTokenProps>> = {
 export function FieldIcon({
   type,
   label,
-  size = 'l',
+  size = 's',
   scripted,
   className,
   ...rest
diff --git a/public/components/common/query_utils/index.ts b/public/components/common/query_utils/index.ts
index 98d0b54ff0..bed3432dbb 100644
--- a/public/components/common/query_utils/index.ts
+++ b/public/components/common/query_utils/index.ts
@@ -6,10 +6,12 @@
 import dateMath from '@elastic/datemath';
 import { Moment } from 'moment-timezone';
 import { isEmpty } from 'lodash';
-import moment from 'moment';
+import { SearchMetaData } from 'public/components/event_analytics/redux/slices/search_meta_data_slice';
 import {
-  DATE_PICKER_FORMAT,
   PPL_DEFAULT_PATTERN_REGEX_FILETER,
+  SELECTED_DATE_RANGE,
+  SELECTED_FIELDS,
+  SELECTED_TIMESTAMP,
 } from '../../../../common/constants/explorer';
 import {
   PPL_DATE_FORMAT,
@@ -17,6 +19,7 @@ import {
   PPL_INDEX_REGEX,
   PPL_NEWLINE_REGEX,
 } from '../../../../common/constants/shared';
+import { IExplorerFields, IQuery } from '../../../../common/types/explorer';
 
 /*
  * "Query Utils" This file contains different reused functions in operational panels
@@ -186,9 +189,6 @@ export const preprocessQuery = ({
 
   if (!start || !end) return finalQuery;
 
-  const formattedStart = moment(start).utc().format(DATE_PICKER_FORMAT);
-  const formattedEnd = moment(end).utc().format(DATE_PICKER_FORMAT);
-
   const promQLTokens = parsePromQLIntoKeywords(rawQuery);
 
   if (promQLTokens?.connection) {
@@ -245,24 +245,12 @@ export const buildPatternsQuery = (
   return finalQuery;
 };
 
-export const buildQuery = (baseQuery: string, currQuery: string) => {
-  let fullQuery: string;
-  if (baseQuery) {
-    fullQuery = baseQuery;
-    if (currQuery) {
-      fullQuery += '| ' + currQuery;
-    }
-  } else {
-    fullQuery = currQuery;
-  }
-  return fullQuery;
-};
+export const buildQuery = (baseQuery: string, currQuery: string) => baseQuery + '| ' + currQuery;
 
-export const buildRawQuery = (query: any, appBaseQuery: string) => {
-  const rawQueryStr = (query.rawQuery as string).includes(appBaseQuery)
-    ? query.rawQuery
-    : buildQuery(appBaseQuery, query.rawQuery);
-  return rawQueryStr;
+export const buildRawQuery = (query: IQuery, appBaseQuery: string) => {
+  if (appBaseQuery && !query.rawQuery.includes(appBaseQuery))
+    return buildQuery(appBaseQuery, query.rawQuery);
+  return query.rawQuery;
 };
 
 export const composeFinalQuery = (
@@ -294,3 +282,28 @@ export const removeBacktick = (stringContainsBacktick: string) => {
   if (!stringContainsBacktick) return '';
   return stringContainsBacktick.replace(/`/g, '');
 };
+
+export const getSavingCommonParams = (
+  queryState: IQuery,
+  appBaseQuery: string,
+  fields: IExplorerFields,
+  savingTitle: string,
+  explorerSearchMeta: SearchMetaData
+) => {
+  return {
+    dataSources: JSON.stringify([
+      {
+        name: explorerSearchMeta.datasources?.[0]?.name || '',
+        type: explorerSearchMeta.datasources?.[0]?.type || '',
+        label: explorerSearchMeta.datasources?.[0]?.label || '',
+        value: explorerSearchMeta.datasources?.[0]?.value || '',
+      },
+    ]),
+    queryLang: explorerSearchMeta.lang,
+    query: buildRawQuery(queryState, appBaseQuery),
+    fields: fields[SELECTED_FIELDS],
+    dateRange: queryState[SELECTED_DATE_RANGE],
+    name: savingTitle,
+    timestamp: queryState[SELECTED_TIMESTAMP],
+  };
+};
diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
index 604575850b..de450d09c1 100644
--- a/public/components/common/search/search.tsx
+++ b/public/components/common/search/search.tsx
@@ -20,24 +20,21 @@ import {
 } from '@elastic/eui';
 import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { APP_ANALYTICS_TAB_ID_REGEX, RAW_QUERY } from '../../../../common/constants/explorer';
+import { useDispatch } from 'react-redux';
+import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
 import { PPL_SPAN_REGEX } from '../../../../common/constants/shared';
 import { uiSettingsService } from '../../../../common/utils';
 import { useFetchEvents } from '../../../components/event_analytics/hooks';
-import { changeQuery } from '../../../components/event_analytics/redux/slices/query_slice';
 import { usePolling } from '../../../components/hooks/use_polling';
 import { coreRefs } from '../../../framework/core_refs';
 import { SQLService } from '../../../services/requests/sql';
 import { SavePanel } from '../../event_analytics/explorer/save_panel';
-import {
-  selectSearchMetaData,
-  update as updateSearchMetaData,
-} from '../../event_analytics/redux/slices/search_meta_data_slice';
+import { update as updateSearchMetaData } from '../../event_analytics/redux/slices/search_meta_data_slice';
 import { PPLReferenceFlyout } from '../helpers';
 import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button';
 import { Autocomplete } from './autocomplete';
 import { DatePicker } from './date_picker';
+import { QUERY_LANGUAGE } from '../../../../common/constants/data_sources';
 export interface IQueryBarProps {
   query: string;
   tempQuery: string;
@@ -97,14 +94,12 @@ export const Search = (props: any) => {
     setIsQueryRunning,
   } = props;
 
-  const explorerSearchMetadata = useSelector(selectSearchMetaData)[tabId];
   const dispatch = useDispatch();
   const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
   const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
   const [isLanguagePopoverOpen, setLanguagePopoverOpen] = useState(false);
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-  const [queryLang, setQueryLang] = useState('PPL');
-  const [jobId, setJobId] = useState('');
+  const [queryLang, setQueryLang] = useState(QUERY_LANGUAGE.PPL);
   const sqlService = new SQLService(coreRefs.http);
   const { application } = coreRefs;
 
@@ -119,7 +114,7 @@ export const Search = (props: any) => {
   }, 5000);
 
   const requestParams = { tabId };
-  const { getLiveTail, getEvents, getAvailableFields, dispatchOnGettingHis } = useFetchEvents({
+  const { dispatchOnGettingHis } = useFetchEvents({
     pplService: new SQLService(coreRefs.http),
     requestParams,
   });
@@ -163,10 +158,9 @@ export const Search = (props: any) => {
   );
 
   const handleQueryLanguageChange = (lang: string) => {
-    if (lang === 'DQL') {
-      return application!.navigateToUrl(
-        `../app/data-explorer/discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${explorerSearchMetadata.datasources[0].value}',view:discover))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_q=(filters:!(),query:(language:kuery,query:''))`
-      );
+    if (lang === QUERY_LANGUAGE.DQL) {
+      application!.navigateToUrl('../app/data-explorer/discover');
+      return;
     }
     dispatch(
       updateSearchMetaData({
@@ -187,10 +181,16 @@ export const Search = (props: any) => {
   };
 
   const languagePopOverItems = [
-    <EuiContextMenuItem key="PPL" onClick={() => handleQueryLanguageChange('PPL')}>
+    <EuiContextMenuItem
+      key={QUERY_LANGUAGE.PPL}
+      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.PPL)}
+    >
       PPL
     </EuiContextMenuItem>,
-    <EuiContextMenuItem key="DQL" onClick={() => handleQueryLanguageChange('DQL')}>
+    <EuiContextMenuItem
+      key={QUERY_LANGUAGE.DQL}
+      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.DQL)}
+    >
       DQL
     </EuiContextMenuItem>,
   ];
@@ -215,24 +215,9 @@ export const Search = (props: any) => {
     }
   }, [pollingResult, pollingError]);
 
-  useEffect(() => {
-    if (explorerSearchMetadata.datasources?.[0]?.type === 'DEFAULT_INDEX_PATTERNS') {
-      const queryWithSelectedSource = `source = ${explorerSearchMetadata.datasources[0].label}`;
-      handleQueryChange(queryWithSelectedSource);
-      dispatch(
-        changeQuery({
-          tabId,
-          query: {
-            [RAW_QUERY]: queryWithSelectedSource,
-          },
-        })
-      );
-    }
-  }, [explorerSearchMetadata.datasources]);
-
   return (
     <div className="globalQueryBar">
-      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
+      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart" wrap>
         {appLogEvents && (
           <EuiFlexItem style={{ minWidth: 110 }} grow={false}>
             <EuiToolTip position="top" content={baseQuery}>
@@ -242,19 +227,21 @@ export const Search = (props: any) => {
             </EuiToolTip>
           </EuiFlexItem>
         )}
-        <EuiFlexItem key="lang-selector" className="search-area lang-selector" grow={false}>
-          <EuiPopover
-            id="smallContextMenuExample"
-            button={languagePopOverButton}
-            isOpen={isLanguagePopoverOpen}
-            closePopover={closeLanguagePopover}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel size="s" items={languagePopOverItems} />
-          </EuiPopover>
-        </EuiFlexItem>
-        <EuiFlexItem key="search-bar" className="search-area" grow={5}>
+        {!appLogEvents && (
+          <EuiFlexItem key="lang-selector" className="search-area lang-selector" grow={false}>
+            <EuiPopover
+              id="smallContextMenuExample"
+              button={languagePopOverButton}
+              isOpen={isLanguagePopoverOpen}
+              closePopover={closeLanguagePopover}
+              panelPaddingSize="none"
+              anchorPosition="downLeft"
+            >
+              <EuiContextMenuPanel size="s" items={languagePopOverItems} />
+            </EuiPopover>
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem key="search-bar" className="search-area" grow={5} style={{ minWidth: 400 }}>
           <Autocomplete
             key={'autocomplete-search-bar'}
             query={query}
diff --git a/public/components/common/search/sql_search.tsx b/public/components/common/search/sql_search.tsx
index b31f381ed6..5a0b18ae73 100644
--- a/public/components/common/search/sql_search.tsx
+++ b/public/components/common/search/sql_search.tsx
@@ -20,9 +20,10 @@ import {
 } from '@elastic/eui';
 import { isEqual, lowerCase } from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
-import { PPL_SPAN_REGEX } from '../../../../common/constants/shared';
+import { batch, useDispatch, useSelector } from 'react-redux';
+import { APP_ANALYTICS_TAB_ID_REGEX, RAW_QUERY } from '../../../../common/constants/explorer';
+import { DirectQueryLoadingStatus } from '../../../../common/types/explorer';
+import { PPL_NEWLINE_REGEX, PPL_SPAN_REGEX } from '../../../../common/constants/shared';
 import { uiSettingsService } from '../../../../common/utils';
 import { useFetchEvents } from '../../../components/event_analytics/hooks';
 import { usePolling } from '../../../components/hooks/use_polling';
@@ -35,6 +36,8 @@ import {
 } from '../../event_analytics/redux/slices/search_meta_data_slice';
 import { PPLReferenceFlyout } from '../helpers';
 import { Autocomplete } from './autocomplete';
+import { changeQuery } from '../../../components/event_analytics/redux/slices/query_slice';
+import { QUERY_LANGUAGE } from '../../../../common/constants/data_sources';
 export interface IQueryBarProps {
   query: string;
   tempQuery: string;
@@ -59,13 +62,7 @@ export const DirectSearch = (props: any) => {
     query,
     tempQuery,
     handleQueryChange,
-    handleTimePickerChange,
     dslService,
-    startTime,
-    endTime,
-    setStartTime,
-    setEndTime,
-    setIsOutputStale,
     selectedPanelName,
     selectedCustomPanelOptions,
     setSelectedPanelName,
@@ -75,33 +72,24 @@ export const DirectSearch = (props: any) => {
     savedObjects,
     showSavePanelOptionsList,
     showSaveButton = true,
-    handleTimeRangePickerRefresh,
-    isLiveTailPopoverOpen,
-    closeLiveTailPopover,
-    popoverItems,
-    isLiveTailOn,
     selectedSubTabId,
     searchBarConfigs = {},
     getSuggestions,
     onItemSelect,
     tabId = '',
     baseQuery = '',
-    stopLive,
-    setIsLiveTailPopoverOpen,
-    liveTailName,
     curVisId,
     setSubType,
     setIsQueryRunning,
   } = props;
 
-  const explorerSearchMetadata = useSelector(selectSearchMetaData)[tabId];
+  const explorerSearchMetadata = useSelector(selectSearchMetaData)[tabId] || {};
   const dispatch = useDispatch();
   const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
   const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [isLanguagePopoverOpen, setLanguagePopoverOpen] = useState(false);
-  const [queryLang, setQueryLang] = useState('SQL');
-  const [jobId, setJobId] = useState('');
+  const [queryLang, setQueryLang] = useState(explorerSearchMetadata.lang || QUERY_LANGUAGE.SQL);
   const sqlService = new SQLService(coreRefs.http);
   const { application } = coreRefs;
 
@@ -116,7 +104,7 @@ export const DirectSearch = (props: any) => {
   }, 5000);
 
   const requestParams = { tabId };
-  const { getLiveTail, getEvents, getAvailableFields, dispatchOnGettingHis } = useFetchEvents({
+  const { dispatchOnGettingHis } = useFetchEvents({
     pplService: new SQLService(coreRefs.http),
     requestParams,
   });
@@ -151,16 +139,10 @@ export const DirectSearch = (props: any) => {
 
   const handleQueryLanguageChange = (lang: string) => {
     if (lang === 'DQL') {
-      return application!.navigateToUrl(
-        `../app/data-explorer/discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${explorerSearchMetadata.datasources[0].value}',view:discover))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_q=(filters:!(),query:(language:kuery,query:''))`
-      );
+      application!.navigateToUrl('../app/data-explorer/discover');
+      return;
     }
-    dispatch(
-      updateSearchMetaData({
-        tabId,
-        data: { lang },
-      })
-    );
+    dispatch(updateSearchMetaData({ tabId, data: { lang } }));
     setQueryLang(lang);
     closeLanguagePopover();
   };
@@ -174,10 +156,16 @@ export const DirectSearch = (props: any) => {
   };
 
   const languagePopOverItems = [
-    <EuiContextMenuItem key="SQL" onClick={() => handleQueryLanguageChange('SQL')}>
+    <EuiContextMenuItem
+      key={QUERY_LANGUAGE.SQL}
+      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.SQL)}
+    >
       SQL
     </EuiContextMenuItem>,
-    <EuiContextMenuItem key="PPL" onClick={() => handleQueryLanguageChange('PPL')}>
+    <EuiContextMenuItem
+      key={QUERY_LANGUAGE.PPL}
+      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.PPL)}
+    >
       PPL
     </EuiContextMenuItem>,
   ];
@@ -194,16 +182,14 @@ export const DirectSearch = (props: any) => {
     </EuiButton>
   );
 
-  const onQuerySearch = (lang) => {
+  const onQuerySearch = (lang: string) => {
     setIsQueryRunning(true);
-    dispatch(
-      updateSearchMetaData({
-        tabId,
-        data: {
-          isPolling: true,
-        },
-      })
-    );
+    batch(() => {
+      dispatch(
+        changeQuery({ tabId, query: { [RAW_QUERY]: tempQuery.replaceAll(PPL_NEWLINE_REGEX, '') } })
+      );
+    });
+    dispatch(updateSearchMetaData({ tabId, data: { isPolling: true, lang } }));
     sqlService
       .fetch({
         lang: lowerCase(lang),
@@ -212,7 +198,6 @@ export const DirectSearch = (props: any) => {
       })
       .then((result) => {
         if (result.queryId) {
-          setJobId(result.queryId);
           startPolling({
             queryId: result.queryId,
           });
@@ -229,7 +214,10 @@ export const DirectSearch = (props: any) => {
 
   useEffect(() => {
     // cancel direct query
-    if (pollingResult && (pollingResult.status === 'SUCCESS' || pollingResult.datarows)) {
+    if (!pollingResult) return;
+    const { status, datarows } = pollingResult;
+
+    if (status === DirectQueryLoadingStatus.SUCCESS || datarows) {
       // stop polling
       stopPolling();
       setIsQueryRunning(false);
@@ -238,16 +226,30 @@ export const DirectSearch = (props: any) => {
           tabId,
           data: {
             isPolling: false,
+            status: undefined,
           },
         })
       );
       // update page with data
       dispatchOnGettingHis(pollingResult, '');
+      return;
     }
+    dispatch(
+      updateSearchMetaData({
+        tabId,
+        data: { status },
+      })
+    );
   }, [pollingResult, pollingError]);
 
   useEffect(() => {
-    if (explorerSearchMetadata.isPolling === false) {
+    return () => {
+      stopPolling();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!explorerSearchMetadata.isPolling) {
       stopPolling();
       setIsQueryRunning(false);
     }
@@ -255,7 +257,7 @@ export const DirectSearch = (props: any) => {
 
   return (
     <div className="globalQueryBar">
-      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
+      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart" wrap>
         {appLogEvents && (
           <EuiFlexItem style={{ minWidth: 110 }} grow={false}>
             <EuiToolTip position="top" content={baseQuery}>
@@ -265,19 +267,21 @@ export const DirectSearch = (props: any) => {
             </EuiToolTip>
           </EuiFlexItem>
         )}
-        <EuiFlexItem key="lang-selector" className="search-area" grow={false}>
-          <EuiPopover
-            id="smallContextMenuExample"
-            button={languagePopOverButton}
-            isOpen={isLanguagePopoverOpen}
-            closePopover={closeLanguagePopover}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-          >
-            <EuiContextMenuPanel size="s" items={languagePopOverItems} />
-          </EuiPopover>
-        </EuiFlexItem>
-        <EuiFlexItem key="search-bar" className="search-area" grow={5}>
+        {!appLogEvents && (
+          <EuiFlexItem key="lang-selector" className="search-area lang-selector" grow={false}>
+            <EuiPopover
+              id="smallContextMenuExample"
+              button={languagePopOverButton}
+              isOpen={isLanguagePopoverOpen}
+              closePopover={closeLanguagePopover}
+              panelPaddingSize="none"
+              anchorPosition="downLeft"
+            >
+              <EuiContextMenuPanel size="s" items={languagePopOverItems} />
+            </EuiPopover>
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem key="search-bar" className="search-area" grow={5} style={{ minWidth: 400 }}>
           <Autocomplete
             key={'autocomplete-search-bar'}
             query={query}
@@ -294,7 +298,7 @@ export const DirectSearch = (props: any) => {
             isSuggestionDisabled={queryLang === 'SQL'}
             isDisabled={explorerSearchMetadata.isPolling}
           />
-          {queryLang === 'PPL' && (
+          {queryLang === QUERY_LANGUAGE.PPL && (
             <EuiBadge
               className={`ppl-link ${
                 uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'
diff --git a/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap b/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
index 50c496076a..97a94028cb 100644
--- a/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
+++ b/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
@@ -2,211 +2,141 @@
 
 exports[`No result component Renders No result component 1`] = `
 <Component>
-  <I18nProvider>
-    <IntlProvider
-      defaultLocale="en"
-      formats={
-        Object {
-          "date": Object {
-            "full": Object {
-              "day": "numeric",
-              "month": "long",
-              "weekday": "long",
-              "year": "numeric",
-            },
-            "long": Object {
-              "day": "numeric",
-              "month": "long",
-              "year": "numeric",
-            },
-            "medium": Object {
-              "day": "numeric",
-              "month": "short",
-              "year": "numeric",
-            },
-            "short": Object {
-              "day": "numeric",
-              "month": "numeric",
-              "year": "2-digit",
-            },
-          },
-          "number": Object {
-            "currency": Object {
-              "style": "currency",
-            },
-            "percent": Object {
-              "style": "percent",
-            },
-          },
-          "relative": Object {
-            "days": Object {
-              "units": "day",
-            },
-            "hours": Object {
-              "units": "hour",
-            },
-            "minutes": Object {
-              "units": "minute",
-            },
-            "months": Object {
-              "units": "month",
-            },
-            "seconds": Object {
-              "units": "second",
-            },
-            "years": Object {
-              "units": "year",
-            },
-          },
-          "time": Object {
-            "full": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "long": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "medium": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-            },
-            "short": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-            },
-          },
-        }
-      }
-      locale="en"
-      messages={Object {}}
-      textComponent={Symbol(react.fragment)}
+  <EuiPage
+    paddingSize="s"
+  >
+    <div
+      className="euiPage euiPage--paddingSmall euiPage--grow"
     >
-      <PseudoLocaleWrapper>
-        <EuiSpacer
-          size="xl"
+      <EuiFlexGroup
+        direction="column"
+        justifyContent="center"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
-          <div
-            className="euiSpacer euiSpacer--xl"
-          />
-        </EuiSpacer>
-        <EuiFlexGroup
-          justifyContent="center"
-        >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          <EuiFlexItem
+            grow={false}
           >
-            <EuiFlexItem
-              className="dscNoResults"
-              grow={false}
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero dscNoResults"
+              <EuiCallOut
+                color="warning"
+                data-test-subj="observabilityNoResultsCallout"
+                iconType="help"
+                title={
+                  <FormattedMessage
+                    defaultMessage="No results match your search criteria"
+                    id="observability.noResults.noResultsMatchSearchCriteriaTitle"
+                    values={Object {}}
+                  />
+                }
               >
-                <EuiCallOut
-                  color="warning"
-                  data-test-subj="discoverNoResults"
-                  iconType="help"
-                  title={
-                    <FormattedMessage
-                      defaultMessage="No results match your search criteria"
-                      id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
-                      values={Object {}}
-                    />
-                  }
+                <div
+                  className="euiCallOut euiCallOut--warning"
+                  data-test-subj="observabilityNoResultsCallout"
                 >
                   <div
-                    className="euiCallOut euiCallOut--warning"
-                    data-test-subj="discoverNoResults"
+                    className="euiCallOutHeader"
                   >
-                    <div
-                      className="euiCallOutHeader"
+                    <EuiIcon
+                      aria-hidden="true"
+                      className="euiCallOutHeader__icon"
+                      color="inherit"
+                      size="m"
+                      type="help"
                     >
-                      <EuiIcon
-                        aria-hidden="true"
-                        className="euiCallOutHeader__icon"
-                        color="inherit"
-                        size="m"
-                        type="help"
+                      <EuiIconEmpty
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
+                        focusable="false"
+                        role="img"
+                        style={null}
                       >
-                        <EuiIconEmpty
+                        <svg
                           aria-hidden={true}
                           className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
                           focusable="false"
+                          height={16}
                           role="img"
                           style={null}
-                        >
-                          <svg
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__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="euiCallOutHeader__title"
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </EuiIconEmpty>
+                    </EuiIcon>
+                    <span
+                      className="euiCallOutHeader__title"
+                    >
+                      <FormattedMessage
+                        defaultMessage="No results match your search criteria"
+                        id="observability.noResults.noResultsMatchSearchCriteriaTitle"
+                        values={Object {}}
                       >
-                        <FormattedMessage
-                          defaultMessage="No results match your search criteria"
-                          id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
-                          values={Object {}}
-                        >
+                        <span>
                           No results match your search criteria
-                        </FormattedMessage>
-                      </span>
-                    </div>
+                        </span>
+                      </FormattedMessage>
+                    </span>
                   </div>
-                </EuiCallOut>
-                <EuiSpacer
-                  size="xl"
+                </div>
+              </EuiCallOut>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiText>
+                <div
+                  className="euiText euiText--medium"
                 >
-                  <div
-                    className="euiSpacer euiSpacer--xl"
-                  />
-                </EuiSpacer>
-                <EuiText>
-                  <div
-                    className="euiText euiText--medium"
+                  <h2
+                    data-test-subj="obsNoResultsTimefilter"
                   >
-                    <h2
-                      data-test-subj="discoverNoResultsTimefilter"
+                    <FormattedMessage
+                      defaultMessage="Expand your time range or modify your query"
+                      id="observability.noResults.expandYourTimeRangeTitle"
+                      values={Object {}}
                     >
-                      <FormattedMessage
-                        defaultMessage="Expand your time range or modify your query"
-                        id="discover.noResults.expandYourTimeRangeTitle"
-                        values={Object {}}
-                      >
+                      <span>
                         Expand your time range or modify your query
-                      </FormattedMessage>
-                    </h2>
-                    <p>
-                      <FormattedMessage
-                        defaultMessage="Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields"
-                        id="discover.noResults.queryMayNotMatchTitle"
-                        values={Object {}}
-                      >
-                        Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields
-                      </FormattedMessage>
-                    </p>
-                  </div>
-                </EuiText>
-              </div>
-            </EuiFlexItem>
-          </div>
-        </EuiFlexGroup>
-      </PseudoLocaleWrapper>
-    </IntlProvider>
-  </I18nProvider>
+                      </span>
+                    </FormattedMessage>
+                  </h2>
+                  <p>
+                    <FormattedMessage
+                      defaultMessage="Your query may not match anything in the current time range, 
+                or there may not be any data at all in the currently selected time range. 
+                Try change time range, query filters or choose different time fields."
+                      id="observability.noResults.queryMayNotMatchTitle"
+                      values={Object {}}
+                    >
+                      <span>
+                        Your query may not match anything in the current time range, 
+                or there may not be any data at all in the currently selected time range. 
+                Try change time range, query filters or choose different time fields.
+                      </span>
+                    </FormattedMessage>
+                  </p>
+                </div>
+              </EuiText>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+    </div>
+  </EuiPage>
 </Component>
 `;
diff --git a/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap b/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
index a0e63ed20c..e21e9494f0 100644
--- a/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
+++ b/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
@@ -220,217 +220,225 @@ exports[`Datagrid component Renders data grid component 1`] = `
     timeStampField="timestamp"
     totalHits={1390}
   >
-    <div
-      className="dscTable dscTableFixedScroll"
+    <EuiPanel
+      paddingSize="s"
     >
-      <EuiDataGrid
-        aria-labelledby="aria-labelledby"
-        columnVisibility={
-          Object {
-            "setVisibleColumns": [Function],
-            "visibleColumns": Array [
-              "timestamp",
-              "_source",
-            ],
-          }
-        }
-        columns={
-          Array [
-            Object {
-              "display": "Time",
-              "id": "timestamp",
-              "initialWidth": 200,
-              "isSortable": true,
-              "schema": "datetime",
-            },
-            Object {
-              "display": "Source",
-              "id": "_source",
-              "isSortable": false,
-              "schema": "_source",
-            },
-          ]
-        }
-        data-test-subj="docTable"
-        leadingControlColumns={
-          Array [
-            Object {
-              "headerCellRender": [Function],
-              "id": "inspectCollapseColumn",
-              "rowCellRender": [Function],
-              "width": 40,
-            },
-          ]
-        }
-        pagination={
-          Object {
-            "onChangeItemsPerPage": [Function],
-            "onChangePage": [Function],
-            "pageIndex": 0,
-            "pageSize": 100,
-            "pageSizeOptions": Array [
-              25,
-              50,
-              100,
-            ],
-          }
-        }
-        renderCellValue={[Function]}
-        rowCount={1390}
-        rowHeightsOptions={
-          Object {
-            "defaultHeight": Object {
-              "lineCount": 3,
-            },
-          }
-        }
-        sorting={
-          Object {
-            "columns": Array [],
-            "onSort": [Function],
-          }
-        }
-        toolbarVisibility={
-          Object {
-            "showColumnSelector": Object {
-              "allowHide": false,
-              "allowReorder": true,
-            },
-            "showFullScreenSelector": false,
-            "showStyleSelector": false,
-          }
-        }
+      <div
+        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
       >
-        <EuiFocusTrap
-          className="euiDataGrid__focusWrap"
-          clickOutsideDisables={false}
-          disabled={true}
-          noIsolation={true}
-          returnFocus={true}
-          scrollLock={false}
+        <div
+          className="dscTable dscTableFixedScroll"
         >
-          <ForwardRef
-            className="euiDataGrid__focusWrap"
-            enabled={false}
-            noIsolation={true}
-            onClickOutside={[Function]}
-            returnFocus={true}
-            scrollLock={false}
+          <EuiDataGrid
+            aria-labelledby="aria-labelledby"
+            columnVisibility={
+              Object {
+                "setVisibleColumns": [Function],
+                "visibleColumns": Array [
+                  "timestamp",
+                  "_source",
+                ],
+              }
+            }
+            columns={
+              Array [
+                Object {
+                  "display": "Time",
+                  "id": "timestamp",
+                  "initialWidth": 200,
+                  "isSortable": true,
+                  "schema": "datetime",
+                },
+                Object {
+                  "display": "Source",
+                  "id": "_source",
+                  "isSortable": false,
+                  "schema": "_source",
+                },
+              ]
+            }
+            data-test-subj="docTable"
+            leadingControlColumns={
+              Array [
+                Object {
+                  "headerCellRender": [Function],
+                  "id": "inspectCollapseColumn",
+                  "rowCellRender": [Function],
+                  "width": 40,
+                },
+              ]
+            }
+            pagination={
+              Object {
+                "onChangeItemsPerPage": [Function],
+                "onChangePage": [Function],
+                "pageIndex": 0,
+                "pageSize": 100,
+                "pageSizeOptions": Array [
+                  25,
+                  50,
+                  100,
+                ],
+              }
+            }
+            renderCellValue={[Function]}
+            rowCount={1390}
+            rowHeightsOptions={
+              Object {
+                "defaultHeight": Object {
+                  "lineCount": 3,
+                },
+              }
+            }
+            sorting={
+              Object {
+                "columns": Array [],
+                "onSort": [Function],
+              }
+            }
+            toolbarVisibility={
+              Object {
+                "showColumnSelector": Object {
+                  "allowHide": false,
+                  "allowReorder": true,
+                },
+                "showFullScreenSelector": false,
+                "showStyleSelector": false,
+              }
+            }
           >
-            <ForwardRef
+            <EuiFocusTrap
               className="euiDataGrid__focusWrap"
-              enabled={false}
+              clickOutsideDisables={false}
+              disabled={true}
               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}
+              <ForwardRef
                 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}
+                enabled={false}
+                noIsolation={true}
+                onClickOutside={[Function]}
                 returnFocus={true}
-                sideCar={[Function]}
+                scrollLock={false}
               >
-                <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}
+                  noIsolation={true}
+                  onClickOutside={[Function]}
+                  returnFocus={true}
+                  scrollLock={false}
                   sideCar={[Function]}
                 >
-                  <div
+                  <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"
-                    data-focus-lock-disabled="disabled"
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onScrollCapture={[Function]}
-                    onTouchMoveCapture={[Function]}
-                    onWheelCapture={[Function]}
+                    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
-                      className="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
-                      data-test-subj="docTable"
-                      onKeyDown={[Function]}
+                      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="docTable"
+                          onKeyDown={[Function]}
+                          style={
+                            Object {
+                              "height": undefined,
+                              "width": undefined,
+                            }
+                          }
+                        />
+                      </div>
+                    </ForwardRef>
+                    <div
+                      data-focus-guard={true}
                       style={
                         Object {
-                          "height": undefined,
-                          "width": undefined,
+                          "height": "0px",
+                          "left": "1px",
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "fixed",
+                          "top": "1px",
+                          "width": "1px",
                         }
                       }
+                      tabIndex={-1}
                     />
-                  </div>
+                  </ForwardRef(FocusLockUI)>
                 </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>
-    </div>
+              </ForwardRef>
+            </EuiFocusTrap>
+          </EuiDataGrid>
+        </div>
+      </div>
+    </EuiPanel>
   </DataGrid>
 </Provider>
 `;
diff --git a/public/components/event_analytics/explorer/datasources/datasources_selection.tsx b/public/components/event_analytics/explorer/datasources/datasources_selection.tsx
index 5d4fe5f9a7..bbea0a6282 100644
--- a/public/components/event_analytics/explorer/datasources/datasources_selection.tsx
+++ b/public/components/event_analytics/explorer/datasources/datasources_selection.tsx
@@ -3,10 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState, useMemo } from 'react';
 import { batch, useDispatch, useSelector } from 'react-redux';
 import { LogExplorerRouterContext } from '../..';
-import { DataSourceSelectable } from '../../../../../../../src/plugins/data/public';
+import {
+  DataSourceGroup,
+  DataSourceSelectable,
+  DataSourceType,
+} from '../../../../../../../src/plugins/data/public';
 import { coreRefs } from '../../../../framework/core_refs';
 import {
   selectSearchMetaData,
@@ -18,109 +22,168 @@ import { reset as resetPatterns } from '../../redux/slices/patterns_slice';
 import { reset as resetQueryResults } from '../../redux/slices/query_result_slice';
 import { reset as resetVisualization } from '../../redux/slices/visualization_slice';
 import { reset as resetVisConfig } from '../../redux/slices/viualization_config_slice';
+import { reset as resetQuery } from '../../redux/slices/query_slice';
+import { SelectedDataSource } from '../../../../../common/types/explorer';
+import { ObservabilityDefaultDataSource } from '../../../../framework/datasources/obs_opensearch_datasource';
+import {
+  DATA_SOURCE_TYPE_URL_PARAM_KEY,
+  DATA_SOURCE_NAME_URL_PARAM_KEY,
+  DEFAULT_DATA_SOURCE_NAME,
+  DEFAULT_DATA_SOURCE_TYPE,
+  DEFAULT_DATA_SOURCE_TYPE_NAME,
+  DEFAULT_DATA_SOURCE_OBSERVABILITY_DISPLAY_NAME,
+} from '../../../../../common/constants/data_sources';
+
+const getDataSourceState = (selectedSourceState: SelectedDataSource[]) => {
+  if (selectedSourceState.length === 0) return [];
+  return [
+    {
+      label: selectedSourceState[0].label,
+      value: selectedSourceState[0].value,
+      type: selectedSourceState[0].type,
+      name: selectedSourceState[0].name,
+    },
+  ];
+};
+
+const removeDataSourceFromURLParams = (currURL: string) => {
+  // Parse the current URL
+  const currentURL = new URL(currURL);
+
+  // Split the hash into its base and query parts
+  const [hashBase, hashQuery] = currentURL.hash.split('?');
 
-export const DataSourceSelection = ({ tabId }) => {
+  if (hashQuery) {
+    // Convert the hash query into a URLSearchParams object for easier manipulation
+    const hashParams = new URLSearchParams(hashQuery);
+
+    // Remove the data source redirection parameters
+    hashParams.delete(DATA_SOURCE_NAME_URL_PARAM_KEY);
+    hashParams.delete(DATA_SOURCE_TYPE_URL_PARAM_KEY);
+
+    // Reconstruct the hash
+    currentURL.hash = hashParams.toString() ? `${hashBase}?${hashParams.toString()}` : hashBase;
+
+    // Update the browser's address bar
+    history.replaceState({}, '', currentURL.toString());
+  }
+};
+
+export const DataSourceSelection = ({ tabId }: { tabId: string }) => {
   const { dataSources } = coreRefs;
   const dispatch = useDispatch();
   const routerContext = useContext(LogExplorerRouterContext);
   const explorerSearchMetadata = useSelector(selectSearchMetaData)[tabId];
-  const [activeDataSources, setActiveDataSources] = useState([]);
-  const [dataSourceOptionList, setDataSourceOptionList] = useState([]);
-  const [selectedSources, setSelectedSources] = useState([...explorerSearchMetadata.datasources]);
-
-  const resetStateOnDatasourceChange = () => {
-    dispatch(
-      resetFields({
-        tabId,
-      })
-    );
-    dispatch(
-      resetPatterns({
-        tabId,
-      })
-    );
-    dispatch(
-      resetQueryResults({
-        tabId,
-      })
-    );
-    dispatch(
-      resetVisConfig({
-        tabId,
-      })
-    );
-    dispatch(
-      resetVisualization({
-        tabId,
-      })
-    );
-    dispatch(
-      resetCountDistribution({
-        tabId,
-      })
-    );
+  const [activeDataSources, setActiveDataSources] = useState<DataSourceType[]>([]);
+  const [dataSourceOptionList, setDataSourceOptionList] = useState<DataSourceGroup[]>([]);
+  const [selectedSources, setSelectedSources] = useState<SelectedDataSource[]>(
+    getDataSourceState(explorerSearchMetadata.datasources)
+  );
+
+  /**
+   * Resets various states associated with data source changes.
+   */
+  const resetStateOnDataSourceChange = () => {
+    dispatch(resetQuery({ tabId }));
+    dispatch(resetFields({ tabId }));
+    dispatch(resetFields({ tabId }));
+    dispatch(resetPatterns({ tabId }));
+    dispatch(resetQueryResults({ tabId }));
+    dispatch(resetVisConfig({ tabId }));
+    dispatch(resetVisualization({ tabId }));
+    dispatch(resetCountDistribution({ tabId }));
   };
 
-  const handleSourceChange = (selectedSource) => {
+  /**
+   * Handle the changes in the data source selection.
+   *
+   * @param {SelectedDataSource[]} selectedSource - The newly selected data source(s).
+   */
+  const handleSourceChange = (selectedSource: SelectedDataSource[]) => {
     batch(() => {
-      resetStateOnDatasourceChange();
+      resetStateOnDataSourceChange();
       dispatch(
-        updateSearchMetaData({
-          tabId,
-          data: {
-            datasources: selectedSource,
-          },
-        })
+        updateSearchMetaData({ tabId, data: { datasources: getDataSourceState(selectedSource) } })
       );
     });
     setSelectedSources(selectedSource);
   };
 
   useEffect(() => {
-    setSelectedSources([...(explorerSearchMetadata.datasources || [])]);
-    return () => {};
+    setSelectedSources(getDataSourceState(explorerSearchMetadata.datasources));
   }, [explorerSearchMetadata.datasources]);
 
   const handleDataSetFetchError = useCallback(() => {
-    return (error) => {};
+    return (error: Error) => {
+      console.error('Error fetching dataset:', error);
+    };
   }, []);
 
+  /**
+   * Subscribe to data source updates and manage the active data sources state.
+   */
   useEffect(() => {
     const subscription = dataSources.dataSourceService.dataSources$.subscribe(
       (currentDataSources) => {
-        setActiveDataSources([...Object.values(currentDataSources)]);
+        // temporary solution for 2.11 to render OpenSearch / default cluster for observability
+        // local indices and index patterns, while keep listing all index patterns for data explorer
+        // it filters the registered index pattern data sources in data plugin, and attach default cluster
+        // for all indices
+        setActiveDataSources([
+          new ObservabilityDefaultDataSource({
+            name: DEFAULT_DATA_SOURCE_NAME,
+            type: DEFAULT_DATA_SOURCE_TYPE,
+            metadata: null,
+          }),
+          ...Object.values(currentDataSources).filter((ds) => ds.type !== DEFAULT_DATA_SOURCE_TYPE),
+        ]);
       }
     );
 
     return () => subscription.unsubscribe();
   }, []);
 
+  /**
+   * Check for URL parameters to update the data source if redirected from discover.
+   * Removes data source name and type from URL after processing. This is temporary solution for 2.11
+   * as observability log explorer will adopt view service.
+   */
   useEffect(() => {
-    // update datasource if url contains
-    const datasourceName = routerContext?.searchParams.get('datasourceName');
-    const datasourceType = routerContext?.searchParams.get('datasourceType');
+    const datasourceName = routerContext?.searchParams.get(DATA_SOURCE_NAME_URL_PARAM_KEY);
+    const datasourceType = routerContext?.searchParams.get(DATA_SOURCE_TYPE_URL_PARAM_KEY);
     if (datasourceName && datasourceType) {
-      dispatch(
-        updateSearchMetaData({
-          tabId,
-          data: {
-            datasources: [
-              {
-                label: datasourceName,
-                type: datasourceType,
-              },
-            ],
-          },
-        })
-      );
+      // remove datasourceName and datasourceType from URL for a clean search state
+      removeDataSourceFromURLParams(window.location.href);
+      batch(() => {
+        resetStateOnDataSourceChange();
+        dispatch(
+          updateSearchMetaData({
+            tabId,
+            data: { datasources: [{ label: datasourceName, type: datasourceType }] },
+          })
+        );
+      });
     }
   }, []);
 
+  /**
+   * Process the data source options to display different than discover's group names.
+   * Temporary solution for version 2.11.
+   */
+  const memorizedDataSourceOptionList = useMemo(() => {
+    return dataSourceOptionList.map((dsOption) => {
+      if (dsOption.label === DEFAULT_DATA_SOURCE_TYPE_NAME) {
+        dsOption.label = DEFAULT_DATA_SOURCE_OBSERVABILITY_DISPLAY_NAME;
+      }
+      return dsOption;
+    });
+  }, [dataSourceOptionList]);
+
   return (
     <DataSourceSelectable
       className="dsc-selector"
       dataSources={activeDataSources}
-      dataSourceOptionList={dataSourceOptionList}
+      dataSourceOptionList={memorizedDataSourceOptionList}
       setDataSourceOptionList={setDataSourceOptionList}
       selectedSources={selectedSources}
       onDataSourceSelect={handleSourceChange}
diff --git a/public/components/event_analytics/explorer/direct_query_running.tsx b/public/components/event_analytics/explorer/direct_query_running.tsx
index 9536909ce1..dcd884dd12 100644
--- a/public/components/event_analytics/explorer/direct_query_running.tsx
+++ b/public/components/event_analytics/explorer/direct_query_running.tsx
@@ -4,32 +4,43 @@
  */
 
 import React from 'react';
-import { useDispatch } from 'react-redux';
-import { EuiProgress, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
-import { update as updateSearchMetaData } from '../redux/slices/search_meta_data_slice';
+import { useDispatch, useSelector } from 'react-redux';
+import { EuiProgress, EuiEmptyPrompt, EuiButton, EuiText, EuiSpacer } from '@elastic/eui';
+import {
+  selectSearchMetaData,
+  update as updateSearchMetaData,
+} from '../redux/slices/search_meta_data_slice';
+import { DirectQueryLoadingStatus } from '../../../../common/types/explorer';
 
 export const DirectQueryRunning = ({ tabId }: { tabId: string }) => {
+  const explorerSearchMeta = useSelector(selectSearchMetaData)[tabId] || {};
   const dispatch = useDispatch();
   return (
     <EuiEmptyPrompt
       icon={<EuiProgress size="xs" color="accent" />}
       title={<h2>Query Processing</h2>}
       body={
-        <EuiButton
-          color="success"
-          onClick={() => {
-            dispatch(
-              updateSearchMetaData({
-                tabId,
-                data: {
-                  isPolling: false,
-                },
-              })
-            );
-          }}
-        >
-          Cancel
-        </EuiButton>
+        <>
+          <EuiText>
+            Status: {explorerSearchMeta.status ?? DirectQueryLoadingStatus.SCHEDULED}
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiButton
+            color="success"
+            onClick={() => {
+              dispatch(
+                updateSearchMetaData({
+                  tabId,
+                  data: {
+                    isPolling: false,
+                  },
+                })
+              );
+            }}
+          >
+            Cancel
+          </EuiButton>
+        </>
       }
     />
   );
diff --git a/public/components/event_analytics/explorer/events_views/data_grid.scss b/public/components/event_analytics/explorer/events_views/data_grid.scss
index bf5392d3b3..af387c2cd5 100644
--- a/public/components/event_analytics/explorer/events_views/data_grid.scss
+++ b/public/components/event_analytics/explorer/events_views/data_grid.scss
@@ -225,9 +225,6 @@
 
   // SASSTODO: replace the z-index value with a variable
   .dscWrapper {
-    padding-left: $euiSizeXL;
-    padding-right: $euiSizeS;
-    margin-top: $euiSizeM;
     z-index: 1;
     @include euiBreakpoint('xs', 's', 'm') {
       padding-left: $euiSizeS;
diff --git a/public/components/event_analytics/explorer/events_views/data_grid.tsx b/public/components/event_analytics/explorer/events_views/data_grid.tsx
index f6019d42b7..56cac6abb5 100644
--- a/public/components/event_analytics/explorer/events_views/data_grid.tsx
+++ b/public/components/event_analytics/explorer/events_views/data_grid.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, useState, useRef, RefObject, Fragment, useCallback } from 'react';
+import React, { useMemo, useState, useRef, Fragment, useCallback } from 'react';
 import {
   EuiDataGrid,
   EuiDescriptionList,
@@ -11,26 +11,21 @@ import {
   EuiDescriptionListTitle,
   EuiDataGridColumn,
   EuiDataGridSorting,
+  EuiPanel,
 } from '@elastic/eui';
 import moment from 'moment';
-import dompurify from 'dompurify';
-import datemath from '@elastic/datemath';
 import { MutableRefObject } from 'react';
-import { GridSortingColumn, IExplorerFields, IField } from '../../../../../common/types/explorer';
+import { IExplorerFields, IField } from '../../../../../common/types/explorer';
 import {
   DATE_DISPLAY_FORMAT,
-  DATE_PICKER_FORMAT,
+  DEFAULT_EMPTY_EXPLORER_FIELDS,
   DEFAULT_SOURCE_COLUMN,
   DEFAULT_TIMESTAMP_COLUMN,
 } from '../../../../../common/constants/explorer';
 import { HttpSetup } from '../../../../../../../src/core/public';
 import PPLService from '../../../../services/requests/ppl';
-import { FlyoutButton, IDocType } from './docViewRow';
+import { FlyoutButton } from './docViewRow';
 import { useFetchEvents } from '../../hooks';
-import {
-  PPL_INDEX_INSERT_POINT_REGEX,
-  PPL_NEWLINE_REGEX,
-} from '../../../../../common/constants/shared';
 import { redoQuery } from '../../utils/utils';
 
 interface DataGridProps {
@@ -61,55 +56,76 @@ export function DataGrid(props: DataGridProps) {
     requestParams,
     startTime,
     endTime,
-    storedSelectedColumns,
   } = props;
-  const { getEvents } = useFetchEvents({
+  const { fetchEvents } = useFetchEvents({
     pplService,
     requestParams,
   });
+  const selectedColumns =
+    explorerFields.selectedFields.length > 0
+      ? explorerFields.selectedFields
+      : DEFAULT_EMPTY_EXPLORER_FIELDS;
   // useRef instead of useState somehow solves the issue of user triggered sorting not
   // having any delays
   const sortingFields: MutableRefObject<EuiDataGridSorting['columns']> = useRef([]);
   const pageFields = useRef([0, 100]);
 
+  const [data, setData] = useState(rows);
+
   // setSort and setPage are used to change the query and send a direct request to get data
   const setSort = (sort: EuiDataGridSorting['columns']) => {
     sortingFields.current = sort;
-    redoQuery(startTime, endTime, rawQuery, timeStampField, sortingFields, pageFields, getEvents);
+
+    redoQuery(
+      startTime,
+      endTime,
+      rawQuery,
+      timeStampField,
+      sortingFields,
+      pageFields,
+      fetchEvents,
+      setData
+    );
   };
 
   const setPage = (page: number[]) => {
     pageFields.current = page;
-    redoQuery(startTime, endTime, rawQuery, timeStampField, sortingFields, pageFields, getEvents);
+    redoQuery(
+      startTime,
+      endTime,
+      rawQuery,
+      timeStampField,
+      sortingFields,
+      pageFields,
+      fetchEvents,
+      setData
+    );
   };
 
   // creates the header for each column listing what that column is
   const dataGridColumns = useMemo(() => {
-    if (storedSelectedColumns.length > 0) {
-      const columns: EuiDataGridColumn[] = [];
-      storedSelectedColumns.map(({ name, type }) => {
-        if (name === 'timestamp') {
-          columns.push(DEFAULT_TIMESTAMP_COLUMN);
-        } else if (name === '_source') {
-          columns.push(DEFAULT_SOURCE_COLUMN);
-        } else {
-          columns.push({
-            id: name,
-            display: name,
-            isSortable: true, // TODO: add functionality here based on type
-          });
-        }
-      });
-      return columns;
-    }
-    return [];
-  }, [storedSelectedColumns]);
+    const columns: EuiDataGridColumn[] = [];
+    selectedColumns.map(({ name, type }) => {
+      if (name === 'timestamp') {
+        columns.push(DEFAULT_TIMESTAMP_COLUMN);
+      } else if (name === '_source') {
+        columns.push(DEFAULT_SOURCE_COLUMN);
+      } else {
+        columns.push({
+          id: name,
+          display: name,
+          isSortable: true, // TODO: add functionality here based on type
+        });
+      }
+    });
+    return columns;
+  }, [explorerFields, totalHits]);
 
   // used for which columns are visible and their order
   const dataGridColumnVisibility = useMemo(() => {
-    if (storedSelectedColumns.length > 0) {
+    if (selectedColumns.length > 0) {
       const columns: string[] = [];
-      storedSelectedColumns.map(({ name }) => {
+      selectedColumns.map(({ name }) => {
         columns.push(name);
       });
       return {
@@ -121,7 +137,7 @@ export function DataGrid(props: DataGridProps) {
     }
     // default shown fields
     throw new Error('explorer data grid stored columns empty');
-  }, [storedSelectedColumns]);
+  }, [explorerFields, totalHits]);
 
   // sets the very first column, which is the button used for the flyout of each row
   const dataGridLeadingColumns = useMemo(() => {
@@ -155,23 +171,23 @@ export function DataGrid(props: DataGridProps) {
         width: 40,
       },
     ];
-  }, [rows, http, explorerFields, pplService, rawQuery, timeStampField]);
+  }, [rows, http, explorerFields, pplService, rawQuery, timeStampField, totalHits]);
 
   // renders what is shown in each cell, i.e. the content of each row
   const dataGridCellRender = useCallback(
     ({ rowIndex, columnId }: { rowIndex: number; columnId: string }) => {
       const trueIndex = rowIndex % pageFields.current[1];
-      if (trueIndex < rows.length) {
+      if (trueIndex < data.length) {
         if (columnId === '_source') {
           return (
             <EuiDescriptionList type="inline" compressed>
-              {Object.keys(rows[trueIndex]).map((key) => (
+              {Object.keys(data[trueIndex]).map((key) => (
                 <Fragment key={key}>
                   <EuiDescriptionListTitle className="osdDescriptionListFieldTitle">
                     {key}
                   </EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
-                    {rows[trueIndex][key]}
+                    {data[trueIndex][key]}
                   </EuiDescriptionListDescription>
                 </Fragment>
               ))}
@@ -179,13 +195,13 @@ export function DataGrid(props: DataGridProps) {
           );
         }
         if (columnId === 'timestamp') {
-          return `${moment(rows[trueIndex][columnId]).format(DATE_DISPLAY_FORMAT)}`;
+          return `${moment(data[trueIndex][columnId]).format(DATE_DISPLAY_FORMAT)}`;
         }
-        return `${rows[trueIndex][columnId]}`;
+        return `${data[trueIndex][columnId]}`;
       }
       return null;
     },
-    [rows, pageFields, explorerFields]
+    [data, rows, pageFields, explorerFields, totalHits]
   );
 
   // ** Pagination config
@@ -197,7 +213,7 @@ export function DataGrid(props: DataGridProps) {
         setPage([0, pageSize]);
         return { pageIndex: 0, pageSize };
       }),
-    [setPagination, setPage]
+    [setPagination, setPage, totalHits]
   );
   // changing the page index, keep page size constant
   const onChangePage = useCallback(
@@ -207,23 +223,23 @@ export function DataGrid(props: DataGridProps) {
         return { pageSize, pageIndex };
       });
     },
-    [setPagination, setPage]
+    [setPagination, setPage, totalHits]
   );
 
   const rowHeightsOptions = useMemo(
     () => ({
       defaultHeight: {
         // if source is listed as a column, add extra space
-        lineCount: storedSelectedColumns.some((obj) => obj.name === '_source') ? 3 : 1,
+        lineCount: selectedColumns.some((obj) => obj.name === '_source') ? 3 : 1,
       },
     }),
-    [storedSelectedColumns]
+    [explorerFields, totalHits]
   );
 
   // TODO: memoize the expensive table below
 
   return (
-    <>
+    <EuiPanel paddingSize="s">
       <div className="dscTable dscTableFixedScroll">
         <EuiDataGrid
           aria-labelledby="aria-labelledby"
@@ -254,6 +270,6 @@ export function DataGrid(props: DataGridProps) {
           rowHeightsOptions={rowHeightsOptions}
         />
       </div>
-    </>
+    </EuiPanel>
   );
 }
diff --git a/public/components/event_analytics/explorer/events_views/docView.scss b/public/components/event_analytics/explorer/events_views/docView.scss
index c395ed4dad..f05023e218 100644
--- a/public/components/event_analytics/explorer/events_views/docView.scss
+++ b/public/components/event_analytics/explorer/events_views/docView.scss
@@ -37,8 +37,8 @@
 
 .events-flyout-resize {
   position: absolute;
-  right: 30px;
-  top: 0px;
+  right: 38px;
+  top: 8px;
   z-index: 3;
 }
 
diff --git a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
index dc1629b713..feb0a57e99 100644
--- a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
+++ b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
@@ -85,7 +85,7 @@ export const DocFlyout = ({
           <EuiButtonIcon
             className="events-flyout-resize"
             color="text"
-            size="m"
+            size="xs"
             aria-label="Resize"
             title="Resize"
             iconType={toggleSize ? 'menuLeft' : 'menuRight'}
diff --git a/public/components/event_analytics/explorer/explorer.scss b/public/components/event_analytics/explorer/explorer.scss
index 70a79a3a57..63dfc2b087 100644
--- a/public/components/event_analytics/explorer/explorer.scss
+++ b/public/components/event_analytics/explorer/explorer.scss
@@ -15,7 +15,7 @@
 }
 
 .mainContentTabs .euiResizableContainer {
-  height: calc(100vh - 298px);
+  height: calc(100vh - 194px);
 }
 
 .explorer-loading-spinner {
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index f87ff57695..d311cdcc1b 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -15,6 +15,10 @@ import {
   EuiTabbedContent,
   EuiTabbedContentTab,
   EuiText,
+  EuiPage,
+  EuiSplitPanel,
+  EuiPageSideBar,
+  EuiPageBody,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 import _, { isEmpty, isEqual, reduce } from 'lodash';
@@ -34,9 +38,7 @@ import {
   CREATE_TAB_PARAM_KEY,
   DATE_PICKER_FORMAT,
   DEFAULT_AVAILABILITY_QUERY,
-  DEFAULT_EMPTY_EXPLORER_FIELDS,
   EVENT_ANALYTICS_DOCUMENTATION_URL,
-  FINAL_QUERY,
   PATTERNS_EXTRACTOR_REGEX,
   PATTERNS_REGEX,
   RAW_QUERY,
@@ -45,8 +47,6 @@ import {
   SAVED_QUERY,
   SAVED_VISUALIZATION,
   SELECTED_DATE_RANGE,
-  SELECTED_FIELDS,
-  SELECTED_PATTERN_FIELD,
   SELECTED_TIMESTAMP,
   TAB_CHART_ID,
   TAB_CHART_TITLE,
@@ -58,11 +58,9 @@ import {
   LIVE_END_TIME,
   LIVE_OPTIONS,
   PPL_NEWLINE_REGEX,
-  PPL_STATS_REGEX,
 } from '../../../../common/constants/shared';
 import { QueryManager } from '../../../../common/query_manager';
 import {
-  IExplorerFields,
   IExplorerProps,
   IField,
   IQuery,
@@ -71,18 +69,15 @@ import {
 } from '../../../../common/types/explorer';
 import {
   buildQuery,
-  buildRawQuery,
   getIndexPatternFromRawQuery,
   uiSettingsService,
+  getSavingCommonParams,
 } from '../../../../common/utils';
 import { PPLDataFetcher } from '../../../services/data_fetchers/ppl/ppl_data_fetcher';
 import { getSavedObjectsClient } from '../../../services/saved_objects/saved_object_client/client_factory';
 import { OSDSavedVisualizationClient } from '../../../services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization';
-import {
-  PPLSavedQueryClient,
-  PanelSavedObjectClient,
-} from '../../../services/saved_objects/saved_object_client/ppl';
-import { PPLSavedObjectLoader } from '../../../services/saved_objects/saved_object_loaders/ppl/ppl_loader';
+import { OSDSavedSearchClient } from '../../../services/saved_objects/saved_object_client/osd_saved_objects/saved_searches';
+import { PanelSavedObjectClient } from '../../../services/saved_objects/saved_object_client/ppl';
 import {
   SaveAsCurrentQuery,
   SaveAsCurrentVisualization,
@@ -95,7 +90,10 @@ import { Search } from '../../common/search/search';
 import { selectSearchMetaData } from '../../event_analytics/redux/slices/search_meta_data_slice';
 import { getVizContainerProps } from '../../visualizations/charts/helpers';
 import { TabContext, useFetchEvents, useFetchPatterns, useFetchVisualizations } from '../hooks';
-import { selectCountDistribution } from '../redux/slices/count_distribution_slice';
+import {
+  selectCountDistribution,
+  render as updateCountDistribution,
+} from '../redux/slices/count_distribution_slice';
 import { selectFields, updateFields } from '../redux/slices/field_slice';
 import { selectQueryResult } from '../redux/slices/query_result_slice';
 import { changeDateRange, changeQuery, selectQueries } from '../redux/slices/query_slice';
@@ -109,17 +107,23 @@ import {
 } from '../redux/slices/viualization_config_slice';
 import { formatError, getDefaultVisConfig } from '../utils';
 import { getContentTabTitle, getDateRange } from '../utils/utils';
-import { DataSourceSelection } from './datasources/datasources_selection';
 import { DirectQueryRunning } from './direct_query_running';
 import { DataGrid } from './events_views/data_grid';
 import { HitsCounter } from './hits_counter/hits_counter';
 import { LogPatterns } from './log_patterns/log_patterns';
 import { NoResults } from './no_results';
-import { Sidebar } from './sidebar';
 import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
 import { CountDistribution } from './visualizations/count_distribution';
 import { DirectQueryVisualization } from './visualizations/direct_query_vis';
+import { DataSourceSelection } from './datasources/datasources_selection';
+import { initialTabId } from '../../../framework/redux/store/shared_state';
+import { ObservabilitySideBar } from './sidebar/observability_sidebar';
+import { ExplorerSavedObjectLoader } from '../../../services/saved_objects/saved_object_loaders/explorer_saved_object_loader';
+import {
+  DEFAULT_DATA_SOURCE_TYPE,
+  QUERY_LANGUAGE,
+} from '../../../../common/constants/data_sources';
 
 export const Explorer = ({
   pplService,
@@ -149,7 +153,7 @@ export const Explorer = ({
   const routerContext = useContext(LogExplorerRouterContext);
   const dispatch = useDispatch();
   const requestParams = { tabId };
-  const { getLiveTail, getEvents, getAvailableFields } = useFetchEvents({
+  const { getLiveTail, getEvents, getAvailableFields, dispatchOnGettingHis } = useFetchEvents({
     pplService,
     requestParams,
   });
@@ -173,16 +177,14 @@ export const Explorer = ({
   const countDistribution = useSelector(selectCountDistribution)[tabId];
   const explorerVisualizations = useSelector(selectExplorerVisualization)[tabId];
   const userVizConfigs = useSelector(selectVisualizationConfig)[tabId] || {};
-  const explorerSearchMeta = useSelector(selectSearchMetaData)[tabId];
+  const explorerSearchMeta = useSelector(selectSearchMetaData)[tabId] || {};
   const [selectedContentTabId, setSelectedContentTab] = useState(TAB_EVENT_ID);
   const [selectedCustomPanelOptions, setSelectedCustomPanelOptions] = useState([]);
   const [selectedPanelName, setSelectedPanelName] = useState('');
   const [curVisId, setCurVisId] = useState('bar');
   const [isPanelTextFieldInvalid, setIsPanelTextFieldInvalid] = useState(false);
-  const [isSidebarClosed, setIsSidebarClosed] = useState(false);
   const [timeIntervalOptions, setTimeIntervalOptions] = useState(TIME_INTERVAL_OPTIONS);
   const [isOverridingTimestamp, setIsOverridingTimestamp] = useState(false);
-  const [isOverridingPattern, setIsOverridingPattern] = useState(false);
   const [tempQuery, setTempQuery] = useState(query[RAW_QUERY]);
   const [isLiveTailPopoverOpen, setIsLiveTailPopoverOpen] = useState(false);
   const [isLiveTailOn, setIsLiveTailOn] = useState(false);
@@ -194,16 +196,18 @@ export const Explorer = ({
   const [triggerAvailability, setTriggerAvailability] = useState(false);
   const [isQueryRunning, setIsQueryRunning] = useState(false);
   const currentPluggable = useMemo(() => {
-    return (
-      dataSourcePluggables[explorerSearchMeta.datasources[0]?.type] ||
-      dataSourcePluggables.DEFAULT_INDEX_PATTERNS
-    );
+    return explorerSearchMeta.datasources?.[0]?.type
+      ? dataSourcePluggables[explorerSearchMeta?.datasources[0]?.type]
+      : dataSourcePluggables.DEFAULT_INDEX_PATTERNS;
   }, [explorerSearchMeta.datasources]);
   const { ui } =
-    currentPluggable?.getComponentSetForVariation('languages', explorerSearchMeta.lang || 'SQL') ||
-    {};
+    currentPluggable?.getComponentSetForVariation(
+      'languages',
+      explorerSearchMeta.lang || QUERY_LANGUAGE.SQL
+    ) || {};
   const SearchBar = ui?.SearchBar || Search;
-
+  const isDefaultDataSourceType =
+    explorerSearchMeta.datasources?.[0]?.type === DEFAULT_DATA_SOURCE_TYPE;
   const selectedIntervalRef = useRef<{
     text: string;
     value: string;
@@ -219,6 +223,8 @@ export const Explorer = ({
   const isLiveTailOnRef = useRef(false);
   const liveTailTabIdRef = useRef('');
   const liveTailNameRef = useRef('Live');
+  const savedObjectLoader = useRef<ExplorerSavedObjectLoader | undefined>(undefined);
+  const isObjectIdUpdatedFromSave = useRef(false); // Flag to prevent reload when the current search's objectId changes due to a save operation.
   queryRef.current = query;
   selectedPanelNameRef.current = selectedPanelName;
   explorerFieldsRef.current = explorerFields;
@@ -311,7 +317,7 @@ export const Explorer = ({
     !isEqual(getIndexPatternFromRawQuery(currentQuery), getIndexPatternFromRawQuery(prevTabQuery));
 
   const updateTabData = async (objectId: string) => {
-    await new PPLSavedObjectLoader(
+    savedObjectLoader.current = new ExplorerSavedObjectLoader(
       getSavedObjectsClient({ objectId, objectType: 'savedQuery' }),
       notifications,
       {
@@ -338,10 +344,26 @@ export const Explorer = ({
         setSubType,
         setSelectedContentTab,
         fetchData,
+        dispatchOnGettingHis,
       }
-    ).load();
+    );
+    savedObjectLoader.current.load();
   };
 
+  // stop polling when cancel or unmounts
+  useEffect(() => {
+    const sol: ExplorerSavedObjectLoader | undefined = savedObjectLoader.current;
+    if (!explorerSearchMeta.isPolling && sol !== undefined && sol.getPollingInstance) {
+      sol?.getPollingInstance()!.stopPolling();
+      savedObjectLoader.current = undefined;
+    }
+    return () => {
+      if (sol && sol.getPollingInstance) {
+        sol?.getPollingInstance()!.stopPolling();
+      }
+    };
+  }, [explorerSearchMeta.isPolling]);
+
   const prepareAvailability = async () => {
     setSelectedContentTab(TAB_CHART_ID);
     setTriggerAvailability(true);
@@ -371,8 +393,9 @@ export const Explorer = ({
   }, []);
 
   useEffect(() => {
-    if (savedObjectId) {
+    if (savedObjectId && !isObjectIdUpdatedFromSave.current) {
       updateTabData(savedObjectId);
+      isObjectIdUpdatedFromSave.current = false;
     }
   }, [savedObjectId]);
 
@@ -384,10 +407,7 @@ export const Explorer = ({
     await dispatch(
       changeDateRange({
         tabId: requestParams.tabId,
-        data: {
-          [RAW_QUERY]: queryRef.current![RAW_QUERY],
-          [SELECTED_DATE_RANGE]: timeRange,
-        },
+        data: { [RAW_QUERY]: queryRef.current![RAW_QUERY], [SELECTED_DATE_RANGE]: timeRange },
       })
     );
   };
@@ -423,48 +443,13 @@ export const Explorer = ({
     }
   };
 
-  useEffect(() => {
-    if (explorerSearchMeta.datasources?.[0]?.type !== 'DEFAULT_INDEX_PATTERNS') {
-      dispatch(
-        changeQuery({
-          tabId,
-          query: {
-            [RAW_QUERY]: '',
-            [FINAL_QUERY]: '',
-          },
-        })
-      );
-    }
-  }, [explorerSearchMeta.datasources]);
-
   const handleOverrideTimestamp = async (timestamp: IField) => {
     setIsOverridingTimestamp(true);
-    await dispatch(
-      changeQuery({
-        tabId,
-        query: {
-          [SELECTED_TIMESTAMP]: timestamp?.name || '',
-        },
-      })
-    );
+    await dispatch(changeQuery({ tabId, query: { [SELECTED_TIMESTAMP]: timestamp?.name || '' } }));
     setIsOverridingTimestamp(false);
     handleQuerySearch();
   };
 
-  const handleOverridePattern = async (pattern: IField) => {
-    setIsOverridingPattern(true);
-    await setDefaultPatternsField(
-      '',
-      pattern.name,
-      getErrorHandler('Error overriding default pattern')
-    );
-    setIsOverridingPattern(false);
-    await getPatterns(
-      selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
-      getErrorHandler('Error fetching patterns')
-    );
-  };
-
   const totalHits: number = useMemo(() => {
     if (isLiveTailOn && countDistribution?.data) {
       const hits = reduce(
@@ -481,20 +466,16 @@ export const Explorer = ({
   }, [countDistribution?.data]);
 
   const dateRange = getDateRange(startTime, endTime, query);
-
-  const [storedExplorerFields, setStoredExplorerFields] = useState(explorerFields);
-
   const mainContent = useMemo(() => {
     return (
-      <div className="dscWrapper col-md-12">
+      <div className="dscWrapper">
         {explorerData && !isEmpty(explorerData.jsonData) ? (
           <EuiFlexGroup direction="column" gutterSize="none">
-            {explorerSearchMeta.datasources?.[0]?.type === 'DEFAULT_INDEX_PATTERNS' && (
+            {(isDefaultDataSourceType || appLogEvents) && (
               <EuiFlexItem grow={false}>
                 <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
-                  {/* <EuiPanel paddingSize="s" style={{ height: '100%' }}> */}
                   {countDistribution?.data && !isLiveTailOnRef.current && (
-                    <>
+                    <EuiPanel>
                       <HitsCounter
                         hits={_.sum(countDistribution.data?.['count()'])}
                         showResetButton={false}
@@ -507,6 +488,9 @@ export const Explorer = ({
                             (item) => item.value === selectedIntrv
                           );
                           const intrv = selectedIntrv.replace(/^auto_/, '');
+                          dispatch(
+                            updateCountDistribution({ tabId, data: { selectedInterval: intrv } })
+                          );
                           getCountVisualizations(intrv);
                           selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
                           getPatterns(intrv, getErrorHandler('Error fetching patterns'));
@@ -521,12 +505,12 @@ export const Explorer = ({
                         startTime={appLogEvents ? startTime : dateRange[0]}
                         endTime={appLogEvents ? endTime : dateRange[1]}
                       />
-                    </>
+                    </EuiPanel>
                   )}
                 </EuiPanel>
               </EuiFlexItem>
             )}
-            {explorerSearchMeta.datasources?.[0]?.type === 'DEFAULT_INDEX_PATTERNS' && (
+            {(isDefaultDataSourceType || appLogEvents) && (
               <EuiFlexItem grow={false}>
                 <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
                   <EuiPanel paddingSize="s" style={{ height: '100%' }}>
@@ -568,25 +552,26 @@ export const Explorer = ({
                         <EuiSpacer size="m" />
                       </>
                     )}
-
-                    <DataGrid
-                      http={http}
-                      pplService={pplService}
-                      rows={explorerData.jsonData}
-                      rowsAll={explorerData.jsonDataAll}
-                      explorerFields={explorerFields}
-                      timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
-                      rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
-                      totalHits={_.sum(countDistribution.data?.['count()'])}
-                      requestParams={requestParams}
-                      startTime={appLogEvents ? startTime : dateRange[0]}
-                      endTime={appLogEvents ? endTime : dateRange[1]}
-                      storedSelectedColumns={
-                        storedExplorerFields.selectedFields.length > 0
-                          ? storedExplorerFields.selectedFields
-                          : DEFAULT_EMPTY_EXPLORER_FIELDS
-                      }
-                    />
+                    {(countDistribution.data?.['count()'] || explorerData?.datarows?.length) && (
+                      <DataGrid
+                        http={http}
+                        pplService={pplService}
+                        rows={explorerData.jsonData}
+                        rowsAll={explorerData.jsonDataAll}
+                        explorerFields={explorerFields}
+                        timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
+                        rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
+                        totalHits={
+                          isDefaultDataSourceType || appLogEvents
+                            ? _.sum(countDistribution.data?.['count()']) ||
+                              explorerData.datarows.length
+                            : explorerData.datarows.length
+                        }
+                        requestParams={requestParams}
+                        startTime={appLogEvents ? startTime : dateRange[0]}
+                        endTime={appLogEvents ? endTime : dateRange[1]}
+                      />
+                    )}
                     <a tabIndex={0} id="discoverBottomMarker">
                       &#8203;
                     </a>
@@ -604,13 +589,11 @@ export const Explorer = ({
     isPanelTextFieldInvalid,
     explorerData,
     explorerFields,
-    isSidebarClosed,
     countDistribution,
     explorerVisualizations,
     isOverridingTimestamp,
     query,
     isLiveTailOnRef.current,
-    isOverridingPattern,
     isQueryRunning,
   ]);
 
@@ -638,7 +621,7 @@ export const Explorer = ({
   };
 
   const explorerVis = useMemo(() => {
-    return explorerSearchMeta.datasources?.[0]?.type === 'DEFAULT_INDEX_PATTERNS' ? (
+    return isDefaultDataSourceType || appLogEvents ? (
       <ExplorerVisualizations
         query={query}
         curVisId={curVisId}
@@ -685,12 +668,7 @@ export const Explorer = ({
 
   const updateQueryInStore = async (updateQuery: string) => {
     await dispatch(
-      changeQuery({
-        tabId,
-        query: {
-          [RAW_QUERY]: updateQuery.replaceAll(PPL_NEWLINE_REGEX, ''),
-        },
-      })
+      changeQuery({ tabId, query: { [RAW_QUERY]: updateQuery.replaceAll(PPL_NEWLINE_REGEX, '') } })
     );
   };
 
@@ -698,14 +676,7 @@ export const Explorer = ({
     async (availability?: boolean) => {
       // clear previous selected timestamp when index pattern changes
       if (isIndexPatternChanged(tempQuery, query[RAW_QUERY])) {
-        await dispatch(
-          changeQuery({
-            tabId,
-            query: {
-              [SELECTED_TIMESTAMP]: '',
-            },
-          })
-        );
+        await dispatch(changeQuery({ tabId, query: { [SELECTED_TIMESTAMP]: '' } }));
         await setDefaultPatternsField('', '');
       }
       if (availability !== true) {
@@ -718,26 +689,21 @@ export const Explorer = ({
 
   const handleQueryChange = async (newQuery: string) => setTempQuery(newQuery);
 
-  const getSavingCommonParams = (
-    queryState: IQuery,
-    fields: IExplorerFields,
-    savingTitle: string
-  ) => {
-    return {
-      query: buildRawQuery(query, appBaseQuery),
-      fields: fields[SELECTED_FIELDS],
-      dateRange: queryState[SELECTED_DATE_RANGE],
-      name: savingTitle,
-      timestamp: queryState[SELECTED_TIMESTAMP],
-    };
-  };
-
   const handleSavingObject = useCallback(() => {
     const isOnEventPage = isEqual(selectedContentTabId, TAB_EVENT_ID);
     const isObjTypeMatchQuery = isEqual(query[SAVED_OBJECT_TYPE], SAVED_QUERY);
     const isObjTypeMatchVis = isEqual(query[SAVED_OBJECT_TYPE], SAVED_VISUALIZATION);
     const isTabHasObjID = !isEmpty(query[SAVED_OBJECT_ID]);
-    const commonParams = getSavingCommonParams(query, explorerFields, selectedPanelNameRef.current);
+    const commonParams = getSavingCommonParams(
+      query,
+      appBaseQuery,
+      explorerFields,
+      selectedPanelNameRef.current,
+      explorerSearchMeta
+    );
+
+    // Set the flag to differentiate between an object save action and a load action
+    isObjectIdUpdatedFromSave.current = true;
 
     let soClient;
     if (isOnEventPage) {
@@ -745,7 +711,10 @@ export const Explorer = ({
         soClient = new SaveAsCurrentQuery(
           { tabId, notifications },
           { dispatch, updateTabName },
-          PPLSavedQueryClient.getInstance(),
+          getSavedObjectsClient({
+            objectId: query[SAVED_OBJECT_ID],
+            objectType: 'savedQuery',
+          }),
           {
             ...commonParams,
             objectId: query[SAVED_OBJECT_ID],
@@ -755,7 +724,7 @@ export const Explorer = ({
         soClient = new SaveAsNewQuery(
           { tabId, history, notifications, showPermissionErrorToast },
           { batch, dispatch, changeQuery, updateTabName },
-          new PPLSavedQueryClient(http),
+          OSDSavedSearchClient.getInstance(),
           { ...commonParams }
         );
       }
@@ -813,10 +782,9 @@ export const Explorer = ({
     explorerFields,
     subType,
     selectedCustomPanelOptions,
+    explorerSearchMeta,
   ]);
 
-  // live tail
-
   const liveTailLoop = async (
     name: string,
     startingTime: string,
@@ -913,104 +881,89 @@ export const Explorer = ({
         handleQueryChange,
       }}
     >
-      <div
-        className={`obsExplorer dscAppContainer${
-          uiSettingsService.get('theme:darkMode') && ' explorer-dark'
-        }`}
-      >
-        <EuiFlexGroup direction="row">
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup direction="column" gutterSize="s">
-              <EuiFlexItem grow={false}>
-                <div
-                  className="dscSelector"
-                  style={{ width: '300px', marginTop: '8px', marginLeft: '10px' }}
-                >
-                  <DataSourceSelection tabId={tabId} />
-                </div>
-              </EuiFlexItem>
+      <EuiPage className="deLayout" paddingSize="none">
+        <EuiPageSideBar className="deSidebar" sticky>
+          <EuiSplitPanel.Outer className="eui-yScroll" hasBorder={true} borderRadius="none">
+            {!appLogEvents && (
+              <EuiSplitPanel.Inner paddingSize="s" color="subdued" grow={false}>
+                <DataSourceSelection tabId={initialTabId} />
+              </EuiSplitPanel.Inner>
+            )}
+            <EuiSplitPanel.Inner paddingSize="none" color="subdued" className="eui-yScroll">
+              <ObservabilitySideBar
+                tabId={initialTabId}
+                pplService={pplService}
+                notifications={notifications}
+              />
+            </EuiSplitPanel.Inner>
+          </EuiSplitPanel.Outer>
+        </EuiPageSideBar>
+        <EuiPageBody className="deLayout__canvas">
+          <div
+            className={`obsExplorer dscAppContainer${
+              uiSettingsService.get('theme:darkMode') && ' explorer-dark'
+            }`}
+          >
+            <EuiFlexGroup direction="row">
               <EuiFlexItem>
-                <div className="explorerFieldSelector">
-                  <Sidebar
-                    query={query}
-                    explorerFields={explorerFields}
-                    explorerData={explorerData}
-                    selectedTimestamp={query[SELECTED_TIMESTAMP]}
-                    selectedPattern={query[SELECTED_PATTERN_FIELD]}
-                    handleOverrideTimestamp={handleOverrideTimestamp}
-                    handleOverridePattern={handleOverridePattern}
-                    isOverridingTimestamp={isOverridingTimestamp}
-                    isOverridingPattern={isOverridingPattern}
-                    isFieldToggleButtonDisabled={
-                      isEmpty(explorerData.jsonData) ||
-                      !isEmpty(queryRef.current![RAW_QUERY].match(PPL_STATS_REGEX))
+                <SearchBar
+                  key="search-component"
+                  query={appLogEvents ? processAppAnalyticsQuery(tempQuery) : query[RAW_QUERY]}
+                  tempQuery={tempQuery}
+                  handleQueryChange={handleQueryChange}
+                  handleQuerySearch={handleQuerySearch}
+                  dslService={dslService}
+                  startTime={appLogEvents ? startTime : dateRange[0]}
+                  endTime={appLogEvents ? endTime : dateRange[1]}
+                  handleTimePickerChange={(timeRange: string[]) =>
+                    handleTimePickerChange(timeRange)
+                  }
+                  selectedPanelName={selectedPanelNameRef.current}
+                  selectedCustomPanelOptions={selectedCustomPanelOptions}
+                  setSelectedPanelName={setSelectedPanelName}
+                  setSelectedCustomPanelOptions={setSelectedCustomPanelOptions}
+                  handleSavingObject={handleSavingObject}
+                  isPanelTextFieldInvalid={isPanelTextFieldInvalid}
+                  savedObjects={savedObjects}
+                  showSavePanelOptionsList={isEqual(selectedContentTabId, TAB_CHART_ID)}
+                  handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
+                  isLiveTailPopoverOpen={isLiveTailPopoverOpen}
+                  closeLiveTailPopover={() => setIsLiveTailPopoverOpen(false)}
+                  popoverItems={popoverItems}
+                  isLiveTailOn={isLiveTailOnRef.current}
+                  selectedSubTabId={selectedContentTabId}
+                  searchBarConfigs={searchBarConfigs}
+                  getSuggestions={parseGetSuggestions}
+                  onItemSelect={onItemSelect}
+                  tabId={tabId}
+                  baseQuery={appBaseQuery}
+                  stopLive={stopLive}
+                  setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen}
+                  liveTailName={liveTailNameRef.current}
+                  curVisId={curVisId}
+                  setSubType={setSubType}
+                  http={http}
+                  setIsQueryRunning={setIsQueryRunning}
+                />
+                {explorerSearchMeta.isPolling ? (
+                  <DirectQueryRunning tabId={tabId} />
+                ) : (
+                  <EuiTabbedContent
+                    className="mainContentTabs"
+                    initialSelectedTab={contentTabs[0]}
+                    selectedTab={contentTabs.find((tab) => tab.id === selectedContentTabId)}
+                    onTabClick={(selectedTab: EuiTabbedContentTab) =>
+                      handleContentTabClick(selectedTab)
                     }
-                    storedExplorerFields={
-                      storedExplorerFields.availableFields.length > 0
-                        ? storedExplorerFields
-                        : explorerFields
-                    }
-                    setStoredExplorerFields={setStoredExplorerFields}
+                    tabs={contentTabs}
+                    size="s"
                   />
-                </div>
+                )}
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <SearchBar
-              key="search-component"
-              query={appLogEvents ? processAppAnalyticsQuery(tempQuery) : query[RAW_QUERY]}
-              tempQuery={tempQuery}
-              handleQueryChange={handleQueryChange}
-              handleQuerySearch={handleQuerySearch}
-              dslService={dslService}
-              startTime={appLogEvents ? startTime : dateRange[0]}
-              endTime={appLogEvents ? endTime : dateRange[1]}
-              handleTimePickerChange={(timeRange: string[]) => handleTimePickerChange(timeRange)}
-              selectedPanelName={selectedPanelNameRef.current}
-              selectedCustomPanelOptions={selectedCustomPanelOptions}
-              setSelectedPanelName={setSelectedPanelName}
-              setSelectedCustomPanelOptions={setSelectedCustomPanelOptions}
-              handleSavingObject={handleSavingObject}
-              isPanelTextFieldInvalid={isPanelTextFieldInvalid}
-              savedObjects={savedObjects}
-              showSavePanelOptionsList={isEqual(selectedContentTabId, TAB_CHART_ID)}
-              handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
-              isLiveTailPopoverOpen={isLiveTailPopoverOpen}
-              closeLiveTailPopover={() => setIsLiveTailPopoverOpen(false)}
-              popoverItems={popoverItems}
-              isLiveTailOn={isLiveTailOnRef.current}
-              selectedSubTabId={selectedContentTabId}
-              searchBarConfigs={searchBarConfigs}
-              getSuggestions={parseGetSuggestions}
-              onItemSelect={onItemSelect}
-              tabId={tabId}
-              baseQuery={appBaseQuery}
-              stopLive={stopLive}
-              setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen}
-              liveTailName={liveTailNameRef.current}
-              curVisId={curVisId}
-              setSubType={setSubType}
-              http={http}
-              setIsQueryRunning={setIsQueryRunning}
-            />
-            {explorerSearchMeta.isPolling ? (
-              <DirectQueryRunning tabId={tabId} />
-            ) : (
-              <EuiTabbedContent
-                className="mainContentTabs"
-                initialSelectedTab={contentTabs[0]}
-                selectedTab={contentTabs.find((tab) => tab.id === selectedContentTabId)}
-                onTabClick={(selectedTab: EuiTabbedContentTab) =>
-                  handleContentTabClick(selectedTab)
-                }
-                tabs={contentTabs}
-                size="s"
-              />
-            )}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </div>
+          </div>
+        </EuiPageBody>
+      </EuiPage>
     </TabContext.Provider>
   );
 };
diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx
index 05bd47544f..37296e2668 100644
--- a/public/components/event_analytics/explorer/log_explorer.tsx
+++ b/public/components/event_analytics/explorer/log_explorer.tsx
@@ -4,6 +4,7 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { isEmpty } from 'lodash';
+import { EuiPage } from '@elastic/eui';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
diff --git a/public/components/event_analytics/explorer/no_results.tsx b/public/components/event_analytics/explorer/no_results.tsx
index 91cc8ab622..14ee3a5733 100644
--- a/public/components/event_analytics/explorer/no_results.tsx
+++ b/public/components/event_analytics/explorer/no_results.tsx
@@ -4,48 +4,46 @@
  */
 
 import React from 'react';
-import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
-import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiPage, EuiSpacer, EuiText } from '@elastic/eui';
 
 export const NoResults = () => {
   return (
-    <I18nProvider>
-      <>
-        <EuiSpacer size="xl" />
-
-        <EuiFlexGroup justifyContent="center">
-          <EuiFlexItem grow={false} className="dscNoResults">
-            <EuiCallOut
-              title={
-                <FormattedMessage
-                  id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
-                  defaultMessage="No results match your search criteria"
-                />
-              }
-              color="warning"
-              iconType="help"
-              data-test-subj="discoverNoResults"
-            />
-            <>
-              <EuiSpacer size="xl" />
-              <EuiText>
-                <h2 data-test-subj="discoverNoResultsTimefilter">
-                  <FormattedMessage
-                    id="discover.noResults.expandYourTimeRangeTitle"
-                    defaultMessage="Expand your time range or modify your query"
-                  />
-                </h2>
-                <p>
-                  <FormattedMessage
-                    id="discover.noResults.queryMayNotMatchTitle"
-                    defaultMessage="Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields"
-                  />
-                </p>
-              </EuiText>
-            </>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </>
-    </I18nProvider>
+    <EuiPage paddingSize="s">
+      <EuiFlexGroup justifyContent="center" direction="column">
+        <EuiFlexItem grow={false}>
+          <EuiCallOut
+            title={
+              <FormattedMessage
+                id="observability.noResults.noResultsMatchSearchCriteriaTitle"
+                defaultMessage="No results match your search criteria"
+              />
+            }
+            color="warning"
+            iconType="help"
+            data-test-subj="observabilityNoResultsCallout"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiSpacer size="s" />
+          <EuiText>
+            <h2 data-test-subj="obsNoResultsTimefilter">
+              <FormattedMessage
+                id="observability.noResults.expandYourTimeRangeTitle"
+                defaultMessage="Expand your time range or modify your query"
+              />
+            </h2>
+            <p>
+              <FormattedMessage
+                id="observability.noResults.queryMayNotMatchTitle"
+                defaultMessage="Your query may not match anything in the current time range, 
+                or there may not be any data at all in the currently selected time range. 
+                Try change time range, query filters or choose different time fields."
+              />
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPage>
   );
 };
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
index 0abf095fc6..0b906bf4e0 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
@@ -17,137 +17,20 @@ exports[`Field component Renders a sidebar field 1`] = `
   showTimestampOverrideButton={true}
   showToggleButton={true}
 >
-  <FieldButton
-    className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-    dataTestSubj="field-agent-showDetails"
-    fieldAction={
-      <React.Fragment>
-        <EuiToolTip
-          content="Override default pattern"
-          delay="long"
-          id="override-pattern"
-          position="top"
-        >
-          <React.Fragment>
-            <EuiButtonIcon
-              aria-labelledby="override_pattern"
-              color="text"
-              data-test-subj="eventExplorer__overrideDefaultPattern"
-              iconType="inputOutput"
-              onClick={[Function]}
-              size="s"
-            >
-              Override
-            </EuiButtonIcon>
-          </React.Fragment>
-        </EuiToolTip>
-        <EuiToolTip
-          content="Override default timestamp"
-          delay="long"
-          id="override-timestamp"
-          position="top"
-        >
-          <React.Fragment />
-        </EuiToolTip>
-        <EuiToolTip
-          content="inspect"
-          delay="long"
-          position="top"
-        >
-          <EuiPopover
-            anchorPosition="rightUp"
-            button={
-              <EuiButtonIcon
-                iconType="inspect"
-                onClick={[Function]}
-                size="xs"
-              />
-            }
-            closePopover={[Function]}
-            display="block"
-            hasArrow={true}
-            isOpen={false}
-            ownFocus={true}
-            panelClassName="explorerSidebarItem__fieldPopoverPanel"
-            panelPaddingSize="m"
-          >
-            <EuiFlexGroup
-              justifyContent="spaceBetween"
-            >
-              <EuiFlexItem>
-                <EuiTitle
-                  size="xs"
-                >
-                  <h4>
-                    AGENT
-                  </h4>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={false}
-              >
-                String
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            <Unknown
-              field={
-                Object {
-                  "name": "agent",
-                  "type": "string",
-                }
-              }
-            />
-          </EuiPopover>
-        </EuiToolTip>
-        <EuiToolTip
-          content="Remove field from table"
-          delay="long"
-          position="top"
-        >
-          <React.Fragment>
-            <EuiButtonIcon
-              aria-label="Remove agent from table"
-              color="danger"
-              data-test-subj="fieldToggle-agent"
-              iconType="cross"
-              onClick={[Function]}
-            />
-          </React.Fragment>
-        </EuiToolTip>
-      </React.Fragment>
-    }
-    fieldIcon={
-      <FieldIcon
-        type="string"
-      />
-    }
-    fieldName={
-      <span
-        className="dscSidebarField__name"
-        data-test-subj="field-agent"
-        title="agent"
-      >
-        <EuiText
-          size="xs"
-        >
-          agent
-        </EuiText>
-      </span>
-    }
-    isActive={false}
-    onClick={[Function]}
-    size="s"
+  <EuiFlexGroup
+    alignItems="center"
+    className="dscSidebarField"
+    gutterSize="s"
+    responsive={false}
   >
     <div
-      className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
     >
-      <button
-        className="osd-resetFocusState osdFieldButton__button"
-        data-test-subj="field-agent-showDetails"
-        onClick={[Function]}
+      <EuiFlexItem
+        grow={false}
       >
-        <span
-          className="osdFieldButton__fieldIcon"
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <FieldIcon
             type="string"
@@ -156,23 +39,23 @@ exports[`Field component Renders a sidebar field 1`] = `
               aria-label="string"
               className="osdFieldIcon"
               iconType="tokenString"
-              size="l"
+              size="s"
               title="string"
             >
               <span
-                className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                 style={Object {}}
               >
                 <EuiIcon
                   aria-label="string"
-                  size="l"
+                  size="m"
                   title="string"
                   type="tokenString"
                 >
                   <EuiIconEmpty
                     aria-hidden={true}
                     aria-label="string"
-                    className="euiIcon euiIcon--large euiIcon-isLoading"
+                    className="euiIcon euiIcon--medium euiIcon-isLoading"
                     focusable="false"
                     role="img"
                     style={null}
@@ -181,7 +64,7 @@ exports[`Field component Renders a sidebar field 1`] = `
                     <svg
                       aria-hidden={true}
                       aria-label="string"
-                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading"
                       focusable="false"
                       height={16}
                       role="img"
@@ -195,244 +78,269 @@ exports[`Field component Renders a sidebar field 1`] = `
               </span>
             </EuiToken>
           </FieldIcon>
-        </span>
-        <span
-          className="osdFieldButton__name"
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={true}
+      >
+        <div
+          className="euiFlexItem"
         >
-          <span
-            className="dscSidebarField__name"
-            data-test-subj="field-agent"
-            title="agent"
+          <EuiText
+            size="xs"
           >
-            <EuiText
-              size="xs"
+            <div
+              className="euiText euiText--extraSmall"
             >
-              <div
-                className="euiText euiText--extraSmall"
-              >
-                agent
-              </div>
-            </EuiText>
-          </span>
-        </span>
-      </button>
-      <div
-        className="osdFieldButton__fieldAction"
+              agent
+            </div>
+          </EuiText>
+        </div>
+      </EuiFlexItem>
+      <EuiToolTip
+        content="Override default pattern"
+        delay="long"
+        id="override-pattern"
+        position="top"
       >
-        <EuiToolTip
-          content="Override default pattern"
-          delay="long"
-          id="override-pattern"
-          position="top"
+        <span
+          className="euiToolTipAnchor"
+          onKeyUp={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
         >
-          <span
-            className="euiToolTipAnchor"
-            onKeyUp={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <EuiFlexItem
+            grow={false}
           >
-            <EuiButtonIcon
-              aria-labelledby="override_pattern"
-              color="text"
-              data-test-subj="eventExplorer__overrideDefaultPattern"
-              iconType="inputOutput"
-              onClick={[Function]}
-              size="s"
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
+              <EuiButtonIcon
                 aria-labelledby="override_pattern"
-                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                className="dscSidebarField__actionButton"
+                color="text"
                 data-test-subj="eventExplorer__overrideDefaultPattern"
-                disabled={false}
+                iconType="inputOutput"
                 onClick={[Function]}
-                type="button"
+                size="xs"
               >
-                <EuiIcon
-                  aria-hidden="true"
-                  className="euiButtonIcon__icon"
-                  color="inherit"
-                  size="m"
-                  type="inputOutput"
+                <button
+                  aria-labelledby="override_pattern"
+                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <EuiIconEmpty
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                    focusable="false"
-                    role="img"
-                    style={null}
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    color="inherit"
+                    size="m"
+                    type="inputOutput"
                   >
-                    <svg
+                    <EuiIconEmpty
                       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>
-          </span>
-        </EuiToolTip>
-        <EuiToolTip
-          content="Override default timestamp"
-          delay="long"
-          id="override-timestamp"
-          position="top"
-        >
-          <span
-            className="euiToolTipAnchor"
-            onKeyUp={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-          />
-        </EuiToolTip>
-        <EuiToolTip
-          content="inspect"
-          delay="long"
-          position="top"
+                    >
+                      <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>
+            </div>
+          </EuiFlexItem>
+        </span>
+      </EuiToolTip>
+      <EuiToolTip
+        content="Override default timestamp"
+        delay="long"
+        id="override-timestamp"
+        position="top"
+      >
+        <span
+          className="euiToolTipAnchor"
+          onKeyUp={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+        />
+      </EuiToolTip>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <span
-            className="euiToolTipAnchor"
-            onKeyUp={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <EuiToolTip
+            content="inspect"
+            delay="long"
+            position="top"
           >
-            <EuiPopover
-              anchorPosition="rightUp"
-              button={
-                <EuiButtonIcon
-                  iconType="inspect"
-                  onClick={[Function]}
-                  size="xs"
-                />
-              }
-              closePopover={[Function]}
-              display="block"
-              hasArrow={true}
-              isOpen={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              ownFocus={true}
-              panelClassName="explorerSidebarItem__fieldPopoverPanel"
-              panelPaddingSize="m"
+            <span
+              className="euiToolTipAnchor"
+              onKeyUp={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
             >
-              <div
-                className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+              <EuiPopover
+                anchorPosition="rightUp"
+                button={
+                  <EuiButtonIcon
+                    aria-label="inspect"
+                    className="dscSidebarField__actionButton"
+                    iconType="inspect"
+                    onClick={[Function]}
+                    size="xs"
+                  />
+                }
+                closePopover={[Function]}
+                display="block"
+                hasArrow={true}
+                isOpen={false}
                 onBlur={[Function]}
                 onFocus={[Function]}
+                ownFocus={true}
+                panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                panelPaddingSize="m"
               >
                 <div
-                  className="euiPopover__anchor"
+                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
                 >
-                  <EuiButtonIcon
-                    iconType="inspect"
-                    onClick={[Function]}
-                    size="xs"
+                  <div
+                    className="euiPopover__anchor"
                   >
-                    <button
-                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                      disabled={false}
+                    <EuiButtonIcon
+                      aria-label="inspect"
+                      className="dscSidebarField__actionButton"
+                      iconType="inspect"
                       onClick={[Function]}
-                      type="button"
+                      size="xs"
                     >
-                      <EuiIcon
-                        aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        color="inherit"
-                        size="m"
-                        type="inspect"
+                      <button
+                        aria-label="inspect"
+                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="inspect"
                         >
-                          <svg
+                          <EuiIconEmpty
                             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>
+                          >
+                            <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>
+                  </div>
                 </div>
-              </div>
-            </EuiPopover>
-          </span>
-        </EuiToolTip>
-        <EuiToolTip
-          content="Remove field from table"
-          delay="long"
-          position="top"
+              </EuiPopover>
+            </span>
+          </EuiToolTip>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <span
-            className="euiToolTipAnchor"
-            onKeyUp={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
+          <EuiToolTip
+            content="Remove field from table"
+            delay="long"
+            position="top"
           >
-            <EuiButtonIcon
-              aria-label="Remove agent from table"
-              color="danger"
-              data-test-subj="fieldToggle-agent"
-              iconType="cross"
-              onClick={[Function]}
+            <span
+              className="euiToolTipAnchor"
+              onKeyUp={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
             >
-              <button
+              <EuiButtonIcon
                 aria-label="Remove agent from table"
-                className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                className="dscSidebarField__actionButton"
+                color="danger"
                 data-test-subj="fieldToggle-agent"
-                disabled={false}
+                iconType="cross"
                 onClick={[Function]}
-                type="button"
               >
-                <EuiIcon
-                  aria-hidden="true"
-                  className="euiButtonIcon__icon"
-                  color="inherit"
-                  size="m"
-                  type="cross"
+                <button
+                  aria-label="Remove agent from table"
+                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                  data-test-subj="fieldToggle-agent"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
                 >
-                  <EuiIconEmpty
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                    focusable="false"
-                    role="img"
-                    style={null}
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    color="inherit"
+                    size="m"
+                    type="cross"
                   >
-                    <svg
+                    <EuiIconEmpty
                       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>
-          </span>
-        </EuiToolTip>
-      </div>
+                    >
+                      <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>
+            </span>
+          </EuiToolTip>
+        </div>
+      </EuiFlexItem>
     </div>
-  </FieldButton>
+  </EuiFlexGroup>
 </Component>
 `;
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index afc799306d..fe7ab15c31 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -163,107 +163,149 @@ exports[`Siderbar component Renders empty sidebar component 1`] = `
                       }
                     }
                   >
-                    <section
-                      className="sidebar-list"
+                    <_EuiSplitPanelOuter
+                      borderRadius="none"
+                      className="sidebar-list eui-yScroll"
+                      color="transparent"
                     >
-                      <div
-                        className="dscSidebar__item"
+                      <EuiPanel
+                        borderRadius="none"
+                        className="euiSplitPanel sidebar-list eui-yScroll"
+                        color="transparent"
+                        grow={false}
+                        paddingSize="none"
                       >
-                        <EuiFieldSearch
-                          compressed={true}
-                          data-test-subj="eventExplorer__sidebarSearch"
-                          fullWidth={true}
-                          incremental={false}
-                          isClearable={true}
-                          isLoading={false}
-                          onChange={[Function]}
-                          placeholder="Search field names"
-                          value=""
+                        <div
+                          className="euiPanel euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero euiSplitPanel sidebar-list eui-yScroll"
                         >
-                          <EuiFormControlLayout
-                            compressed={true}
-                            fullWidth={true}
-                            icon="search"
-                            isLoading={false}
+                          <_EuiSplitPanelInner
+                            grow={false}
+                            paddingSize="s"
                           >
-                            <div
-                              className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                            <EuiPanel
+                              borderRadius="none"
+                              className="euiSplitPanel__inner"
+                              color="transparent"
+                              element="div"
+                              grow={false}
+                              hasBorder={false}
+                              hasShadow={false}
+                              paddingSize="s"
                             >
                               <div
-                                className="euiFormControlLayout__childrenWrapper"
+                                className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner"
                               >
-                                <EuiValidatableControl>
-                                  <input
-                                    className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+                                <div
+                                  className="dscSidebar__item"
+                                >
+                                  <EuiFieldSearch
+                                    compressed={true}
                                     data-test-subj="eventExplorer__sidebarSearch"
+                                    fullWidth={true}
+                                    incremental={false}
+                                    isClearable={true}
+                                    isLoading={false}
                                     onChange={[Function]}
-                                    onKeyUp={[Function]}
                                     placeholder="Search field names"
-                                    type="search"
                                     value=""
-                                  />
-                                </EuiValidatableControl>
-                                <EuiFormControlLayoutIcons
-                                  compressed={true}
-                                  icon="search"
-                                  isLoading={false}
-                                >
-                                  <div
-                                    className="euiFormControlLayoutIcons"
                                   >
-                                    <EuiFormControlLayoutCustomIcon
-                                      size="s"
-                                      type="search"
+                                    <EuiFormControlLayout
+                                      compressed={true}
+                                      fullWidth={true}
+                                      icon="search"
+                                      isLoading={false}
                                     >
-                                      <span
-                                        className="euiFormControlLayoutCustomIcon"
+                                      <div
+                                        className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                       >
-                                        <EuiIcon
-                                          aria-hidden="true"
-                                          className="euiFormControlLayoutCustomIcon__icon"
-                                          size="s"
-                                          type="search"
+                                        <div
+                                          className="euiFormControlLayout__childrenWrapper"
                                         >
-                                          <EuiIconEmpty
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--small 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"
+                                          <EuiValidatableControl>
+                                            <input
+                                              className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+                                              data-test-subj="eventExplorer__sidebarSearch"
+                                              onChange={[Function]}
+                                              onKeyUp={[Function]}
+                                              placeholder="Search field names"
+                                              type="search"
+                                              value=""
                                             />
-                                          </EuiIconEmpty>
-                                        </EuiIcon>
-                                      </span>
-                                    </EuiFormControlLayoutCustomIcon>
-                                  </div>
-                                </EuiFormControlLayoutIcons>
+                                          </EuiValidatableControl>
+                                          <EuiFormControlLayoutIcons
+                                            compressed={true}
+                                            icon="search"
+                                            isLoading={false}
+                                          >
+                                            <div
+                                              className="euiFormControlLayoutIcons"
+                                            >
+                                              <EuiFormControlLayoutCustomIcon
+                                                size="s"
+                                                type="search"
+                                              >
+                                                <span
+                                                  className="euiFormControlLayoutCustomIcon"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiFormControlLayoutCustomIcon__icon"
+                                                    size="s"
+                                                    type="search"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small 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>
+                                          </EuiFormControlLayoutIcons>
+                                        </div>
+                                      </div>
+                                    </EuiFormControlLayout>
+                                  </EuiFieldSearch>
+                                </div>
                               </div>
-                            </div>
-                          </EuiFormControlLayout>
-                        </EuiFieldSearch>
-                      </div>
-                      <EuiSpacer
-                        size="s"
-                      >
-                        <div
-                          className="euiSpacer euiSpacer--s"
-                        />
-                      </EuiSpacer>
-                      <div
-                        className="sidebar-list"
-                      />
-                    </section>
+                            </EuiPanel>
+                          </_EuiSplitPanelInner>
+                          <_EuiSplitPanelInner
+                            className="eui-yScroll"
+                            paddingSize="none"
+                          >
+                            <EuiPanel
+                              borderRadius="none"
+                              className="euiSplitPanel__inner eui-yScroll"
+                              color="transparent"
+                              element="div"
+                              hasBorder={false}
+                              hasShadow={false}
+                              paddingSize="none"
+                            >
+                              <div
+                                className="euiPanel euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner eui-yScroll"
+                              />
+                            </EuiPanel>
+                          </_EuiSplitPanelInner>
+                        </div>
+                      </EuiPanel>
+                    </_EuiSplitPanelOuter>
                   </Provider>
                 </App>
               </ErrorBoundary>
@@ -796,343 +838,307 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                       }
                     }
                   >
-                    <section
-                      className="sidebar-list"
+                    <_EuiSplitPanelOuter
+                      borderRadius="none"
+                      className="sidebar-list eui-yScroll"
+                      color="transparent"
                     >
-                      <div
-                        className="dscSidebar__item"
+                      <EuiPanel
+                        borderRadius="none"
+                        className="euiSplitPanel sidebar-list eui-yScroll"
+                        color="transparent"
+                        grow={false}
+                        paddingSize="none"
                       >
-                        <EuiFieldSearch
-                          compressed={true}
-                          data-test-subj="eventExplorer__sidebarSearch"
-                          fullWidth={true}
-                          incremental={false}
-                          isClearable={true}
-                          isLoading={false}
-                          onChange={[Function]}
-                          placeholder="Search field names"
-                          value=""
+                        <div
+                          className="euiPanel euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero euiSplitPanel sidebar-list eui-yScroll"
                         >
-                          <EuiFormControlLayout
-                            compressed={true}
-                            fullWidth={true}
-                            icon="search"
-                            isLoading={false}
+                          <_EuiSplitPanelInner
+                            grow={false}
+                            paddingSize="s"
                           >
-                            <div
-                              className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                            <EuiPanel
+                              borderRadius="none"
+                              className="euiSplitPanel__inner"
+                              color="transparent"
+                              element="div"
+                              grow={false}
+                              hasBorder={false}
+                              hasShadow={false}
+                              paddingSize="s"
                             >
                               <div
-                                className="euiFormControlLayout__childrenWrapper"
+                                className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner"
                               >
-                                <EuiValidatableControl>
-                                  <input
-                                    className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+                                <div
+                                  className="dscSidebar__item"
+                                >
+                                  <EuiFieldSearch
+                                    compressed={true}
                                     data-test-subj="eventExplorer__sidebarSearch"
+                                    fullWidth={true}
+                                    incremental={false}
+                                    isClearable={true}
+                                    isLoading={false}
                                     onChange={[Function]}
-                                    onKeyUp={[Function]}
                                     placeholder="Search field names"
-                                    type="search"
                                     value=""
-                                  />
-                                </EuiValidatableControl>
-                                <EuiFormControlLayoutIcons
-                                  compressed={true}
-                                  icon="search"
-                                  isLoading={false}
-                                >
-                                  <div
-                                    className="euiFormControlLayoutIcons"
                                   >
-                                    <EuiFormControlLayoutCustomIcon
-                                      size="s"
-                                      type="search"
+                                    <EuiFormControlLayout
+                                      compressed={true}
+                                      fullWidth={true}
+                                      icon="search"
+                                      isLoading={false}
                                     >
-                                      <span
-                                        className="euiFormControlLayoutCustomIcon"
+                                      <div
+                                        className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                       >
-                                        <EuiIcon
-                                          aria-hidden="true"
-                                          className="euiFormControlLayoutCustomIcon__icon"
-                                          size="s"
-                                          type="search"
+                                        <div
+                                          className="euiFormControlLayout__childrenWrapper"
                                         >
-                                          <EuiIconSearch
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
+                                          <EuiValidatableControl>
+                                            <input
+                                              className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+                                              data-test-subj="eventExplorer__sidebarSearch"
+                                              onChange={[Function]}
+                                              onKeyUp={[Function]}
+                                              placeholder="Search field names"
+                                              type="search"
+                                              value=""
+                                            />
+                                          </EuiValidatableControl>
+                                          <EuiFormControlLayoutIcons
+                                            compressed={true}
+                                            icon="search"
+                                            isLoading={false}
                                           >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
-                                              focusable="false"
-                                              height={16}
-                                              role="img"
-                                              style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
+                                            <div
+                                              className="euiFormControlLayoutIcons"
                                             >
-                                              <path
-                                                d="m11.271 11.978 3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738Z"
-                                              />
-                                            </svg>
-                                          </EuiIconSearch>
-                                        </EuiIcon>
-                                      </span>
-                                    </EuiFormControlLayoutCustomIcon>
-                                  </div>
-                                </EuiFormControlLayoutIcons>
+                                              <EuiFormControlLayoutCustomIcon
+                                                size="s"
+                                                type="search"
+                                              >
+                                                <span
+                                                  className="euiFormControlLayoutCustomIcon"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiFormControlLayoutCustomIcon__icon"
+                                                    size="s"
+                                                    type="search"
+                                                  >
+                                                    <EuiIconSearch
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small 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="m11.271 11.978 3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738Z"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconSearch>
+                                                  </EuiIcon>
+                                                </span>
+                                              </EuiFormControlLayoutCustomIcon>
+                                            </div>
+                                          </EuiFormControlLayoutIcons>
+                                        </div>
+                                      </div>
+                                    </EuiFormControlLayout>
+                                  </EuiFieldSearch>
+                                </div>
                               </div>
-                            </div>
-                          </EuiFormControlLayout>
-                        </EuiFieldSearch>
-                      </div>
-                      <EuiSpacer
-                        size="s"
-                      >
-                        <div
-                          className="euiSpacer euiSpacer--s"
-                        />
-                      </EuiSpacer>
-                      <div
-                        className="sidebar-list"
-                      >
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent={
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <span>
-                                Query fields
-                              </span>
-                            </EuiTitle>
-                          }
-                          id="fieldSelector__queriedFields"
-                          initialIsOpen={true}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="xs"
-                        >
-                          <div
-                            className="euiAccordion euiAccordion-isOpen"
+                            </EuiPanel>
+                          </_EuiSplitPanelInner>
+                          <_EuiSplitPanelInner
+                            className="eui-yScroll"
+                            paddingSize="none"
                           >
-                            <div
-                              className="euiAccordion__triggerWrapper"
+                            <EuiPanel
+                              borderRadius="none"
+                              className="euiSplitPanel__inner eui-yScroll"
+                              color="transparent"
+                              element="div"
+                              hasBorder={false}
+                              hasShadow={false}
+                              paddingSize="none"
                             >
-                              <button
-                                aria-controls="fieldSelector__queriedFields"
-                                aria-expanded={true}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
+                              <div
+                                className="euiPanel euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner eui-yScroll"
                               >
-                                <span
-                                  className="euiAccordion__iconWrapper"
+                                <EuiTitle
+                                  className="dscSideBarFieldListHeader"
+                                  id="obs_queried_fields"
+                                  size="xxxs"
                                 >
-                                  <EuiIcon
-                                    className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    size="m"
-                                    type="arrowRight"
+                                  <h3
+                                    className="euiTitle euiTitle--xxxsmall dscSideBarFieldListHeader"
+                                    id="obs_queried_fields"
                                   >
-                                    <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"
-                                >
-                                  <EuiTitle
-                                    size="xxs"
-                                  >
-                                    <span
-                                      className="euiTitle euiTitle--xxsmall"
+                                    <FormattedMessage
+                                      defaultMessage="Query fields"
+                                      id="discover.fieldChooser.filter.selectedFieldsTitle"
+                                      values={Object {}}
                                     >
                                       Query fields
-                                    </span>
-                                  </EuiTitle>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              aria-labelledby="random_html_id"
-                              className="euiAccordion__childWrapper"
-                              id="fieldSelector__queriedFields"
-                              role="region"
-                              tabIndex={-1}
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className="euiAccordion__padding--xs"
+                                    </FormattedMessage>
+                                  </h3>
+                                </EuiTitle>
+                                <EuiDroppable
+                                  aria-labelledby="queried_fields"
+                                  className="dscSidebarList explorerFieldList--selected"
+                                  data-test-subj="fieldList-selected"
+                                  droppableId="queried_fields_drop"
+                                  spacing="m"
+                                >
+                                  <Connect(Droppable)
+                                    aria-labelledby="queried_fields"
+                                    direction="vertical"
+                                    droppableId="queried_fields_drop"
+                                    getContainerForClone={[Function]}
+                                    ignoreContainerClipping={false}
+                                    isCombineEnabled={false}
+                                    isDropDisabled={false}
+                                    mode="standard"
+                                    renderClone={null}
+                                    type="EUI_DEFAULT"
                                   >
-                                    <EuiHorizontalRule
-                                      margin="xs"
-                                    >
-                                      <hr
-                                        className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-                                      />
-                                    </EuiHorizontalRule>
-                                    <EuiDroppable
+                                    <Droppable
                                       aria-labelledby="queried_fields"
-                                      className="dscSidebarList explorerFieldList--selected"
-                                      data-test-subj="fieldList-selected"
+                                      direction="vertical"
                                       droppableId="queried_fields_drop"
-                                      spacing="m"
+                                      getContainerForClone={[Function]}
+                                      ignoreContainerClipping={false}
+                                      isCombineEnabled={false}
+                                      isDropDisabled={false}
+                                      mode="standard"
+                                      placeholder={null}
+                                      renderClone={null}
+                                      shouldAnimatePlaceholder={false}
+                                      snapshot={
+                                        Object {
+                                          "draggingFromThisWith": null,
+                                          "draggingOverWith": null,
+                                          "isDraggingOver": false,
+                                          "isUsingPlaceholder": false,
+                                        }
+                                      }
+                                      type="EUI_DEFAULT"
+                                      updateViewportMaxScroll={[Function]}
+                                      useClone={null}
                                     >
-                                      <Connect(Droppable)
-                                        aria-labelledby="queried_fields"
-                                        direction="vertical"
-                                        droppableId="queried_fields_drop"
-                                        getContainerForClone={[Function]}
-                                        ignoreContainerClipping={false}
-                                        isCombineEnabled={false}
-                                        isDropDisabled={false}
-                                        mode="standard"
-                                        renderClone={null}
-                                        type="EUI_DEFAULT"
+                                      <div
+                                        className="euiDroppable euiDroppable--noGrow euiDroppable--m dscSidebarList explorerFieldList--selected"
+                                        data-rbd-droppable-context-id="1"
+                                        data-rbd-droppable-id="queried_fields_drop"
+                                        data-test-subj="fieldList-selected"
                                       >
-                                        <Droppable
-                                          aria-labelledby="queried_fields"
-                                          direction="vertical"
-                                          droppableId="queried_fields_drop"
-                                          getContainerForClone={[Function]}
-                                          ignoreContainerClipping={false}
-                                          isCombineEnabled={false}
-                                          isDropDisabled={false}
-                                          mode="standard"
-                                          placeholder={null}
-                                          renderClone={null}
-                                          shouldAnimatePlaceholder={false}
-                                          snapshot={
-                                            Object {
-                                              "draggingFromThisWith": null,
-                                              "draggingOverWith": null,
-                                              "isDraggingOver": false,
-                                              "isUsingPlaceholder": false,
-                                            }
-                                          }
-                                          type="EUI_DEFAULT"
-                                          updateViewportMaxScroll={[Function]}
-                                          useClone={null}
+                                        <EuiDraggable
+                                          draggableId="queriedField-double_per_ip_bytes"
+                                          index={0}
+                                          key="fielddouble_per_ip_bytes"
+                                          spacing="m"
                                         >
-                                          <div
-                                            className="euiDroppable euiDroppable--noGrow euiDroppable--m dscSidebarList explorerFieldList--selected"
-                                            data-rbd-droppable-context-id="1"
-                                            data-rbd-droppable-id="queried_fields_drop"
-                                            data-test-subj="fieldList-selected"
+                                          <PublicDraggable
+                                            draggableId="queriedField-double_per_ip_bytes"
+                                            index={0}
+                                            isDragDisabled={false}
                                           >
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="double_per_ip_bytes"
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
                                               draggableId="queriedField-double_per_ip_bytes"
                                               index={0}
-                                              key="fielddouble_per_ip_bytes"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="double_per_ip_bytes"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
                                                 draggableId="queriedField-double_per_ip_bytes"
                                                 index={0}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="double_per_ip_bytes"
                                                   draggableId="queriedField-double_per_ip_bytes"
+                                                  dropAnimationFinished={[Function]}
                                                   index={0}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="double_per_ip_bytes"
-                                                    draggableId="queriedField-double_per_ip_bytes"
-                                                    index={0}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="queriedField-double_per_ip_bytes"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="queriedField-double_per_ip_bytes"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="double_per_ip_bytes"
-                                                      draggableId="queriedField-double_per_ip_bytes"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={0}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="queriedField-double_per_ip_bytes"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="queriedField-double_per_ip_bytes"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="double_per_ip_bytes"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "double_per_ip_bytes",
@@ -1147,126 +1153,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-double_per_ip_bytes-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            DOUBLE_PER_IP_BYTES
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Long
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "double_per_ip_bytes",
-                                                                          "type": "long",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove double_per_ip_bytes from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-double_per_ip_bytes"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="long"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-double_per_ip_bytes"
-                                                                title="double_per_ip_bytes"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  double_per_ip_bytes
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-double_per_ip_bytes-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="long"
@@ -1275,23 +1175,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="long"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="long"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="long"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="long"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="long"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -1300,7 +1200,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="long"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -1314,293 +1214,315 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      double_per_ip_bytes
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-double_per_ip_bytes"
-                                                                    title="double_per_ip_bytes"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        double_per_ip_bytes
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove double_per_ip_bytes from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-double_per_ip_bytes"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Remove double_per_ip_bytes from table"
-                                                                        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="danger"
                                                                         data-test-subj="fieldToggle-double_per_ip_bytes"
-                                                                        disabled={true}
-                                                                        type="button"
-                                                                      >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="cross"
+                                                                        iconType="cross"
+                                                                        isDisabled={true}
+                                                                      >
+                                                                        <button
+                                                                          aria-label="Remove double_per_ip_bytes from table"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-double_per_ip_bytes"
+                                                                          disabled={true}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="cross"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="host"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="queriedField-host"
+                                          index={1}
+                                          key="fieldhost"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="queriedField-host"
+                                            index={1}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
                                               draggableId="queriedField-host"
                                               index={1}
-                                              key="fieldhost"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="host"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
                                                 draggableId="queriedField-host"
                                                 index={1}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="host"
                                                   draggableId="queriedField-host"
+                                                  dropAnimationFinished={[Function]}
                                                   index={1}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="host"
-                                                    draggableId="queriedField-host"
-                                                    index={1}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="queriedField-host"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="queriedField-host"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="host"
-                                                      draggableId="queriedField-host"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={1}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="queriedField-host"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="queriedField-host"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="host"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "host",
@@ -1615,126 +1537,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-host-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            HOST
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Text
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "host",
-                                                                          "type": "text",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove host from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-host"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="text"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-host"
-                                                                title="host"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  host
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-host-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="text"
@@ -1743,23 +1559,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="text"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="text"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="text"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="text"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="text"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -1768,7 +1584,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="text"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -1782,293 +1598,315 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      host
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-host"
-                                                                    title="host"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        host
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove host from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-host"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Remove host from table"
-                                                                        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="danger"
                                                                         data-test-subj="fieldToggle-host"
-                                                                        disabled={true}
-                                                                        type="button"
-                                                                      >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="cross"
+                                                                        iconType="cross"
+                                                                        isDisabled={true}
+                                                                      >
+                                                                        <button
+                                                                          aria-label="Remove host from table"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-host"
+                                                                          disabled={true}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="cross"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="ip_count"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="queriedField-ip_count"
+                                          index={2}
+                                          key="fieldip_count"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="queriedField-ip_count"
+                                            index={2}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
                                               draggableId="queriedField-ip_count"
                                               index={2}
-                                              key="fieldip_count"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="ip_count"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
                                                 draggableId="queriedField-ip_count"
                                                 index={2}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="ip_count"
                                                   draggableId="queriedField-ip_count"
+                                                  dropAnimationFinished={[Function]}
                                                   index={2}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="ip_count"
-                                                    draggableId="queriedField-ip_count"
-                                                    index={2}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="queriedField-ip_count"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="queriedField-ip_count"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="ip_count"
-                                                      draggableId="queriedField-ip_count"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={2}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="queriedField-ip_count"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="queriedField-ip_count"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="ip_count"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "ip_count",
@@ -2083,126 +1921,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-ip_count-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            IP_COUNT
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Integer
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "ip_count",
-                                                                          "type": "integer",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove ip_count from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-ip_count"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="integer"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-ip_count"
-                                                                title="ip_count"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  ip_count
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-ip_count-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="integer"
@@ -2211,23 +1943,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="integer"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="integer"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="integer"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="integer"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="integer"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -2236,7 +1968,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="integer"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -2250,293 +1982,315 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      ip_count
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-ip_count"
-                                                                    title="ip_count"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        ip_count
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove ip_count from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-ip_count"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Remove ip_count from table"
-                                                                        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="danger"
                                                                         data-test-subj="fieldToggle-ip_count"
-                                                                        disabled={true}
-                                                                        type="button"
-                                                                      >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="cross"
+                                                                        iconType="cross"
+                                                                        isDisabled={true}
+                                                                      >
+                                                                        <button
+                                                                          aria-label="Remove ip_count from table"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-ip_count"
+                                                                          disabled={true}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="cross"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="per_ip_bytes"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="queriedField-per_ip_bytes"
+                                          index={3}
+                                          key="fieldper_ip_bytes"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="queriedField-per_ip_bytes"
+                                            index={3}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
                                               draggableId="queriedField-per_ip_bytes"
                                               index={3}
-                                              key="fieldper_ip_bytes"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="per_ip_bytes"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
                                                 draggableId="queriedField-per_ip_bytes"
                                                 index={3}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="per_ip_bytes"
                                                   draggableId="queriedField-per_ip_bytes"
+                                                  dropAnimationFinished={[Function]}
                                                   index={3}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="per_ip_bytes"
-                                                    draggableId="queriedField-per_ip_bytes"
-                                                    index={3}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="queriedField-per_ip_bytes"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="queriedField-per_ip_bytes"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="per_ip_bytes"
-                                                      draggableId="queriedField-per_ip_bytes"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={3}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="queriedField-per_ip_bytes"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="queriedField-per_ip_bytes"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="per_ip_bytes"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "per_ip_bytes",
@@ -2551,126 +2305,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-per_ip_bytes-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            PER_IP_BYTES
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Long
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "per_ip_bytes",
-                                                                          "type": "long",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove per_ip_bytes from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-per_ip_bytes"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="long"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-per_ip_bytes"
-                                                                title="per_ip_bytes"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  per_ip_bytes
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-per_ip_bytes-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="long"
@@ -2679,23 +2327,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="long"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="long"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="long"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="long"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="long"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -2704,7 +2352,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="long"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -2718,293 +2366,315 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      per_ip_bytes
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-per_ip_bytes"
-                                                                    title="per_ip_bytes"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        per_ip_bytes
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove per_ip_bytes from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-per_ip_bytes"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Remove per_ip_bytes from table"
-                                                                        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="danger"
                                                                         data-test-subj="fieldToggle-per_ip_bytes"
-                                                                        disabled={true}
-                                                                        type="button"
-                                                                      >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="cross"
+                                                                        iconType="cross"
+                                                                        isDisabled={true}
+                                                                      >
+                                                                        <button
+                                                                          aria-label="Remove per_ip_bytes from table"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-per_ip_bytes"
+                                                                          disabled={true}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="cross"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="resp_code"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="queriedField-resp_code"
+                                          index={4}
+                                          key="fieldresp_code"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="queriedField-resp_code"
+                                            index={4}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
                                               draggableId="queriedField-resp_code"
                                               index={4}
-                                              key="fieldresp_code"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="resp_code"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
                                                 draggableId="queriedField-resp_code"
                                                 index={4}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="resp_code"
                                                   draggableId="queriedField-resp_code"
+                                                  dropAnimationFinished={[Function]}
                                                   index={4}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="resp_code"
-                                                    draggableId="queriedField-resp_code"
-                                                    index={4}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="queriedField-resp_code"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="queriedField-resp_code"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="resp_code"
-                                                      draggableId="queriedField-resp_code"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={4}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="queriedField-resp_code"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="queriedField-resp_code"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="resp_code"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "resp_code",
@@ -3019,126 +2689,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-resp_code-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            RESP_CODE
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Text
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "resp_code",
-                                                                          "type": "text",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove resp_code from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-resp_code"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="text"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-resp_code"
-                                                                title="resp_code"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  resp_code
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-resp_code-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="text"
@@ -3147,23 +2711,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="text"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="text"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="text"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="text"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="text"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -3172,7 +2736,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="text"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -3186,293 +2750,315 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      resp_code
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-resp_code"
-                                                                    title="resp_code"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        resp_code
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove resp_code from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-resp_code"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Remove resp_code from table"
-                                                                        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="danger"
                                                                         data-test-subj="fieldToggle-resp_code"
-                                                                        disabled={true}
-                                                                        type="button"
-                                                                      >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="cross"
+                                                                        iconType="cross"
+                                                                        isDisabled={true}
+                                                                      >
+                                                                        <button
+                                                                          aria-label="Remove resp_code from table"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-resp_code"
+                                                                          disabled={true}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="cross"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="sum_bytes"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="queriedField-sum_bytes"
+                                          index={5}
+                                          key="fieldsum_bytes"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="queriedField-sum_bytes"
+                                            index={5}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
                                               draggableId="queriedField-sum_bytes"
                                               index={5}
-                                              key="fieldsum_bytes"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="sum_bytes"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
                                                 draggableId="queriedField-sum_bytes"
                                                 index={5}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="sum_bytes"
                                                   draggableId="queriedField-sum_bytes"
+                                                  dropAnimationFinished={[Function]}
                                                   index={5}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="sum_bytes"
-                                                    draggableId="queriedField-sum_bytes"
-                                                    index={5}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="queriedField-sum_bytes"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="queriedField-sum_bytes"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="sum_bytes"
-                                                      draggableId="queriedField-sum_bytes"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={5}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="queriedField-sum_bytes"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="queriedField-sum_bytes"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="sum_bytes"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "sum_bytes",
@@ -3487,126 +3073,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={false}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-sum_bytes-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            SUM_BYTES
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Long
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "sum_bytes",
-                                                                          "type": "long",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove sum_bytes from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-sum_bytes"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="long"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-sum_bytes"
-                                                                title="sum_bytes"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  sum_bytes
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-sum_bytes-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="long"
@@ -3615,23 +3095,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="long"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="long"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="long"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="long"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="long"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -3640,7 +3120,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="long"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -3654,633 +3134,473 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      sum_bytes
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-sum_bytes"
-                                                                    title="sum_bytes"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        sum_bytes
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Toggle button is disabled on query contains 'stats' or no hits for the search"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Remove sum_bytes from table"
-                                                                      color="danger"
-                                                                      data-test-subj="fieldToggle-sum_bytes"
-                                                                      iconType="cross"
-                                                                      isDisabled={true}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Remove sum_bytes from table"
-                                                                        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="danger"
                                                                         data-test-subj="fieldToggle-sum_bytes"
-                                                                        disabled={true}
-                                                                        type="button"
-                                                                      >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="cross"
+                                                                        iconType="cross"
+                                                                        isDisabled={true}
+                                                                      >
+                                                                        <button
+                                                                          aria-label="Remove sum_bytes from table"
+                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-sum_bytes"
+                                                                          disabled={true}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="cross"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <div
-                                              className="euiDroppable__placeholder"
-                                            >
-                                              <AnimateInOut
-                                                on={null}
-                                                shouldAnimate={false}
-                                              />
-                                            </div>
-                                          </div>
-                                        </Droppable>
-                                      </Connect(Droppable)>
-                                    </EuiDroppable>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent={
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <span>
-                                Selected Fields
-                              </span>
-                            </EuiTitle>
-                          }
-                          id="fieldSelector__selectedFields"
-                          initialIsOpen={true}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="xs"
-                        >
-                          <div
-                            className="euiAccordion euiAccordion-isOpen"
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="fieldSelector__selectedFields"
-                                aria-expanded={true}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <div
+                                          className="euiDroppable__placeholder"
+                                        >
+                                          <AnimateInOut
+                                            on={null}
+                                            shouldAnimate={false}
+                                          />
+                                        </div>
+                                      </div>
+                                    </Droppable>
+                                  </Connect(Droppable)>
+                                </EuiDroppable>
+                                <EuiTitle
+                                  className="dscSideBarFieldListHeader"
+                                  id="obs_selected_fields"
+                                  size="xxxs"
                                 >
-                                  <EuiIcon
-                                    className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    size="m"
-                                    type="arrowRight"
+                                  <h3
+                                    className="euiTitle euiTitle--xxxsmall dscSideBarFieldListHeader"
+                                    id="obs_selected_fields"
                                   >
-                                    <EuiIconEmpty
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
+                                    <FormattedMessage
+                                      defaultMessage="Selected fields"
+                                      id="discover.fieldChooser.filter.selectedFieldsTitle"
+                                      values={Object {}}
                                     >
-                                      <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"
+                                      Selected fields
+                                    </FormattedMessage>
+                                  </h3>
+                                </EuiTitle>
+                                <EuiDroppable
+                                  aria-labelledby="selected_fields"
+                                  className="dscSidebarList explorerFieldList--selected"
+                                  data-test-subj="fieldList-selected"
+                                  droppableId="SELECTED FIELDS"
+                                  spacing="m"
                                 >
-                                  <EuiTitle
-                                    size="xxs"
-                                  >
-                                    <span
-                                      className="euiTitle euiTitle--xxsmall"
-                                    >
-                                      Selected Fields
-                                    </span>
-                                  </EuiTitle>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              aria-labelledby="random_html_id"
-                              className="euiAccordion__childWrapper"
-                              id="fieldSelector__selectedFields"
-                              role="region"
-                              tabIndex={-1}
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className="euiAccordion__padding--xs"
+                                  <Connect(Droppable)
+                                    aria-labelledby="selected_fields"
+                                    direction="vertical"
+                                    droppableId="SELECTED FIELDS"
+                                    getContainerForClone={[Function]}
+                                    ignoreContainerClipping={false}
+                                    isCombineEnabled={false}
+                                    isDropDisabled={false}
+                                    mode="standard"
+                                    renderClone={null}
+                                    type="EUI_DEFAULT"
                                   >
-                                    <EuiHorizontalRule
-                                      margin="xs"
-                                    >
-                                      <hr
-                                        className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-                                      />
-                                    </EuiHorizontalRule>
-                                    <EuiDroppable
+                                    <Droppable
                                       aria-labelledby="selected_fields"
-                                      className="dscSidebarList explorerFieldList--selected"
-                                      data-test-subj="fieldList-selected"
-                                      droppableId="selectedFields-drop"
-                                      spacing="m"
+                                      direction="vertical"
+                                      droppableId="SELECTED FIELDS"
+                                      getContainerForClone={[Function]}
+                                      ignoreContainerClipping={false}
+                                      isCombineEnabled={false}
+                                      isDropDisabled={false}
+                                      mode="standard"
+                                      placeholder={null}
+                                      renderClone={null}
+                                      shouldAnimatePlaceholder={false}
+                                      snapshot={
+                                        Object {
+                                          "draggingFromThisWith": null,
+                                          "draggingOverWith": null,
+                                          "isDraggingOver": false,
+                                          "isUsingPlaceholder": false,
+                                        }
+                                      }
+                                      type="EUI_DEFAULT"
+                                      updateViewportMaxScroll={[Function]}
+                                      useClone={null}
                                     >
-                                      <Connect(Droppable)
-                                        aria-labelledby="selected_fields"
-                                        direction="vertical"
-                                        droppableId="selectedFields-drop"
-                                        getContainerForClone={[Function]}
-                                        ignoreContainerClipping={false}
-                                        isCombineEnabled={false}
-                                        isDropDisabled={false}
-                                        mode="standard"
-                                        renderClone={null}
-                                        type="EUI_DEFAULT"
+                                      <div
+                                        className="euiDroppable euiDroppable--noGrow euiDroppable--m dscSidebarList explorerFieldList--selected"
+                                        data-rbd-droppable-context-id="1"
+                                        data-rbd-droppable-id="SELECTED FIELDS"
+                                        data-test-subj="fieldList-selected"
                                       >
-                                        <Droppable
-                                          aria-labelledby="selected_fields"
-                                          direction="vertical"
-                                          droppableId="selectedFields-drop"
-                                          getContainerForClone={[Function]}
-                                          ignoreContainerClipping={false}
-                                          isCombineEnabled={false}
-                                          isDropDisabled={false}
-                                          mode="standard"
-                                          placeholder={null}
-                                          renderClone={null}
-                                          shouldAnimatePlaceholder={false}
-                                          snapshot={
-                                            Object {
-                                              "draggingFromThisWith": null,
-                                              "draggingOverWith": null,
-                                              "isDraggingOver": false,
-                                              "isUsingPlaceholder": false,
-                                            }
-                                          }
-                                          type="EUI_DEFAULT"
-                                          updateViewportMaxScroll={[Function]}
-                                          useClone={null}
+                                        <div
+                                          className="euiDroppable__placeholder"
                                         >
-                                          <div
-                                            className="euiDroppable euiDroppable--noGrow euiDroppable--m dscSidebarList explorerFieldList--selected"
-                                            data-rbd-droppable-context-id="1"
-                                            data-rbd-droppable-id="selectedFields-drop"
-                                            data-test-subj="fieldList-selected"
-                                          >
-                                            <div
-                                              className="euiDroppable__placeholder"
-                                            >
-                                              <AnimateInOut
-                                                on={null}
-                                                shouldAnimate={false}
-                                              />
-                                            </div>
-                                          </div>
-                                        </Droppable>
-                                      </Connect(Droppable)>
-                                    </EuiDroppable>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                        <EuiSpacer
-                          size="s"
-                        >
-                          <div
-                            className="euiSpacer euiSpacer--s"
-                          />
-                        </EuiSpacer>
-                        <EuiAccordion
-                          arrowDisplay="left"
-                          buttonContent={
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <span>
-                                Available Fields
-                              </span>
-                            </EuiTitle>
-                          }
-                          id="fieldSelector__availableFields"
-                          initialIsOpen={true}
-                          isLoading={false}
-                          isLoadingMessage={false}
-                          paddingSize="xs"
-                        >
-                          <div
-                            className="euiAccordion euiAccordion-isOpen"
-                          >
-                            <div
-                              className="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="fieldSelector__availableFields"
-                                aria-expanded={true}
-                                className="euiAccordion__button"
-                                id="random_html_id"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <span
-                                  className="euiAccordion__iconWrapper"
+                                          <AnimateInOut
+                                            on={null}
+                                            shouldAnimate={false}
+                                          />
+                                        </div>
+                                      </div>
+                                    </Droppable>
+                                  </Connect(Droppable)>
+                                </EuiDroppable>
+                                <EuiTitle
+                                  className="dscSideBarFieldListHeader"
+                                  id="obs_available_fields"
+                                  size="xxxs"
                                 >
-                                  <EuiIcon
-                                    className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    size="m"
-                                    type="arrowRight"
+                                  <h3
+                                    className="euiTitle euiTitle--xxxsmall dscSideBarFieldListHeader"
+                                    id="obs_available_fields"
                                   >
-                                    <EuiIconEmpty
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
+                                    <FormattedMessage
+                                      defaultMessage="Available fields"
+                                      id="discover.fieldChooser.filter.availableFieldsTitle"
+                                      values={Object {}}
                                     >
-                                      <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"
+                                      Available fields
+                                    </FormattedMessage>
+                                  </h3>
+                                </EuiTitle>
+                                <EuiDroppable
+                                  aria-labelledby="available_fields"
+                                  className="explorerFieldList explorerFieldList--unpopular hidden-sm hidden-xs"
+                                  data-test-subj="fieldList-unpopular"
+                                  droppableId="AVAILABLE FIELDS"
+                                  spacing="m"
                                 >
-                                  <EuiTitle
-                                    size="xxs"
-                                  >
-                                    <span
-                                      className="euiTitle euiTitle--xxsmall"
-                                    >
-                                      Available Fields
-                                    </span>
-                                  </EuiTitle>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              aria-labelledby="random_html_id"
-                              className="euiAccordion__childWrapper"
-                              id="fieldSelector__availableFields"
-                              role="region"
-                              tabIndex={-1}
-                            >
-                              <EuiResizeObserver
-                                onResize={[Function]}
-                              >
-                                <div>
-                                  <div
-                                    className="euiAccordion__padding--xs"
+                                  <Connect(Droppable)
+                                    aria-labelledby="available_fields"
+                                    direction="vertical"
+                                    droppableId="AVAILABLE FIELDS"
+                                    getContainerForClone={[Function]}
+                                    ignoreContainerClipping={false}
+                                    isCombineEnabled={false}
+                                    isDropDisabled={false}
+                                    mode="standard"
+                                    renderClone={null}
+                                    type="EUI_DEFAULT"
                                   >
-                                    <EuiHorizontalRule
-                                      margin="xs"
-                                    >
-                                      <hr
-                                        className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-                                      />
-                                    </EuiHorizontalRule>
-                                    <EuiDroppable
+                                    <Droppable
                                       aria-labelledby="available_fields"
-                                      className="explorerFieldList explorerFieldList--unpopular hidden-sm hidden-xs"
-                                      data-test-subj="fieldList-unpopular"
-                                      droppableId="unpopularFields-drop"
-                                      spacing="m"
+                                      direction="vertical"
+                                      droppableId="AVAILABLE FIELDS"
+                                      getContainerForClone={[Function]}
+                                      ignoreContainerClipping={false}
+                                      isCombineEnabled={false}
+                                      isDropDisabled={false}
+                                      mode="standard"
+                                      placeholder={null}
+                                      renderClone={null}
+                                      shouldAnimatePlaceholder={false}
+                                      snapshot={
+                                        Object {
+                                          "draggingFromThisWith": null,
+                                          "draggingOverWith": null,
+                                          "isDraggingOver": false,
+                                          "isUsingPlaceholder": false,
+                                        }
+                                      }
+                                      type="EUI_DEFAULT"
+                                      updateViewportMaxScroll={[Function]}
+                                      useClone={null}
                                     >
-                                      <Connect(Droppable)
-                                        aria-labelledby="available_fields"
-                                        direction="vertical"
-                                        droppableId="unpopularFields-drop"
-                                        getContainerForClone={[Function]}
-                                        ignoreContainerClipping={false}
-                                        isCombineEnabled={false}
-                                        isDropDisabled={false}
-                                        mode="standard"
-                                        renderClone={null}
-                                        type="EUI_DEFAULT"
+                                      <div
+                                        className="euiDroppable euiDroppable--noGrow euiDroppable--m explorerFieldList explorerFieldList--unpopular hidden-sm hidden-xs"
+                                        data-rbd-droppable-context-id="1"
+                                        data-rbd-droppable-id="AVAILABLE FIELDS"
+                                        data-test-subj="fieldList-unpopular"
                                       >
-                                        <Droppable
-                                          aria-labelledby="available_fields"
-                                          direction="vertical"
-                                          droppableId="unpopularFields-drop"
-                                          getContainerForClone={[Function]}
-                                          ignoreContainerClipping={false}
-                                          isCombineEnabled={false}
-                                          isDropDisabled={false}
-                                          mode="standard"
-                                          placeholder={null}
-                                          renderClone={null}
-                                          shouldAnimatePlaceholder={false}
-                                          snapshot={
-                                            Object {
-                                              "draggingFromThisWith": null,
-                                              "draggingOverWith": null,
-                                              "isDraggingOver": false,
-                                              "isUsingPlaceholder": false,
-                                            }
-                                          }
-                                          type="EUI_DEFAULT"
-                                          updateViewportMaxScroll={[Function]}
-                                          useClone={null}
+                                        <EuiDraggable
+                                          draggableId="agent"
+                                          index={0}
+                                          key="fieldagent"
+                                          spacing="m"
                                         >
-                                          <div
-                                            className="euiDroppable euiDroppable--noGrow euiDroppable--m explorerFieldList explorerFieldList--unpopular hidden-sm hidden-xs"
-                                            data-rbd-droppable-context-id="1"
-                                            data-rbd-droppable-id="unpopularFields-drop"
-                                            data-test-subj="fieldList-unpopular"
+                                          <PublicDraggable
+                                            draggableId="agent"
+                                            index={0}
+                                            isDragDisabled={false}
                                           >
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="agent"
-                                              draggableId="availableField-fieldagent"
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="agent"
                                               index={0}
-                                              key="fieldagent"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="agent"
-                                                draggableId="availableField-fieldagent"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="agent"
                                                 index={0}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="agent"
-                                                  draggableId="availableField-fieldagent"
+                                                  draggableId="agent"
+                                                  dropAnimationFinished={[Function]}
                                                   index={0}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="agent"
-                                                    draggableId="availableField-fieldagent"
-                                                    index={0}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="agent"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="agent"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="agent"
-                                                      draggableId="availableField-fieldagent"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={0}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldagent"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldagent"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="agent"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "agent",
@@ -4295,137 +3615,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-agent-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            AGENT
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "agent",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add agent to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-agent"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-agent"
-                                                                title="agent"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  agent
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-agent-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -4434,23 +3637,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -4459,7 +3662,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -4473,340 +3676,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      agent
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-agent"
-                                                                    title="agent"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        agent
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add agent to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-agent"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add agent to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-agent"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add agent to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-agent"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="bytes"
-                                              draggableId="availableField-fieldbytes"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="bytes"
+                                          index={1}
+                                          key="fieldbytes"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="bytes"
+                                            index={1}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="bytes"
                                               index={1}
-                                              key="fieldbytes"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="bytes"
-                                                draggableId="availableField-fieldbytes"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="bytes"
                                                 index={1}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="bytes"
-                                                  draggableId="availableField-fieldbytes"
+                                                  draggableId="bytes"
+                                                  dropAnimationFinished={[Function]}
                                                   index={1}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="bytes"
-                                                    draggableId="availableField-fieldbytes"
-                                                    index={1}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="bytes"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="bytes"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="bytes"
-                                                      draggableId="availableField-fieldbytes"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={1}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldbytes"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldbytes"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="bytes"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "bytes",
@@ -4821,126 +4055,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-bytes-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            BYTES
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Long
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "bytes",
-                                                                          "type": "long",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add bytes to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-bytes"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="long"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-bytes"
-                                                                title="bytes"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  bytes
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-bytes-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="long"
@@ -4949,23 +4077,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="long"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="long"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="long"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="long"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="long"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -4974,7 +4102,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="long"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -4988,294 +4116,316 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      bytes
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-bytes"
-                                                                    title="bytes"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        bytes
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add bytes to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-bytes"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add bytes to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-bytes"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add bytes to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-bytes"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="clientip"
-                                              draggableId="availableField-fieldclientip"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="clientip"
+                                          index={2}
+                                          key="fieldclientip"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="clientip"
+                                            index={2}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="clientip"
                                               index={2}
-                                              key="fieldclientip"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="clientip"
-                                                draggableId="availableField-fieldclientip"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="clientip"
                                                 index={2}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="clientip"
-                                                  draggableId="availableField-fieldclientip"
+                                                  draggableId="clientip"
+                                                  dropAnimationFinished={[Function]}
                                                   index={2}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="clientip"
-                                                    draggableId="availableField-fieldclientip"
-                                                    index={2}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="clientip"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="clientip"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="clientip"
-                                                      draggableId="availableField-fieldclientip"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={2}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldclientip"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldclientip"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="clientip"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "clientip",
@@ -5290,126 +4440,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-clientip-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            CLIENTIP
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Ip
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "clientip",
-                                                                          "type": "ip",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add clientip to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-clientip"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="ip"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-clientip"
-                                                                title="clientip"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  clientip
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-clientip-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="ip"
@@ -5418,23 +4462,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="ip"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenIP"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="ip"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="ip"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="ip"
                                                                           type="tokenIP"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="ip"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -5443,7 +4487,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="ip"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -5457,294 +4501,316 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      clientip
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-clientip"
-                                                                    title="clientip"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        clientip
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add clientip to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-clientip"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add clientip to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-clientip"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add clientip to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-clientip"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="event"
-                                              draggableId="availableField-fieldevent"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="event"
+                                          index={3}
+                                          key="fieldevent"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="event"
+                                            index={3}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="event"
                                               index={3}
-                                              key="fieldevent"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="event"
-                                                draggableId="availableField-fieldevent"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="event"
                                                 index={3}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="event"
-                                                  draggableId="availableField-fieldevent"
+                                                  draggableId="event"
+                                                  dropAnimationFinished={[Function]}
                                                   index={3}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="event"
-                                                    draggableId="availableField-fieldevent"
-                                                    index={3}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="event"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="event"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="event"
-                                                      draggableId="availableField-fieldevent"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={3}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldevent"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldevent"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="event"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "event",
@@ -5759,126 +4825,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-event-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            EVENT
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Struct
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "event",
-                                                                          "type": "struct",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add event to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-event"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="struct"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-event"
-                                                                title="event"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  event
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-event-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="struct"
@@ -5887,23 +4847,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="struct"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="struct"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="struct"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="struct"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="struct"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -5912,7 +4872,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="struct"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -5926,294 +4886,316 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      event
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-event"
-                                                                    title="event"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        event
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add event to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-event"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add event to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-event"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add event to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-event"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="extension"
-                                              draggableId="availableField-fieldextension"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="extension"
+                                          index={4}
+                                          key="fieldextension"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="extension"
+                                            index={4}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="extension"
                                               index={4}
-                                              key="fieldextension"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="extension"
-                                                draggableId="availableField-fieldextension"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="extension"
                                                 index={4}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="extension"
-                                                  draggableId="availableField-fieldextension"
+                                                  draggableId="extension"
+                                                  dropAnimationFinished={[Function]}
                                                   index={4}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="extension"
-                                                    draggableId="availableField-fieldextension"
-                                                    index={4}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="extension"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="extension"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="extension"
-                                                      draggableId="availableField-fieldextension"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={4}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldextension"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldextension"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="extension"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "extension",
@@ -6228,137 +5210,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-extension-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            EXTENSION
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "extension",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add extension to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-extension"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-extension"
-                                                                title="extension"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  extension
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-extension-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -6367,23 +5232,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -6392,7 +5257,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -6406,340 +5271,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      extension
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-extension"
-                                                                    title="extension"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        extension
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add extension to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-extension"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add extension to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-extension"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add extension to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-extension"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="geo"
-                                              draggableId="availableField-fieldgeo"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="geo"
+                                          index={5}
+                                          key="fieldgeo"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="geo"
+                                            index={5}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="geo"
                                               index={5}
-                                              key="fieldgeo"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="geo"
-                                                draggableId="availableField-fieldgeo"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="geo"
                                                 index={5}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="geo"
-                                                  draggableId="availableField-fieldgeo"
+                                                  draggableId="geo"
+                                                  dropAnimationFinished={[Function]}
                                                   index={5}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="geo"
-                                                    draggableId="availableField-fieldgeo"
-                                                    index={5}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="geo"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="geo"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="geo"
-                                                      draggableId="availableField-fieldgeo"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={5}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldgeo"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldgeo"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="geo"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "geo",
@@ -6754,126 +5650,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-geo-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            GEO
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Struct
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "geo",
-                                                                          "type": "struct",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add geo to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-geo"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="struct"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-geo"
-                                                                title="geo"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  geo
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-geo-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="struct"
@@ -6882,23 +5672,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="struct"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="struct"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="struct"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="struct"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="struct"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -6907,7 +5697,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="struct"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -6921,294 +5711,316 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      geo
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-geo"
-                                                                    title="geo"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        geo
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add geo to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-geo"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add geo to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-geo"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add geo to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-geo"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="host"
-                                              draggableId="availableField-fieldhost"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="host"
+                                          index={6}
+                                          key="fieldhost"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="host"
+                                            index={6}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="host"
                                               index={6}
-                                              key="fieldhost"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="host"
-                                                draggableId="availableField-fieldhost"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="host"
                                                 index={6}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="host"
-                                                  draggableId="availableField-fieldhost"
+                                                  draggableId="host"
+                                                  dropAnimationFinished={[Function]}
                                                   index={6}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="host"
-                                                    draggableId="availableField-fieldhost"
-                                                    index={6}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="host"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="host"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="host"
-                                                      draggableId="availableField-fieldhost"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={6}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldhost"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldhost"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="host"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "host",
@@ -7223,137 +6035,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-host-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            HOST
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "host",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add host to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-host"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-host"
-                                                                title="host"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  host
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-host-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -7362,23 +6057,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -7387,7 +6082,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -7401,340 +6096,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      host
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-host"
-                                                                    title="host"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        host
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add host to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-host"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add host to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-host"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add host to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-host"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="index"
-                                              draggableId="availableField-fieldindex"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="index"
+                                          index={7}
+                                          key="fieldindex"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="index"
+                                            index={7}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="index"
                                               index={7}
-                                              key="fieldindex"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="index"
-                                                draggableId="availableField-fieldindex"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="index"
                                                 index={7}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="index"
-                                                  draggableId="availableField-fieldindex"
+                                                  draggableId="index"
+                                                  dropAnimationFinished={[Function]}
                                                   index={7}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="index"
-                                                    draggableId="availableField-fieldindex"
-                                                    index={7}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="index"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="index"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="index"
-                                                      draggableId="availableField-fieldindex"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={7}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldindex"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldindex"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="index"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "index",
@@ -7749,137 +6475,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-index-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            INDEX
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "index",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add index to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-index"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-index"
-                                                                title="index"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  index
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-index-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -7888,23 +6497,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -7913,7 +6522,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -7927,340 +6536,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      index
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-index"
-                                                                    title="index"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        index
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add index to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-index"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add index to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-index"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add index to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-index"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="ip"
-                                              draggableId="availableField-fieldip"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="ip"
+                                          index={8}
+                                          key="fieldip"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="ip"
+                                            index={8}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="ip"
                                               index={8}
-                                              key="fieldip"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="ip"
-                                                draggableId="availableField-fieldip"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="ip"
                                                 index={8}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="ip"
-                                                  draggableId="availableField-fieldip"
+                                                  draggableId="ip"
+                                                  dropAnimationFinished={[Function]}
                                                   index={8}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="ip"
-                                                    draggableId="availableField-fieldip"
-                                                    index={8}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="ip"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="ip"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="ip"
-                                                      draggableId="availableField-fieldip"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={8}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldip"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldip"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="ip"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "ip",
@@ -8275,126 +6915,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-ip-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            IP
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Ip
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "ip",
-                                                                          "type": "ip",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add ip to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-ip"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="ip"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-ip"
-                                                                title="ip"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  ip
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-ip-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="ip"
@@ -8403,23 +6937,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="ip"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenIP"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="ip"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="ip"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="ip"
                                                                           type="tokenIP"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="ip"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -8428,7 +6962,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="ip"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -8442,294 +6976,316 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      ip
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-ip"
-                                                                    title="ip"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        ip
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add ip to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-ip"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add ip to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-ip"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add ip to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-ip"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="machine"
-                                              draggableId="availableField-fieldmachine"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="machine"
+                                          index={9}
+                                          key="fieldmachine"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="machine"
+                                            index={9}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="machine"
                                               index={9}
-                                              key="fieldmachine"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="machine"
-                                                draggableId="availableField-fieldmachine"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="machine"
                                                 index={9}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="machine"
-                                                  draggableId="availableField-fieldmachine"
+                                                  draggableId="machine"
+                                                  dropAnimationFinished={[Function]}
                                                   index={9}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="machine"
-                                                    draggableId="availableField-fieldmachine"
-                                                    index={9}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="machine"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="machine"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="machine"
-                                                      draggableId="availableField-fieldmachine"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={9}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldmachine"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldmachine"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="machine"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "machine",
@@ -8744,126 +7300,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-machine-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            MACHINE
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Struct
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "machine",
-                                                                          "type": "struct",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add machine to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-machine"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="struct"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-machine"
-                                                                title="machine"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  machine
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-machine-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="struct"
@@ -8872,23 +7322,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="struct"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="struct"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="struct"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="struct"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="struct"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -8897,7 +7347,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="struct"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -8911,294 +7361,316 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      machine
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-machine"
-                                                                    title="machine"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        machine
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add machine to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-machine"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add machine to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-machine"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add machine to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-machine"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="memory"
-                                              draggableId="availableField-fieldmemory"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="memory"
+                                          index={10}
+                                          key="fieldmemory"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="memory"
+                                            index={10}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="memory"
                                               index={10}
-                                              key="fieldmemory"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="memory"
-                                                draggableId="availableField-fieldmemory"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="memory"
                                                 index={10}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="memory"
-                                                  draggableId="availableField-fieldmemory"
+                                                  draggableId="memory"
+                                                  dropAnimationFinished={[Function]}
                                                   index={10}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="memory"
-                                                    draggableId="availableField-fieldmemory"
-                                                    index={10}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="memory"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="memory"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="memory"
-                                                      draggableId="availableField-fieldmemory"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={10}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldmemory"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldmemory"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="memory"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "memory",
@@ -9213,151 +7685,45 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-memory-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
+                                                          >
+                                                            <div
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
+                                                            >
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            MEMORY
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Double
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "memory",
-                                                                          "type": "double",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add memory to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-memory"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="double"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-memory"
-                                                                title="memory"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  memory
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
-                                                          >
-                                                            <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-memory-showDetails"
-                                                                onClick={[Function]}
-                                                              >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
-                                                                >
-                                                                  <FieldIcon
-                                                                    type="double"
+                                                                  <FieldIcon
+                                                                    type="double"
                                                                   >
                                                                     <EuiToken
                                                                       aria-label="double"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="double"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="double"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="double"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="double"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -9366,7 +7732,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="double"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -9380,294 +7746,316 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      memory
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-memory"
-                                                                    title="memory"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        memory
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add memory to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-memory"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add memory to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-memory"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add memory to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-memory"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="message"
-                                              draggableId="availableField-fieldmessage"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="message"
+                                          index={11}
+                                          key="fieldmessage"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="message"
+                                            index={11}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="message"
                                               index={11}
-                                              key="fieldmessage"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="message"
-                                                draggableId="availableField-fieldmessage"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="message"
                                                 index={11}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="message"
-                                                  draggableId="availableField-fieldmessage"
+                                                  draggableId="message"
+                                                  dropAnimationFinished={[Function]}
                                                   index={11}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="message"
-                                                    draggableId="availableField-fieldmessage"
-                                                    index={11}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="message"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="message"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="message"
-                                                      draggableId="availableField-fieldmessage"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={11}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldmessage"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldmessage"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="message"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "message",
@@ -9682,137 +8070,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-message-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            MESSAGE
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "message",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add message to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-message"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-message"
-                                                                title="message"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  message
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-message-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -9821,23 +8092,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -9846,7 +8117,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -9860,340 +8131,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      message
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-message"
-                                                                    title="message"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        message
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add message to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-message"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add message to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-message"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add message to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-message"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="phpmemory"
-                                              draggableId="availableField-fieldphpmemory"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="phpmemory"
+                                          index={12}
+                                          key="fieldphpmemory"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="phpmemory"
+                                            index={12}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="phpmemory"
                                               index={12}
-                                              key="fieldphpmemory"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="phpmemory"
-                                                draggableId="availableField-fieldphpmemory"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="phpmemory"
                                                 index={12}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="phpmemory"
-                                                  draggableId="availableField-fieldphpmemory"
+                                                  draggableId="phpmemory"
+                                                  dropAnimationFinished={[Function]}
                                                   index={12}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="phpmemory"
-                                                    draggableId="availableField-fieldphpmemory"
-                                                    index={12}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="phpmemory"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="phpmemory"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="phpmemory"
-                                                      draggableId="availableField-fieldphpmemory"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={12}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldphpmemory"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldphpmemory"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="phpmemory"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "phpmemory",
@@ -10208,126 +8510,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-phpmemory-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            PHPMEMORY
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Long
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "phpmemory",
-                                                                          "type": "long",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add phpmemory to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-phpmemory"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="long"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-phpmemory"
-                                                                title="phpmemory"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  phpmemory
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-phpmemory-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="long"
@@ -10336,23 +8532,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="long"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="long"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="long"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="long"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="long"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -10361,7 +8557,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="long"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -10375,294 +8571,316 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      phpmemory
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-phpmemory"
-                                                                    title="phpmemory"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        phpmemory
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add phpmemory to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-phpmemory"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add phpmemory to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-phpmemory"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add phpmemory to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-phpmemory"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="referer"
-                                              draggableId="availableField-fieldreferer"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="referer"
+                                          index={13}
+                                          key="fieldreferer"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="referer"
+                                            index={13}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="referer"
                                               index={13}
-                                              key="fieldreferer"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="referer"
-                                                draggableId="availableField-fieldreferer"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="referer"
                                                 index={13}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="referer"
-                                                  draggableId="availableField-fieldreferer"
+                                                  draggableId="referer"
+                                                  dropAnimationFinished={[Function]}
                                                   index={13}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="referer"
-                                                    draggableId="availableField-fieldreferer"
-                                                    index={13}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="referer"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="referer"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="referer"
-                                                      draggableId="availableField-fieldreferer"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={13}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldreferer"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldreferer"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="referer"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "referer",
@@ -10677,137 +8895,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-referer-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            REFERER
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "referer",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add referer to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-referer"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-referer"
-                                                                title="referer"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  referer
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-referer-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -10816,23 +8917,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -10841,7 +8942,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -10855,340 +8956,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      referer
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-referer"
-                                                                    title="referer"
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiText
-                                                                      size="xs"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        referer
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add referer to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-referer"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add referer to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-referer"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add referer to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-referer"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="request"
-                                              draggableId="availableField-fieldrequest"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="request"
+                                          index={14}
+                                          key="fieldrequest"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="request"
+                                            index={14}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="request"
                                               index={14}
-                                              key="fieldrequest"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="request"
-                                                draggableId="availableField-fieldrequest"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="request"
                                                 index={14}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="request"
-                                                  draggableId="availableField-fieldrequest"
+                                                  draggableId="request"
+                                                  dropAnimationFinished={[Function]}
                                                   index={14}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="request"
-                                                    draggableId="availableField-fieldrequest"
-                                                    index={14}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="request"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="request"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="request"
-                                                      draggableId="availableField-fieldrequest"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={14}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldrequest"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldrequest"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="request"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "request",
@@ -11203,137 +9335,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-request-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            REQUEST
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "request",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add request to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-request"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-request"
-                                                                title="request"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  request
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-request-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -11342,23 +9357,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -11367,7 +9382,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -11381,340 +9396,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      request
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-request"
-                                                                    title="request"
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiText
-                                                                      size="xs"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        request
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add request to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-request"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add request to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-request"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add request to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-request"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="response"
-                                              draggableId="availableField-fieldresponse"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="response"
+                                          index={15}
+                                          key="fieldresponse"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="response"
+                                            index={15}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="response"
                                               index={15}
-                                              key="fieldresponse"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="response"
-                                                draggableId="availableField-fieldresponse"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="response"
                                                 index={15}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="response"
-                                                  draggableId="availableField-fieldresponse"
+                                                  draggableId="response"
+                                                  dropAnimationFinished={[Function]}
                                                   index={15}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="response"
-                                                    draggableId="availableField-fieldresponse"
-                                                    index={15}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="response"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="response"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="response"
-                                                      draggableId="availableField-fieldresponse"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={15}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldresponse"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldresponse"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="response"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "response",
@@ -11729,137 +9775,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-response-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            RESPONSE
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "response",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add response to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-response"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-response"
-                                                                title="response"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  response
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-response-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -11868,23 +9797,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -11893,7 +9822,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -11907,340 +9836,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      response
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-response"
-                                                                    title="response"
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        response
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add response to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-response"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add response to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-response"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add response to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-response"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="tags"
-                                              draggableId="availableField-fieldtags"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="tags"
+                                          index={16}
+                                          key="fieldtags"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="tags"
+                                            index={16}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="tags"
                                               index={16}
-                                              key="fieldtags"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="tags"
-                                                draggableId="availableField-fieldtags"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="tags"
                                                 index={16}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="tags"
-                                                  draggableId="availableField-fieldtags"
+                                                  draggableId="tags"
+                                                  dropAnimationFinished={[Function]}
                                                   index={16}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="tags"
-                                                    draggableId="availableField-fieldtags"
-                                                    index={16}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="tags"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="tags"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="tags"
-                                                      draggableId="availableField-fieldtags"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={16}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldtags"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldtags"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="tags"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "tags",
@@ -12255,137 +10215,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-tags-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            TAGS
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "tags",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add tags to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-tags"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-tags"
-                                                                title="tags"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  tags
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-tags-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -12394,23 +10237,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -12419,7 +10262,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -12433,480 +10276,399 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      tags
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-tags"
-                                                                    title="tags"
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiText
-                                                                      size="xs"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        tags
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add tags to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-tags"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add tags to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-tags"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add tags to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-tags"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="timestamp"
-                                              draggableId="availableField-fieldtimestamp"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="timestamp"
+                                          index={17}
+                                          key="fieldtimestamp"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="timestamp"
+                                            index={17}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="timestamp"
                                               index={17}
-                                              key="fieldtimestamp"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="timestamp"
-                                                draggableId="availableField-fieldtimestamp"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="timestamp"
                                                 index={17}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="timestamp"
-                                                  draggableId="availableField-fieldtimestamp"
+                                                  draggableId="timestamp"
+                                                  dropAnimationFinished={[Function]}
                                                   index={17}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="timestamp"
-                                                    draggableId="availableField-fieldtimestamp"
-                                                    index={17}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="timestamp"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="timestamp"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="timestamp"
-                                                      draggableId="availableField-fieldtimestamp"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={17}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldtimestamp"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldtimestamp"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
-                                                      >
-                                                        <Component
-                                                          className="euiDraggable__item"
-                                                          field={
-                                                            Object {
-                                                              "name": "timestamp",
-                                                              "type": "timestamp",
-                                                            }
-                                                          }
-                                                          handleOverrideTimestamp={[MockFunction]}
-                                                          isFieldToggleButtonDisabled={false}
-                                                          isOverridingTimestamp={false}
-                                                          onToggleField={[Function]}
-                                                          selected={false}
-                                                          selectedTimestamp="timestamp"
-                                                          showTimestampOverrideButton={true}
-                                                        >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-timestamp-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiMark
-                                                                      data-test-subj="eventFields__default-timestamp-mark"
-                                                                    >
-                                                                      Default Timestamp
-                                                                    </EuiMark>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            TIMESTAMP
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Timestamp
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "timestamp",
-                                                                          "type": "timestamp",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add timestamp to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-timestamp"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="date"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-timestamp"
-                                                                title="timestamp"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  timestamp
-                                                                </EuiText>
-                                                              </span>
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="timestamp"
+                                                        data-test-subj="fieldList-field"
+                                                      >
+                                                        <Component
+                                                          field={
+                                                            Object {
+                                                              "name": "timestamp",
+                                                              "type": "timestamp",
                                                             }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          }
+                                                          handleOverrideTimestamp={[MockFunction]}
+                                                          isFieldToggleButtonDisabled={false}
+                                                          isOverridingTimestamp={false}
+                                                          onToggleField={[Function]}
+                                                          selected={false}
+                                                          selectedTimestamp="timestamp"
+                                                          showTimestampOverrideButton={true}
+                                                        >
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-timestamp-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="date"
@@ -12915,23 +10677,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="date"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenDate"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="date"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="date"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="date"
                                                                           type="tokenDate"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="date"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -12940,7 +10702,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="date"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -12954,305 +10716,357 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      timestamp
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-timestamp"
-                                                                    title="timestamp"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        timestamp
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiMark
-                                                                      data-test-subj="eventFields__default-timestamp-mark"
-                                                                    >
-                                                                      <mark
-                                                                        className="euiMark"
-                                                                        data-test-subj="eventFields__default-timestamp-mark"
-                                                                      >
-                                                                        Default Timestamp
-                                                                      </mark>
-                                                                    </EuiMark>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
-                                                                        onBlur={[Function]}
-                                                                        onFocus={[Function]}
+                                                                      <EuiText
+                                                                        size="xs"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiText euiText--extraSmall"
                                                                         >
+                                                                           
+                                                                          <EuiBadge
+                                                                            className="dscSidebarField__actionButton"
+                                                                            color="hollow"
+                                                                            data-test-subj="eventFields__default-timestamp-mark"
+                                                                          >
+                                                                            <EuiInnerText>
+                                                                              <span
+                                                                                className="euiBadge euiBadge--hollow euiBadge--iconLeft dscSidebarField__actionButton"
+                                                                                data-test-subj="eventFields__default-timestamp-mark"
+                                                                                title="Default Timestamp"
+                                                                              >
+                                                                                <span
+                                                                                  className="euiBadge__content"
+                                                                                >
+                                                                                  <span
+                                                                                    className="euiBadge__text"
+                                                                                  >
+                                                                                    Default Timestamp
+                                                                                  </span>
+                                                                                </span>
+                                                                              </span>
+                                                                            </EuiInnerText>
+                                                                          </EuiBadge>
+                                                                        </div>
+                                                                      </EuiText>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
                                                                           <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
                                                                             iconType="inspect"
                                                                             onClick={[Function]}
                                                                             size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
+                                                                        onBlur={[Function]}
+                                                                        onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
+                                                                      >
+                                                                        <div
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
+                                                                        >
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add timestamp to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-timestamp"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add timestamp to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-timestamp"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add timestamp to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-timestamp"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="url"
-                                              draggableId="availableField-fieldurl"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="url"
+                                          index={18}
+                                          key="fieldurl"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="url"
+                                            index={18}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="url"
                                               index={18}
-                                              key="fieldurl"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="url"
-                                                draggableId="availableField-fieldurl"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="url"
                                                 index={18}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="url"
-                                                  draggableId="availableField-fieldurl"
+                                                  draggableId="url"
+                                                  dropAnimationFinished={[Function]}
                                                   index={18}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="url"
-                                                    draggableId="availableField-fieldurl"
-                                                    index={18}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="url"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="url"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="url"
-                                                      draggableId="availableField-fieldurl"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={18}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldurl"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldurl"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="url"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "url",
@@ -13267,137 +11081,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-url-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            URL
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        String
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "url",
-                                                                          "type": "string",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add url to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-url"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="string"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-url"
-                                                                title="url"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  url
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-url-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="string"
@@ -13406,23 +11103,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="string"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenString"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="string"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="string"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="string"
                                                                           type="tokenString"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="string"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -13431,7 +11128,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="string"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -13445,340 +11142,371 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      url
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-url"
-                                                                    title="url"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        url
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_pattern"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_pattern"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultPattern"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_pattern"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add url to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-url"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add url to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-url"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add url to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-url"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <EuiDraggable
-                                              className="dscSidebar__item sidebar_content"
-                                              data-attr-field="utc_time"
-                                              draggableId="availableField-fieldutc_time"
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <EuiDraggable
+                                          draggableId="utc_time"
+                                          index={19}
+                                          key="fieldutc_time"
+                                          spacing="m"
+                                        >
+                                          <PublicDraggable
+                                            draggableId="utc_time"
+                                            index={19}
+                                            isDragDisabled={false}
+                                          >
+                                            <PrivateDraggable
+                                              canDragInteractiveElements={false}
+                                              draggableId="utc_time"
                                               index={19}
-                                              key="fieldutc_time"
-                                              spacing="m"
+                                              isClone={false}
+                                              isDragDisabled={false}
+                                              isEnabled={true}
+                                              shouldRespectForcePress={false}
                                             >
-                                              <PublicDraggable
-                                                data-attr-field="utc_time"
-                                                draggableId="availableField-fieldutc_time"
+                                              <Connect(Draggable)
+                                                canDragInteractiveElements={false}
+                                                draggableId="utc_time"
                                                 index={19}
+                                                isClone={false}
                                                 isDragDisabled={false}
+                                                isEnabled={true}
+                                                shouldRespectForcePress={false}
                                               >
-                                                <PrivateDraggable
+                                                <Draggable
                                                   canDragInteractiveElements={false}
-                                                  data-attr-field="utc_time"
-                                                  draggableId="availableField-fieldutc_time"
+                                                  draggableId="utc_time"
+                                                  dropAnimationFinished={[Function]}
                                                   index={19}
                                                   isClone={false}
                                                   isDragDisabled={false}
                                                   isEnabled={true}
+                                                  mapped={
+                                                    Object {
+                                                      "combineTargetFor": null,
+                                                      "offset": Object {
+                                                        "x": 0,
+                                                        "y": 0,
+                                                      },
+                                                      "shouldAnimateDisplacement": true,
+                                                      "snapshot": Object {
+                                                        "combineTargetFor": null,
+                                                        "combineWith": null,
+                                                        "draggingOver": null,
+                                                        "dropAnimation": null,
+                                                        "isClone": false,
+                                                        "isDragging": false,
+                                                        "isDropAnimating": false,
+                                                        "mode": null,
+                                                      },
+                                                      "type": "SECONDARY",
+                                                    }
+                                                  }
                                                   shouldRespectForcePress={false}
                                                 >
-                                                  <Connect(Draggable)
-                                                    canDragInteractiveElements={false}
-                                                    data-attr-field="utc_time"
-                                                    draggableId="availableField-fieldutc_time"
-                                                    index={19}
-                                                    isClone={false}
-                                                    isDragDisabled={false}
-                                                    isEnabled={true}
-                                                    shouldRespectForcePress={false}
+                                                  <div
+                                                    aria-describedby="rbd-hidden-text-1-hidden-text-1"
+                                                    className="euiDraggable euiDraggable--m"
+                                                    data-rbd-drag-handle-context-id="1"
+                                                    data-rbd-drag-handle-draggable-id="utc_time"
+                                                    data-rbd-draggable-context-id="1"
+                                                    data-rbd-draggable-id="utc_time"
+                                                    data-test-subj="draggable"
+                                                    draggable={false}
+                                                    onDragStart={[Function]}
+                                                    onTransitionEnd={null}
+                                                    role="button"
+                                                    style={
+                                                      Object {
+                                                        "transform": null,
+                                                        "transition": null,
+                                                      }
+                                                    }
+                                                    tabIndex={0}
                                                   >
-                                                    <Draggable
-                                                      canDragInteractiveElements={false}
+                                                    <EuiPanel
+                                                      className="dscSidebar__item euiDraggable__item"
                                                       data-attr-field="utc_time"
-                                                      draggableId="availableField-fieldutc_time"
-                                                      dropAnimationFinished={[Function]}
-                                                      index={19}
-                                                      isClone={false}
-                                                      isDragDisabled={false}
-                                                      isEnabled={true}
-                                                      mapped={
-                                                        Object {
-                                                          "combineTargetFor": null,
-                                                          "offset": Object {
-                                                            "x": 0,
-                                                            "y": 0,
-                                                          },
-                                                          "shouldAnimateDisplacement": true,
-                                                          "snapshot": Object {
-                                                            "combineTargetFor": null,
-                                                            "combineWith": null,
-                                                            "draggingOver": null,
-                                                            "dropAnimation": null,
-                                                            "isClone": false,
-                                                            "isDragging": false,
-                                                            "isDropAnimating": false,
-                                                            "mode": null,
-                                                          },
-                                                          "type": "SECONDARY",
-                                                        }
-                                                      }
-                                                      shouldRespectForcePress={false}
+                                                      data-test-subj="fieldList-field"
+                                                      paddingSize="s"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-1-hidden-text-1"
-                                                        className="euiDraggable euiDraggable--m dscSidebar__item sidebar_content"
-                                                        data-rbd-drag-handle-context-id="1"
-                                                        data-rbd-drag-handle-draggable-id="availableField-fieldutc_time"
-                                                        data-rbd-draggable-context-id="1"
-                                                        data-rbd-draggable-id="availableField-fieldutc_time"
-                                                        data-test-subj="draggable"
-                                                        draggable={false}
-                                                        onDragStart={[Function]}
-                                                        onTransitionEnd={null}
-                                                        role="button"
-                                                        style={
-                                                          Object {
-                                                            "transform": null,
-                                                            "transition": null,
-                                                          }
-                                                        }
-                                                        tabIndex={0}
+                                                        className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow dscSidebar__item euiDraggable__item"
+                                                        data-attr-field="utc_time"
+                                                        data-test-subj="fieldList-field"
                                                       >
                                                         <Component
-                                                          className="euiDraggable__item"
                                                           field={
                                                             Object {
                                                               "name": "utc_time",
@@ -13793,137 +11521,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                           selectedTimestamp="timestamp"
                                                           showTimestampOverrideButton={true}
                                                         >
-                                                          <FieldButton
-                                                            className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-                                                            dataTestSubj="field-utc_time-showDetails"
-                                                            fieldAction={
-                                                              <React.Fragment>
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_timestamp"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultTimestamp"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
-                                                                    >
-                                                                      Override
-                                                                    </EuiButtonIcon>
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <EuiPopover
-                                                                    anchorPosition="rightUp"
-                                                                    button={
-                                                                      <EuiButtonIcon
-                                                                        iconType="inspect"
-                                                                        onClick={[Function]}
-                                                                        size="xs"
-                                                                      />
-                                                                    }
-                                                                    closePopover={[Function]}
-                                                                    display="block"
-                                                                    hasArrow={true}
-                                                                    isOpen={false}
-                                                                    ownFocus={true}
-                                                                    panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                    panelPaddingSize="m"
-                                                                  >
-                                                                    <EuiFlexGroup
-                                                                      justifyContent="spaceBetween"
-                                                                    >
-                                                                      <EuiFlexItem>
-                                                                        <EuiTitle
-                                                                          size="xs"
-                                                                        >
-                                                                          <h4>
-                                                                            UTC_TIME
-                                                                          </h4>
-                                                                        </EuiTitle>
-                                                                      </EuiFlexItem>
-                                                                      <EuiFlexItem
-                                                                        grow={false}
-                                                                      >
-                                                                        Timestamp
-                                                                      </EuiFlexItem>
-                                                                    </EuiFlexGroup>
-                                                                    <Unknown
-                                                                      field={
-                                                                        Object {
-                                                                          "name": "utc_time",
-                                                                          "type": "timestamp",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </EuiPopover>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <React.Fragment>
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add utc_time to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-utc_time"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
-                                                                    />
-                                                                  </React.Fragment>
-                                                                </EuiToolTip>
-                                                              </React.Fragment>
-                                                            }
-                                                            fieldIcon={
-                                                              <FieldIcon
-                                                                type="date"
-                                                              />
-                                                            }
-                                                            fieldName={
-                                                              <span
-                                                                className="dscSidebarField__name"
-                                                                data-test-subj="field-utc_time"
-                                                                title="utc_time"
-                                                              >
-                                                                <EuiText
-                                                                  size="xs"
-                                                                >
-                                                                  utc_time
-                                                                </EuiText>
-                                                              </span>
-                                                            }
-                                                            isActive={false}
-                                                            onClick={[Function]}
-                                                            size="s"
+                                                          <EuiFlexGroup
+                                                            alignItems="center"
+                                                            className="dscSidebarField"
+                                                            gutterSize="s"
+                                                            responsive={false}
                                                           >
                                                             <div
-                                                              className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
+                                                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow dscSidebarField"
                                                             >
-                                                              <button
-                                                                className="osd-resetFocusState osdFieldButton__button"
-                                                                data-test-subj="field-utc_time-showDetails"
-                                                                onClick={[Function]}
+                                                              <EuiFlexItem
+                                                                grow={false}
                                                               >
-                                                                <span
-                                                                  className="osdFieldButton__fieldIcon"
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
                                                                   <FieldIcon
                                                                     type="date"
@@ -13932,23 +11543,23 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       aria-label="date"
                                                                       className="osdFieldIcon"
                                                                       iconType="tokenDate"
-                                                                      size="l"
+                                                                      size="s"
                                                                       title="date"
                                                                     >
                                                                       <span
-                                                                        className="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                                        className="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--small osdFieldIcon"
                                                                         style={Object {}}
                                                                       >
                                                                         <EuiIcon
                                                                           aria-label="date"
-                                                                          size="l"
+                                                                          size="m"
                                                                           title="date"
                                                                           type="tokenDate"
                                                                         >
                                                                           <EuiIconEmpty
                                                                             aria-hidden={true}
                                                                             aria-label="date"
-                                                                            className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                             focusable="false"
                                                                             role="img"
                                                                             style={null}
@@ -13957,7 +11568,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                             <svg
                                                                               aria-hidden={true}
                                                                               aria-label="date"
-                                                                              className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                                              className="euiIcon euiIcon--medium euiIcon-isLoading"
                                                                               focusable="false"
                                                                               height={16}
                                                                               role="img"
@@ -13971,272 +11582,297 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       </span>
                                                                     </EuiToken>
                                                                   </FieldIcon>
-                                                                </span>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={true}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem"
+                                                                >
+                                                                  <EuiText
+                                                                    size="xs"
+                                                                  >
+                                                                    <div
+                                                                      className="euiText euiText--extraSmall"
+                                                                    >
+                                                                      utc_time
+                                                                    </div>
+                                                                  </EuiText>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiToolTip
+                                                                content="Override default pattern"
+                                                                delay="long"
+                                                                id="override-pattern"
+                                                                position="top"
+                                                              >
                                                                 <span
-                                                                  className="osdFieldButton__name"
-                                                                >
-                                                                  <span
-                                                                    className="dscSidebarField__name"
-                                                                    data-test-subj="field-utc_time"
-                                                                    title="utc_time"
-                                                                  >
-                                                                    <EuiText
-                                                                      size="xs"
-                                                                    >
-                                                                      <div
-                                                                        className="euiText euiText--extraSmall"
-                                                                      >
-                                                                        utc_time
-                                                                      </div>
-                                                                    </EuiText>
-                                                                  </span>
-                                                                </span>
-                                                              </button>
-                                                              <div
-                                                                className="osdFieldButton__fieldAction"
-                                                              >
-                                                                <EuiToolTip
-                                                                  content="Override default pattern"
-                                                                  delay="long"
-                                                                  id="override-pattern"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  />
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Override default timestamp"
-                                                                  delay="long"
-                                                                  id="override-timestamp"
-                                                                  position="top"
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
+                                                                />
+                                                              </EuiToolTip>
+                                                              <EuiToolTip
+                                                                content="Override default timestamp"
+                                                                delay="long"
+                                                                id="override-timestamp"
+                                                                position="top"
+                                                              >
+                                                                <span
+                                                                  className="euiToolTipAnchor"
+                                                                  onKeyUp={[Function]}
+                                                                  onMouseOut={[Function]}
+                                                                  onMouseOver={[Function]}
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiFlexItem
+                                                                    grow={false}
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-labelledby="override_timestamp"
-                                                                      color="text"
-                                                                      data-test-subj="eventExplorer__overrideDefaultTimestamp"
-                                                                      iconType="inputOutput"
-                                                                      onClick={[Function]}
-                                                                      size="s"
+                                                                    <div
+                                                                      className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-labelledby="override_timestamp"
-                                                                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="text"
                                                                         data-test-subj="eventExplorer__overrideDefaultTimestamp"
-                                                                        disabled={false}
+                                                                        iconType="inputOutput"
                                                                         onClick={[Function]}
-                                                                        type="button"
+                                                                        size="xs"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="inputOutput"
+                                                                        <button
+                                                                          aria-labelledby="override_timestamp"
+                                                                          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="eventExplorer__overrideDefaultTimestamp"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="inputOutput"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="inspect"
-                                                                  delay="long"
-                                                                  position="top"
-                                                                >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
-                                                                  >
-                                                                    <EuiPopover
-                                                                      anchorPosition="rightUp"
-                                                                      button={
-                                                                        <EuiButtonIcon
-                                                                          iconType="inspect"
-                                                                          onClick={[Function]}
-                                                                          size="xs"
-                                                                        />
-                                                                      }
-                                                                      closePopover={[Function]}
-                                                                      display="block"
-                                                                      hasArrow={true}
-                                                                      isOpen={false}
-                                                                      onBlur={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      ownFocus={true}
-                                                                      panelClassName="explorerSidebarItem__fieldPopoverPanel"
-                                                                      panelPaddingSize="m"
-                                                                    >
-                                                                      <div
-                                                                        className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                            >
+                                                                              <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>
+                                                                    </div>
+                                                                  </EuiFlexItem>
+                                                                </span>
+                                                              </EuiToolTip>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                                                >
+                                                                  <EuiToolTip
+                                                                    content="inspect"
+                                                                    delay="long"
+                                                                    position="top"
+                                                                  >
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
+                                                                    >
+                                                                      <EuiPopover
+                                                                        anchorPosition="rightUp"
+                                                                        button={
+                                                                          <EuiButtonIcon
+                                                                            aria-label="inspect"
+                                                                            className="dscSidebarField__actionButton"
+                                                                            iconType="inspect"
+                                                                            onClick={[Function]}
+                                                                            size="xs"
+                                                                          />
+                                                                        }
+                                                                        closePopover={[Function]}
+                                                                        display="block"
+                                                                        hasArrow={true}
+                                                                        isOpen={false}
                                                                         onBlur={[Function]}
                                                                         onFocus={[Function]}
+                                                                        ownFocus={true}
+                                                                        panelClassName="explorerSidebarItem__fieldPopoverPanel"
+                                                                        panelPaddingSize="m"
                                                                       >
                                                                         <div
-                                                                          className="euiPopover__anchor"
+                                                                          className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                                                          onBlur={[Function]}
+                                                                          onFocus={[Function]}
                                                                         >
-                                                                          <EuiButtonIcon
-                                                                            iconType="inspect"
-                                                                            onClick={[Function]}
-                                                                            size="xs"
+                                                                          <div
+                                                                            className="euiPopover__anchor"
                                                                           >
-                                                                            <button
-                                                                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                                              disabled={false}
+                                                                            <EuiButtonIcon
+                                                                              aria-label="inspect"
+                                                                              className="dscSidebarField__actionButton"
+                                                                              iconType="inspect"
                                                                               onClick={[Function]}
-                                                                              type="button"
+                                                                              size="xs"
                                                                             >
-                                                                              <EuiIcon
-                                                                                aria-hidden="true"
-                                                                                className="euiButtonIcon__icon"
-                                                                                color="inherit"
-                                                                                size="m"
-                                                                                type="inspect"
+                                                                              <button
+                                                                                aria-label="inspect"
+                                                                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                                disabled={false}
+                                                                                onClick={[Function]}
+                                                                                type="button"
                                                                               >
-                                                                                <EuiIconEmpty
-                                                                                  aria-hidden={true}
-                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                                  focusable="false"
-                                                                                  role="img"
-                                                                                  style={null}
+                                                                                <EuiIcon
+                                                                                  aria-hidden="true"
+                                                                                  className="euiButtonIcon__icon"
+                                                                                  color="inherit"
+                                                                                  size="m"
+                                                                                  type="inspect"
                                                                                 >
-                                                                                  <svg
+                                                                                  <EuiIconEmpty
                                                                                     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>
+                                                                                  >
+                                                                                    <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>
+                                                                          </div>
                                                                         </div>
-                                                                      </div>
-                                                                    </EuiPopover>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                                <EuiToolTip
-                                                                  content="Add field as column"
-                                                                  delay="long"
-                                                                  position="top"
+                                                                      </EuiPopover>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
+                                                              <EuiFlexItem
+                                                                grow={false}
+                                                              >
+                                                                <div
+                                                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                                                 >
-                                                                  <span
-                                                                    className="euiToolTipAnchor"
-                                                                    onKeyUp={[Function]}
-                                                                    onMouseOut={[Function]}
-                                                                    onMouseOver={[Function]}
+                                                                  <EuiToolTip
+                                                                    content="Add field as column"
+                                                                    delay="long"
+                                                                    position="top"
                                                                   >
-                                                                    <EuiButtonIcon
-                                                                      aria-label="Add utc_time to table"
-                                                                      color="primary"
-                                                                      data-test-subj="fieldToggle-utc_time"
-                                                                      iconType="plusInCircleFilled"
-                                                                      onClick={[Function]}
+                                                                    <span
+                                                                      className="euiToolTipAnchor"
+                                                                      onKeyUp={[Function]}
+                                                                      onMouseOut={[Function]}
+                                                                      onMouseOver={[Function]}
                                                                     >
-                                                                      <button
+                                                                      <EuiButtonIcon
                                                                         aria-label="Add utc_time to table"
-                                                                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                                        className="dscSidebarField__actionButton"
+                                                                        color="primary"
                                                                         data-test-subj="fieldToggle-utc_time"
-                                                                        disabled={false}
+                                                                        iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
-                                                                        type="button"
                                                                       >
-                                                                        <EuiIcon
-                                                                          aria-hidden="true"
-                                                                          className="euiButtonIcon__icon"
-                                                                          color="inherit"
-                                                                          size="m"
-                                                                          type="plusInCircleFilled"
+                                                                        <button
+                                                                          aria-label="Add utc_time to table"
+                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          data-test-subj="fieldToggle-utc_time"
+                                                                          disabled={false}
+                                                                          onClick={[Function]}
+                                                                          type="button"
                                                                         >
-                                                                          <EuiIconEmpty
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                            focusable="false"
-                                                                            role="img"
-                                                                            style={null}
+                                                                          <EuiIcon
+                                                                            aria-hidden="true"
+                                                                            className="euiButtonIcon__icon"
+                                                                            color="inherit"
+                                                                            size="m"
+                                                                            type="plusInCircleFilled"
                                                                           >
-                                                                            <svg
+                                                                            <EuiIconEmpty
                                                                               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>
-                                                                  </span>
-                                                                </EuiToolTip>
-                                                              </div>
+                                                                            >
+                                                                              <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>
+                                                                    </span>
+                                                                  </EuiToolTip>
+                                                                </div>
+                                                              </EuiFlexItem>
                                                             </div>
-                                                          </FieldButton>
+                                                          </EuiFlexGroup>
                                                         </Component>
                                                       </div>
-                                                    </Draggable>
-                                                  </Connect(Draggable)>
-                                                </PrivateDraggable>
-                                              </PublicDraggable>
-                                            </EuiDraggable>
-                                            <div
-                                              className="euiDroppable__placeholder"
-                                            >
-                                              <AnimateInOut
-                                                on={null}
-                                                shouldAnimate={false}
-                                              />
-                                            </div>
-                                          </div>
-                                        </Droppable>
-                                      </Connect(Droppable)>
-                                    </EuiDroppable>
-                                  </div>
-                                </div>
-                              </EuiResizeObserver>
-                            </div>
-                          </div>
-                        </EuiAccordion>
-                      </div>
-                    </section>
+                                                    </EuiPanel>
+                                                  </div>
+                                                </Draggable>
+                                              </Connect(Draggable)>
+                                            </PrivateDraggable>
+                                          </PublicDraggable>
+                                        </EuiDraggable>
+                                        <div
+                                          className="euiDroppable__placeholder"
+                                        >
+                                          <AnimateInOut
+                                            on={null}
+                                            shouldAnimate={false}
+                                          />
+                                        </div>
+                                      </div>
+                                    </Droppable>
+                                  </Connect(Droppable)>
+                                </EuiDroppable>
+                              </div>
+                            </EuiPanel>
+                          </_EuiSplitPanelInner>
+                        </div>
+                      </EuiPanel>
+                    </_EuiSplitPanelOuter>
                   </Provider>
                 </App>
               </ErrorBoundary>
diff --git a/public/components/event_analytics/explorer/sidebar/field.tsx b/public/components/event_analytics/explorer/sidebar/field.tsx
index b55f5ff2c2..69e7fba1ba 100644
--- a/public/components/event_analytics/explorer/sidebar/field.tsx
+++ b/public/components/event_analytics/explorer/sidebar/field.tsx
@@ -16,6 +16,7 @@ import {
   EuiFlexItem,
   EuiTitle,
   EuiText,
+  EuiBadge,
 } from '@elastic/eui';
 import { FieldButton } from '../../../common/field_button';
 import { FieldIcon } from '../../../common/field_icon';
@@ -73,57 +74,91 @@ export const Field = (props: IFieldProps) => {
     onToggleField(fields);
   };
 
-  const getFieldActionDOM = () => {
-    return (
-      <>
-        <EuiToolTip id="override-pattern" delay="long" content="Override default pattern">
-          <>
-            {isEqual(field.type, 'string') ? (
-              isEqual(selectedPattern, field.name) ? (
-                <EuiMark data-test-subj="eventFields__default-pattern-mark">
-                  Default Pattern
-                </EuiMark>
-              ) : isOverridingPattern ? (
+  return (
+    <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} className="dscSidebarField">
+      <EuiFlexItem grow={false}>
+        <FieldIcon type={isEqual(field.type, 'timestamp') ? 'date' : field.type} />
+      </EuiFlexItem>
+      <EuiFlexItem grow>
+        <EuiText size="xs">{field.name}</EuiText>
+      </EuiFlexItem>
+      <EuiToolTip id="override-pattern" delay="long" content="Override default pattern">
+        <>
+          {isEqual(field.type, 'string') ? (
+            isEqual(selectedPattern, field.name) ? (
+              <EuiText size="xs">
+                {' '}
+                <EuiFlexItem grow={false}>
+                  <EuiBadge
+                    className="dscSidebarField__actionButton"
+                    color="hollow"
+                    data-test-subj="eventFields__default-pattern-mark"
+                  >
+                    Default Pattern
+                  </EuiBadge>
+                </EuiFlexItem>
+              </EuiText>
+            ) : isOverridingPattern ? (
+              <EuiFlexItem grow={false}>
                 <EuiLoadingSpinner className="override_pattern_loading" size="s" />
-              ) : (
+              </EuiFlexItem>
+            ) : (
+              <EuiFlexItem grow={false}>
                 <EuiButtonIcon
                   aria-labelledby="override_pattern"
-                  size="s"
+                  size="xs"
                   color="text"
                   iconType="inputOutput"
                   onClick={() => handleOverridePattern(field)}
                   data-test-subj="eventExplorer__overrideDefaultPattern"
+                  className="dscSidebarField__actionButton"
                 >
                   Override
                 </EuiButtonIcon>
-              )
-            ) : null}
-          </>
-        </EuiToolTip>
-        <EuiToolTip id="override-timestamp" delay="long" content="Override default timestamp">
-          <>
-            {showTimestampOverrideButton && isEqual(field.type, 'timestamp') ? (
-              isEqual(selectedTimestamp, field.name) ? (
-                <EuiMark data-test-subj="eventFields__default-timestamp-mark">
-                  Default Timestamp
-                </EuiMark>
-              ) : isOverridingTimestamp ? (
+              </EuiFlexItem>
+            )
+          ) : null}
+        </>
+      </EuiToolTip>
+      <EuiToolTip id="override-timestamp" delay="long" content="Override default timestamp">
+        <>
+          {showTimestampOverrideButton && isEqual(field.type, 'timestamp') ? (
+            isEqual(selectedTimestamp, field.name) ? (
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs">
+                  {' '}
+                  <EuiBadge
+                    className="dscSidebarField__actionButton"
+                    color="hollow"
+                    data-test-subj="eventFields__default-timestamp-mark"
+                  >
+                    Default Timestamp
+                  </EuiBadge>
+                </EuiText>
+              </EuiFlexItem>
+            ) : isOverridingTimestamp ? (
+              <EuiFlexItem grow={false}>
                 <EuiLoadingSpinner className="override_timestamp_loading" size="s" />
-              ) : (
+              </EuiFlexItem>
+            ) : (
+              <EuiFlexItem grow={false}>
                 <EuiButtonIcon
                   aria-labelledby="override_timestamp"
-                  size="s"
+                  size="xs"
                   color="text"
                   iconType="inputOutput"
                   onClick={() => handleOverrideTimestamp(field)}
                   data-test-subj="eventExplorer__overrideDefaultTimestamp"
+                  className="dscSidebarField__actionButton"
                 >
                   Override
                 </EuiButtonIcon>
-              )
-            ) : null}
-          </>
-        </EuiToolTip>
+              </EuiFlexItem>
+            )
+          ) : null}
+        </>
+      </EuiToolTip>
+      <EuiFlexItem grow={false}>
         <EuiToolTip delay="long" content="inspect">
           <EuiPopover
             ownFocus
@@ -132,7 +167,15 @@ export const Field = (props: IFieldProps) => {
             closePopover={() => setIsFieldDetailsOpen(false)}
             anchorPosition="rightUp"
             panelClassName="explorerSidebarItem__fieldPopoverPanel"
-            button={<EuiButtonIcon iconType="inspect" size="xs" onClick={togglePopover} />}
+            button={
+              <EuiButtonIcon
+                iconType="inspect"
+                size="xs"
+                onClick={togglePopover}
+                aria-label={'inspect'}
+                className="dscSidebarField__actionButton"
+              />
+            }
           >
             <EuiFlexGroup justifyContent="spaceBetween">
               <EuiFlexItem>
@@ -146,6 +189,8 @@ export const Field = (props: IFieldProps) => {
             <FieldInsights field={field} query={query} />
           </EuiPopover>
         </EuiToolTip>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiToolTip
           delay="long"
           content={
@@ -164,6 +209,7 @@ export const Field = (props: IFieldProps) => {
                 isDisabled
                 data-test-subj={`fieldToggle-${field.name}`}
                 aria-label={selected ? removeLabelAria : addLabelAria}
+                className="dscSidebarField__actionButton"
               />
             ) : (
               <EuiButtonIcon
@@ -179,32 +225,12 @@ export const Field = (props: IFieldProps) => {
                 }}
                 data-test-subj={`fieldToggle-${field.name}`}
                 aria-label={selected ? removeLabelAria : addLabelAria}
+                className="dscSidebarField__actionButton"
               />
             )}
           </>
         </EuiToolTip>
-      </>
-    );
-  };
-
-  return (
-    <FieldButton
-      size="s"
-      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
-      isActive={false}
-      dataTestSubj={`field-${field.name}-showDetails`}
-      fieldIcon={<FieldIcon type={isEqual(field.type, 'timestamp') ? 'date' : field.type} />}
-      fieldName={
-        <span
-          data-test-subj={`field-${field.name}`}
-          title={field.name}
-          className="dscSidebarField__name"
-        >
-          <EuiText size="xs">{field.name}</EuiText>
-        </span>
-      }
-      fieldAction={getFieldActionDOM()}
-      onClick={togglePopover}
-    />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
diff --git a/public/components/event_analytics/explorer/sidebar/field_insights.tsx b/public/components/event_analytics/explorer/sidebar/field_insights.tsx
index 2b82bfa0ea..a8a60a58f9 100644
--- a/public/components/event_analytics/explorer/sidebar/field_insights.tsx
+++ b/public/components/event_analytics/explorer/sidebar/field_insights.tsx
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, useState, useContext, useEffect } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { indexOf, last } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiBasicTable } from '@elastic/eui';
 import { getIndexPatternFromRawQuery } from '../../../common/query_utils';
-import { TabContext } from '../../hooks/use_tab_context';
+import { coreRefs } from '../../../../framework/core_refs';
 
 interface IInsightsReq {
   id: string;
@@ -19,7 +19,7 @@ interface IInsightsReq {
 type IInsightsReqParams = Pick<IInsightsReq, 'format' | 'query'>;
 
 export const FieldInsights = ({ field, query }: any) => {
-  const { pplService } = useContext(TabContext);
+  const { pplService } = coreRefs;
   const { rawQuery } = query;
   const index = getIndexPatternFromRawQuery(rawQuery);
   const generalReports = [
@@ -115,11 +115,11 @@ export const FieldInsights = ({ field, query }: any) => {
       .catch((error) => {
         console.error(error);
       });
-  }, []);
+  }, [query]);
 
   const getInsights = async (insightParams: IInsightsReqParams) => {
     try {
-      return await pplService.fetch(insightParams);
+      return await pplService?.fetch(insightParams);
     } catch (error) {
       console.error(error);
     }
diff --git a/public/components/event_analytics/explorer/sidebar/observability_sidebar.tsx b/public/components/event_analytics/explorer/sidebar/observability_sidebar.tsx
new file mode 100644
index 0000000000..89cb4e5e61
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/observability_sidebar.tsx
@@ -0,0 +1,95 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import _, { isEmpty } from 'lodash';
+import { changeQuery, selectQueries } from '../../redux/slices/query_slice';
+import { selectQueryResult } from '../../redux/slices/query_result_slice';
+import { selectFields } from '../../redux/slices/field_slice';
+import {
+  RAW_QUERY,
+  SELECTED_PATTERN_FIELD,
+  SELECTED_TIMESTAMP,
+} from '../../../../../common/constants/explorer';
+import { PPL_STATS_REGEX } from '../../../../../common/constants/shared';
+import { Sidebar } from './sidebar';
+import { useFetchPatterns } from '../../hooks';
+import { formatError } from '../../utils';
+import { IField } from '../../../../../common/types/explorer';
+import { selectCountDistribution } from '../../redux/slices/count_distribution_slice';
+
+export const ObservabilitySideBar = ({ tabId, pplService, notifications }) => {
+  const dispatch = useDispatch();
+  const query = useSelector(selectQueries)[tabId];
+  const explorerData = useSelector(selectQueryResult)[tabId];
+  const explorerFields = useSelector(selectFields)[tabId];
+  const countDistribution = useSelector(selectCountDistribution)[tabId];
+  const requestParams = { tabId };
+  const {
+    isEventsLoading: isPatternLoading,
+    getPatterns,
+    setDefaultPatternsField,
+  } = useFetchPatterns({
+    pplService,
+    requestParams,
+  });
+  const [isOverridingPattern, setIsOverridingPattern] = useState(false);
+  const [isOverridingTimestamp, setIsOverridingTimestamp] = useState(false);
+
+  const getErrorHandler = (title: string) => {
+    return (error: any) => {
+      const formattedError = formatError(error.name, error.message, error.body.message);
+      notifications.toasts.addError(formattedError, {
+        title,
+      });
+    };
+  };
+
+  const handleOverridePattern = async (pattern: IField) => {
+    setIsOverridingPattern(true);
+    await setDefaultPatternsField(
+      '',
+      pattern.name,
+      getErrorHandler('Error overriding default pattern')
+    );
+    setIsOverridingPattern(false);
+    await getPatterns(
+      countDistribution.selectedInterval || 'y',
+      getErrorHandler('Error fetching patterns')
+    );
+  };
+
+  const handleOverrideTimestamp = async (timestamp: IField) => {
+    setIsOverridingTimestamp(true);
+    await dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          [SELECTED_TIMESTAMP]: timestamp?.name || '',
+        },
+      })
+    );
+    setIsOverridingTimestamp(false);
+  };
+
+  return (
+    <Sidebar
+      query={query}
+      explorerFields={explorerFields}
+      explorerData={explorerData}
+      selectedTimestamp={query[SELECTED_TIMESTAMP]}
+      selectedPattern={query[SELECTED_PATTERN_FIELD]}
+      handleOverrideTimestamp={handleOverrideTimestamp}
+      handleOverridePattern={handleOverridePattern}
+      isOverridingTimestamp={isOverridingTimestamp}
+      isOverridingPattern={isOverridingPattern}
+      isFieldToggleButtonDisabled={
+        isEmpty(explorerData.jsonData) || !isEmpty(query[RAW_QUERY].match(PPL_STATS_REGEX))
+      }
+      tabId={tabId}
+    />
+  );
+};
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.scss b/public/components/event_analytics/explorer/sidebar/sidebar.scss
index 8f96c7764d..b9eeb45ffe 100644
--- a/public/components/event_analytics/explorer/sidebar/sidebar.scss
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.scss
@@ -3,6 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+ .dscSidebarField {
+  &__actionButton {
+    opacity: 0;
+    transition: opacity $euiAnimSpeedFast;
+
+    @include ouiBreakpoint("xs", "s", "m") {
+      opacity: 1;
+    }
+  }
+
+  &:hover &__actionButton,
+  &:focus &__actionButton {
+    opacity: 1;
+  }
+}
+
 .explorerIndexPattern__container {
   display: flex;
   align-items: center;
@@ -128,4 +144,16 @@
 .sidebar_content{
   white-space: nowrap;
   padding: 0.1px;
+}
+
+// align with discover 2.0 sidebar styling
+
+.dscSideBarFieldListHeader {
+  padding-left: 8px;
+}
+
+.deSidebar {
+  height: calc(100vh - 98px);
+  max-width: 462px;
+  min-width: 400px;
 }
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
index ae6a55a316..21d21b905e 100644
--- a/public/components/event_analytics/explorer/sidebar/sidebar.tsx
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
@@ -4,23 +4,20 @@
  */
 
 import {
-  EuiAccordion,
   EuiDragDropContext,
   EuiDraggable,
   EuiDroppable,
   EuiFieldSearch,
-  EuiHorizontalRule,
-  EuiPanel,
-  EuiSpacer,
   EuiTitle,
+  EuiSplitPanel,
+  EuiPanel,
 } from '@elastic/eui';
-import { I18nProvider } from '@osd/i18n/react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { isEmpty } from 'lodash';
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { batch, useDispatch } from 'react-redux';
 import { AVAILABLE_FIELDS, SELECTED_FIELDS } from '../../../../../common/constants/explorer';
 import { ExplorerFields, IExplorerFields, IField } from '../../../../../common/types/explorer';
-import { TabContext } from '../../hooks/use_tab_context';
 import { sortFields, updateFields } from '../../redux/slices/field_slice';
 import { Field } from './field';
 
@@ -51,14 +48,24 @@ export const Sidebar = (props: ISidebarProps) => {
     isFieldToggleButtonDisabled,
     handleOverridePattern,
     handleOverrideTimestamp,
-    storedExplorerFields,
-    setStoredExplorerFields,
+    tabId,
   } = props;
   const dispatch = useDispatch();
-  const { tabId } = useContext<any>(TabContext);
   const [showFields, setShowFields] = useState<boolean>(false);
   const [searchTerm, setSearchTerm] = useState<string>('');
 
+  // method to return the type of a field from its name
+  const getFieldTypes = (newFieldName: string) => {
+    let fieldType: string = '';
+    explorerFields.availableFields.map((field) => {
+      if (field.name === newFieldName) fieldType = field.type;
+    });
+    explorerFields.selectedFields.map((field) => {
+      if (field.name === newFieldName) fieldType = field.type;
+    });
+    return fieldType;
+  };
+
   /**
    * Toggle fields between selected and unselected sets
    * @param fieldState all fields in store
@@ -100,81 +107,88 @@ export const Sidebar = (props: ISidebarProps) => {
     });
   };
 
-  const checkWithStoredFields = () => {
-    if (
-      explorerFields.selectedFields.length === 0 &&
-      storedExplorerFields.selectedFields.length !== 0
-    ) {
-      return storedExplorerFields;
-    }
-    return explorerFields;
-  };
-
   const handleAddField = useCallback(
     (field: IField) => {
-      const nextFields = toggleFields(
-        checkWithStoredFields(),
-        field,
-        AVAILABLE_FIELDS,
+      updateStoreFields(
+        toggleFields(explorerFields, field, AVAILABLE_FIELDS, SELECTED_FIELDS),
+        tabId,
         SELECTED_FIELDS
       );
-      updateStoreFields(nextFields, tabId, SELECTED_FIELDS);
-      setStoredExplorerFields(nextFields);
     },
     [explorerFields, tabId]
   );
 
   const handleRemoveField = useCallback(
     (field: IField) => {
-      const nextFields = toggleFields(
-        checkWithStoredFields(),
-        field,
-        SELECTED_FIELDS,
+      updateStoreFields(
+        toggleFields(explorerFields, field, SELECTED_FIELDS, AVAILABLE_FIELDS),
+        tabId,
         AVAILABLE_FIELDS
       );
-      updateStoreFields(nextFields, tabId, AVAILABLE_FIELDS);
-      setStoredExplorerFields(nextFields);
     },
     [explorerFields, tabId]
   );
 
-  const onDragEnd = ({}) => {
-    console.log('source, destination');
+  const onDragEnd = ({
+    destination,
+    source,
+    draggableId,
+  }: {
+    destination: any;
+    source: any;
+    draggableId: string;
+  }) => {
+    // check if the destination and source are the same area
+    if (destination.droppableId !== source.droppableId) {
+      // if dropped into the selected fields: add, if dropped into available: remove
+      if (destination.droppableId === 'SELECTED FIELDS') {
+        handleAddField({ name: draggableId, type: getFieldTypes(draggableId) });
+      } else if (destination.droppableId === 'AVAILABLE FIELDS') {
+        handleRemoveField({ name: draggableId, type: getFieldTypes(draggableId) });
+      }
+    }
   };
 
   return (
     <I18nProvider>
       <EuiDragDropContext onDragEnd={onDragEnd}>
-        <section className="sidebar-list">
-          <div className="dscSidebar__item">
-            <EuiFieldSearch
-              compressed
-              fullWidth
-              onChange={(e) => {
-                setSearchTerm(e.target.value);
-              }}
-              placeholder="Search field names"
-              value={searchTerm}
-              data-test-subj="eventExplorer__sidebarSearch"
-            />
-          </div>
-          <EuiSpacer size="s" />
-          <div className="sidebar-list">
+        <EuiSplitPanel.Outer
+          className="sidebar-list eui-yScroll"
+          borderRadius="none"
+          color="transparent"
+        >
+          <EuiSplitPanel.Inner grow={false} paddingSize="s">
+            <div className="dscSidebar__item">
+              <EuiFieldSearch
+                compressed
+                fullWidth
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                }}
+                placeholder="Search field names"
+                value={searchTerm}
+                data-test-subj="eventExplorer__sidebarSearch"
+              />
+            </div>
+          </EuiSplitPanel.Inner>
+          <EuiSplitPanel.Inner className="eui-yScroll" paddingSize="none">
             {((explorerData && !isEmpty(explorerData.jsonData) && !isEmpty(explorerFields)) ||
               !isEmpty(explorerFields.availableFields)) && (
               <>
                 {explorerFields?.queriedFields && explorerFields.queriedFields?.length > 0 && (
-                  <EuiAccordion
-                    initialIsOpen
-                    id="fieldSelector__queriedFields"
-                    buttonContent={
-                      <EuiTitle size="xxs">
-                        <span>Query fields</span>
-                      </EuiTitle>
-                    }
-                    paddingSize="xs"
-                  >
-                    <EuiHorizontalRule margin="xs" />
+                  <>
+                    <EuiTitle
+                      size="xxxs"
+                      id="obs_queried_fields"
+                      className="dscSideBarFieldListHeader"
+                    >
+                      <h3>
+                        <FormattedMessage
+                          id="discover.fieldChooser.filter.selectedFieldsTitle"
+                          defaultMessage="Query fields"
+                        />
+                      </h3>
+                    </EuiTitle>
                     <EuiDroppable
                       className="dscSidebarList explorerFieldList--selected"
                       aria-labelledby="queried_fields"
@@ -188,62 +202,71 @@ export const Sidebar = (props: ISidebarProps) => {
                             <EuiDraggable
                               spacing="m"
                               key={`field${field.name}`}
-                              data-attr-field={field.name}
-                              className="dscSidebar__item sidebar_content"
                               index={index}
                               draggableId={`queriedField-${field.name}`}
                             >
-                              <Field
-                                query={query}
-                                field={field}
-                                selectedPattern={selectedPattern}
-                                isOverridingPattern={isOverridingPattern}
-                                handleOverridePattern={handleOverridePattern}
-                                isOverridingTimestamp={isOverridingTimestamp}
-                                selectedTimestamp={selectedTimestamp}
-                                handleOverrideTimestamp={handleOverrideTimestamp}
-                                selected={true}
-                                isFieldToggleButtonDisabled={true}
-                                showTimestampOverrideButton={false}
-                                onToggleField={handleRemoveField}
-                              />
+                              <EuiPanel
+                                data-attr-field={field.name}
+                                paddingSize="s"
+                                className="dscSidebar__item"
+                                data-test-subj={`fieldList-field`}
+                              >
+                                <Field
+                                  query={query}
+                                  field={field}
+                                  selectedPattern={selectedPattern}
+                                  isOverridingPattern={isOverridingPattern}
+                                  handleOverridePattern={handleOverridePattern}
+                                  isOverridingTimestamp={isOverridingTimestamp}
+                                  selectedTimestamp={selectedTimestamp}
+                                  handleOverrideTimestamp={handleOverrideTimestamp}
+                                  selected={true}
+                                  isFieldToggleButtonDisabled={true}
+                                  showTimestampOverrideButton={false}
+                                  onToggleField={handleRemoveField}
+                                />
+                              </EuiPanel>
                             </EuiDraggable>
                           );
                         })}
                     </EuiDroppable>
-                  </EuiAccordion>
+                  </>
                 )}
-                <EuiSpacer size="s" />
-                <EuiAccordion
-                  initialIsOpen
-                  id="fieldSelector__selectedFields"
-                  buttonContent={
-                    <EuiTitle size="xxs">
-                      <span>Selected Fields</span>
-                    </EuiTitle>
-                  }
-                  paddingSize="xs"
+                <EuiTitle
+                  size="xxxs"
+                  id="obs_selected_fields"
+                  className="dscSideBarFieldListHeader"
                 >
-                  <EuiHorizontalRule margin="xs" />
-                  <EuiDroppable
-                    className="dscSidebarList explorerFieldList--selected"
-                    aria-labelledby="selected_fields"
-                    data-test-subj={`fieldList-selected`}
-                    droppableId="selectedFields-drop"
-                    spacing="m"
-                  >
-                    {explorerData &&
-                      !isEmpty(explorerData?.jsonData) &&
-                      storedExplorerFields?.selectedFields &&
-                      storedExplorerFields?.selectedFields.map((field, index) => {
-                        return (
-                          <EuiDraggable
-                            spacing="m"
-                            key={`field${field.name}`}
+                  <h3>
+                    <FormattedMessage
+                      id="discover.fieldChooser.filter.selectedFieldsTitle"
+                      defaultMessage="Selected fields"
+                    />
+                  </h3>
+                </EuiTitle>
+                <EuiDroppable
+                  className="dscSidebarList explorerFieldList--selected"
+                  aria-labelledby="selected_fields"
+                  data-test-subj={`fieldList-selected`}
+                  droppableId="SELECTED FIELDS"
+                  spacing="m"
+                >
+                  {explorerData &&
+                    !isEmpty(explorerData?.jsonData) &&
+                    explorerFields?.selectedFields &&
+                    explorerFields?.selectedFields.map((field, index) => {
+                      return (
+                        <EuiDraggable
+                          spacing="m"
+                          key={`field${field.name}`}
+                          index={index}
+                          draggableId={field.name}
+                        >
+                          <EuiPanel
                             data-attr-field={field.name}
-                            className="dscSidebar__item sidebar_content"
-                            index={index}
-                            draggableId={`selectedField-${field.name}`}
+                            paddingSize="s"
+                            className="dscSidebar__item"
+                            data-test-subj={`fieldList-field`}
                           >
                             <Field
                               query={query}
@@ -259,46 +282,48 @@ export const Sidebar = (props: ISidebarProps) => {
                               showTimestampOverrideButton={true}
                               onToggleField={handleRemoveField}
                             />
-                          </EuiDraggable>
-                        );
-                      })}
-                  </EuiDroppable>
-                </EuiAccordion>
-                <EuiSpacer size="s" />
-                <EuiAccordion
-                  initialIsOpen
-                  id="fieldSelector__availableFields"
-                  buttonContent={
-                    <EuiTitle size="xxs">
-                      <span>Available Fields</span>
-                    </EuiTitle>
-                  }
-                  paddingSize="xs"
+                          </EuiPanel>
+                        </EuiDraggable>
+                      );
+                    })}
+                </EuiDroppable>
+                <EuiTitle
+                  size="xxxs"
+                  id="obs_available_fields"
+                  className="dscSideBarFieldListHeader"
                 >
-                  <EuiHorizontalRule margin="xs" />
-                  <EuiDroppable
-                    className={`explorerFieldList explorerFieldList--unpopular ${
-                      !showFields ? 'hidden-sm hidden-xs' : ''
-                    }`}
-                    aria-labelledby="available_fields"
-                    data-test-subj={`fieldList-unpopular`}
-                    droppableId="unpopularFields-drop"
-                    spacing="m"
-                  >
-                    {storedExplorerFields?.availableFields &&
-                      storedExplorerFields?.availableFields
-                        .filter(
-                          (field) => searchTerm === '' || field.name.indexOf(searchTerm) !== -1
-                        )
-                        .map((field, index) => {
-                          return (
-                            <EuiDraggable
-                              spacing="m"
-                              key={`field${field.name}`}
+                  <h3>
+                    <FormattedMessage
+                      id="discover.fieldChooser.filter.availableFieldsTitle"
+                      defaultMessage="Available fields"
+                    />
+                  </h3>
+                </EuiTitle>
+                <EuiDroppable
+                  className={`explorerFieldList explorerFieldList--unpopular ${
+                    !showFields ? 'hidden-sm hidden-xs' : ''
+                  }`}
+                  aria-labelledby="available_fields"
+                  data-test-subj={`fieldList-unpopular`}
+                  droppableId="AVAILABLE FIELDS"
+                  spacing="m"
+                >
+                  {explorerFields?.availableFields &&
+                    explorerFields?.availableFields
+                      .filter((field) => searchTerm === '' || field.name.indexOf(searchTerm) !== -1)
+                      .map((field, index) => {
+                        return (
+                          <EuiDraggable
+                            spacing="m"
+                            key={`field${field.name}`}
+                            index={index}
+                            draggableId={field.name}
+                          >
+                            <EuiPanel
                               data-attr-field={field.name}
-                              className="dscSidebar__item sidebar_content"
-                              index={index}
-                              draggableId={`availableField-field${field.name}`}
+                              paddingSize="s"
+                              className="dscSidebar__item"
+                              data-test-subj={`fieldList-field`}
                             >
                               <Field
                                 query={query}
@@ -314,15 +339,15 @@ export const Sidebar = (props: ISidebarProps) => {
                                 isFieldToggleButtonDisabled={isFieldToggleButtonDisabled}
                                 showTimestampOverrideButton={true}
                               />
-                            </EuiDraggable>
-                          );
-                        })}
-                  </EuiDroppable>
-                </EuiAccordion>
+                            </EuiPanel>
+                          </EuiDraggable>
+                        );
+                      })}
+                </EuiDroppable>
               </>
             )}
-          </div>
-        </section>
+          </EuiSplitPanel.Inner>
+        </EuiSplitPanel.Outer>
       </EuiDragDropContext>
     </I18nProvider>
   );
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
index b6737a338b..23028f83a2 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
@@ -158,6 +158,7 @@ $vis-editor-sidebar-min-width: 350px;
 
 #vis__mainContent .vis__leftPanel {
   overflow-y: unset; // unset default setting
+  margin-right: 8px;
 }
 
 .panelItem_button {
@@ -168,6 +169,15 @@ $vis-editor-sidebar-min-width: 350px;
   align-items: center;
 }
 
+.panelItem_box {
+  color: #5A6875;
+  display: grid;
+  grid-gap: 4px;
+  padding: 8px 8px 8px 8px;
+  background-color: #D6D9DD;
+  border-radius: 4px;
+}
+
 .field_text {
   text-overflow: ellipsis;
   overflow: hidden;
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
index 4c7f666c54..669a314c8e 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
@@ -12,6 +12,8 @@ import {
   EuiText,
   EuiTitle,
   EuiToolTip,
+  EuiFormRow,
+  EuiFormLabel,
 } from '@elastic/eui';
 import { isArray, isEmpty, lowerCase } from 'lodash';
 import {
@@ -60,7 +62,7 @@ export const DataConfigPanelFields = ({
 
   const { time_field: timeField, unit, interval } = dimensionSpan;
 
-  const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" className="info-icon" />;
+  const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" />;
   const crossIcon = (index: number, configName: string) => (
     <EuiButtonIcon
       color="subdued"
@@ -84,33 +86,18 @@ export const DataConfigPanelFields = ({
   );
 
   return (
-    <div className="panel_section" data-test-subj={`vizConfigSection-${lowerCase(sectionName)}`}>
-      <div style={{ display: 'flex' }}>
-        <EuiTitle size="xxs" className="panel_title">
-          <h3>{sectionName}</h3>
-        </EuiTitle>
-        {infoToolTip(tooltipIcon, DATA_CONFIG_HINTS_INFO[`${sectionName}`])}
-      </div>
-      <EuiSpacer size="s" />
-      {sectionName === GROUPBY && dimensionSpan && !isEmpty(timeField) && (
-        <EuiPanel paddingSize="s" className="panelItem_button" data-test-subj="viz-config-section">
-          <EuiText size="s" className="field_text">
-            <EuiLink
-              role="button"
-              tabIndex={0}
-              onClick={() => handleServiceEdit(list.length - 1, GROUPBY, true)}
-              data-test-subj="viz-config-add-btn"
-            >
-              {`${SPAN}(${timeField[0]?.name}, ${interval} ${unit[0]?.value})`}
-            </EuiLink>
-          </EuiText>
-          {crossIcon(-1, SPAN)}
-        </EuiPanel>
-      )}
-      <EuiSpacer size="s" />
-      {isArray(list) &&
-        list.map((obj: ConfigListEntry, index: number) => (
-          <Fragment key={index}>
+    <EuiFormRow>
+      <>
+        <div style={{ display: 'flex' }}>
+          <EuiFormLabel className="panel_title">{sectionName}</EuiFormLabel>
+          {infoToolTip(tooltipIcon, DATA_CONFIG_HINTS_INFO[`${sectionName}`])}
+        </div>
+        <EuiSpacer size="xs" />
+        <div
+          className={'panelItem_box'}
+          data-test-subj={`vizConfigSection-${lowerCase(sectionName)}`}
+        >
+          {sectionName === GROUPBY && dimensionSpan && !isEmpty(timeField) && (
             <EuiPanel
               paddingSize="s"
               className="panelItem_button"
@@ -120,35 +107,59 @@ export const DataConfigPanelFields = ({
                 <EuiLink
                   role="button"
                   tabIndex={0}
-                  onClick={() => handleServiceEdit(index, sectionName, false)}
+                  onClick={() => handleServiceEdit(list.length - 1, GROUPBY, true)}
                   data-test-subj="viz-config-add-btn"
                 >
-                  {removeBacktick(
-                    obj[CUSTOM_LABEL] || `${isAggregation ? obj.aggregation : ''} ${obj.label}`
-                  )}
+                  {`${SPAN}(${timeField[0]?.name}, ${interval} ${unit[0]?.value})`}
                 </EuiLink>
               </EuiText>
-              {isAggregation
-                ? infoToolTip(crossIcon(index, sectionName), DATA_CONFIG_HINTS_INFO[AGGREGATIONS])
-                : crossIcon(index, sectionName)}
+              {crossIcon(-1, SPAN)}
+            </EuiPanel>
+          )}
+          {isArray(list) &&
+            list.map((obj: ConfigListEntry, index: number) => (
+              <Fragment key={index}>
+                <EuiPanel
+                  paddingSize="s"
+                  className="panelItem_button"
+                  data-test-subj="viz-config-section"
+                >
+                  <EuiText size="s" className="field_text">
+                    <EuiLink
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => handleServiceEdit(index, sectionName, false)}
+                      data-test-subj="viz-config-add-btn"
+                    >
+                      {removeBacktick(
+                        obj[CUSTOM_LABEL] || `${isAggregation ? obj.aggregation : ''} ${obj.label}`
+                      )}
+                    </EuiLink>
+                  </EuiText>
+                  {isAggregation
+                    ? infoToolTip(
+                        crossIcon(index, sectionName),
+                        DATA_CONFIG_HINTS_INFO[AGGREGATIONS]
+                      )
+                    : crossIcon(index, sectionName)}
+                </EuiPanel>
+              </Fragment>
+            ))}
+          {!hideClickToAddButton(sectionName) && (
+            <EuiPanel className="panelItem_button" data-test-subj="viz-config-section" grow>
+              <EuiText size="s">{addButtonText}</EuiText>
+              <EuiButtonIcon
+                iconType="plusInCircle"
+                aria-label="add-field"
+                iconSize="s"
+                color="primary"
+                onClick={() => handleServiceAdd(sectionName)}
+                data-test-subj="viz-config-add-btn"
+              />
             </EuiPanel>
-            <EuiSpacer size="s" />
-          </Fragment>
-        ))}
-      {!hideClickToAddButton(sectionName) && (
-        <EuiPanel className="panelItem_button" data-test-subj="viz-config-section" grow>
-          <EuiText size="s">{addButtonText}</EuiText>
-          <EuiButtonIcon
-            iconType="plusInCircle"
-            aria-label="add-field"
-            iconSize="s"
-            color="primary"
-            onClick={() => handleServiceAdd(sectionName)}
-            data-test-subj="viz-config-add-btn"
-          />
-        </EuiPanel>
-      )}
-      <EuiSpacer size="m" />
-    </div>
+          )}
+        </div>
+      </>
+    </EuiFormRow>
   );
 };
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
index cac373f90a..6ca8a2e848 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
@@ -39,4 +39,50 @@
   &.showSecondary > .wizConfig__section {
     transform: translateX(-100%);
   }
+}
+
+.vbConfig {
+  @include euiYScrollWithShadows;
+
+  background: $euiColorLightestShade;
+  border-left: $euiBorderThin;
+  position: relative;
+  overflow-x: hidden;
+
+  &__section {
+    width: 100%;
+    transition: transform $euiAnimSpeedNormal 0s $euiAnimSlightResistance;
+  }
+
+  &__title {
+    padding: $euiSizeS;
+    padding-bottom: 0;
+
+    &.showDivider {
+      border-bottom: 1px solid $euiColorLightShade;
+    }
+  }
+
+  &__content {
+    padding: $euiSizeS;
+  }
+
+  &__aggEditor {
+    padding: 0 $euiSizeM;
+  }
+
+  &--secondary {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: $euiSizeS;
+
+    .visEditorAggParam--half {
+      margin: $euiSize 0;
+    }
+  }
+
+  &.showSecondary > .vbConfig__section {
+    transform: translateX(-100%);
+  }
 }
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
index e5374811ed..d55fedc850 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -16,6 +16,9 @@ import {
   EuiSpacer,
   EuiTitle,
   htmlIdGenerator,
+  EuiForm,
+  EuiFlexGroup,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { filter, isEmpty, isEqual } from 'lodash';
 import {
@@ -340,7 +343,7 @@ export const DataConfigPanelItem = ({
     const selectedObj = isTimeStampSelected ? configList[SPAN] : configList[name][index];
     const isAggregations = name === AGGREGATIONS;
     return (
-      <>
+      <div className={'vbConfig__section vbConfig--secondary'}>
         <div className="services">
           <div className="first-division">
             <DataConfigItemClickPanel
@@ -390,7 +393,7 @@ export const DataConfigPanelItem = ({
             <EuiSpacer size="s" />
           </div>
         </div>
-      </>
+      </div>
     );
   };
 
@@ -535,49 +538,59 @@ export const DataConfigPanelItem = ({
   return isAddConfigClicked ? (
     getCommonUI(selectedConfigItem.name)
   ) : (
-    <>
-      <EuiTitle size="xxs">
-        <h3>Configuration</h3>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      {visualizations.vis.name !== VIS_CHART_TYPES.Histogram ? (
-        <>
-          {DataConfigPanelFields(getRenderFieldsObj(AGGREGATIONS))}
-          <EuiSpacer size="s" />
-          {DataConfigPanelFields(getRenderFieldsObj(GROUPBY))}
-          <EuiSpacer size="s" />
-          {(visualizations.vis.name === VIS_CHART_TYPES.Bar ||
-            visualizations.vis.name === VIS_CHART_TYPES.HorizontalBar ||
-            visualizations.vis.name === VIS_CHART_TYPES.Line) && (
-            <>{DataConfigPanelFields(getRenderFieldsObj(BREAKDOWNS))}</>
-          )}
-        </>
-      ) : (
-        <>
-          <EuiTitle size="xxs">
-            <h3>Bucket Size</h3>
-          </EuiTitle>
-          {getNumberField('bucketSize')}
+    <EuiForm className={'vbConfig'}>
+      <div className="vbConfig__section">
+        <div className="vbConfig__title">
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiFlexItem>
+              <EuiTitle size="xxs">
+                <h2>Configuration</h2>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+        {visualizations.vis.name !== VIS_CHART_TYPES.Histogram ? (
+          <div className="vbConfig__content">
+            <EuiSpacer size="s" />
+            {DataConfigPanelFields(getRenderFieldsObj(AGGREGATIONS))}
+            <EuiHorizontalRule margin="m" />
+            {DataConfigPanelFields(getRenderFieldsObj(GROUPBY))}
+            <EuiHorizontalRule margin="m" />
+            {(visualizations.vis.name === VIS_CHART_TYPES.Bar ||
+              visualizations.vis.name === VIS_CHART_TYPES.HorizontalBar ||
+              visualizations.vis.name === VIS_CHART_TYPES.Line) && (
+              <>{DataConfigPanelFields(getRenderFieldsObj(BREAKDOWNS))}</>
+            )}
+            <EuiSpacer size="s" />
+          </div>
+        ) : (
+          <>
+            <EuiTitle size="xxs">
+              <h3>Bucket Size</h3>
+            </EuiTitle>
+            {getNumberField('bucketSize')}
 
-          <EuiSpacer size="s" />
-          <EuiTitle size="xxs">
-            <h3>Bucket Offset</h3>
-          </EuiTitle>
-          {getNumberField('bucketOffset')}
-        </>
-      )}
-      <EuiSpacer size="m" />
-      <EuiFlexItem grow={false}>
-        <EuiButton
-          data-test-subj="visualizeEditorRenderButton"
-          iconType="play"
-          onClick={() => updateChart()}
-          size="s"
-          isDisabled={isEmpty(configList[AGGREGATIONS])}
-        >
-          Update chart
-        </EuiButton>
-      </EuiFlexItem>
-    </>
+            <EuiSpacer size="s" />
+            <EuiTitle size="xxs">
+              <h3>Bucket Offset</h3>
+            </EuiTitle>
+            {getNumberField('bucketOffset')}
+          </>
+        )}
+        <div className="vbConfig__content">
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="visualizeEditorRenderButton"
+              iconType="play"
+              onClick={() => updateChart()}
+              size="s"
+              isDisabled={isEmpty(configList[AGGREGATIONS])}
+            >
+              Update chart
+            </EuiButton>
+          </EuiFlexItem>
+        </div>
+      </div>
+    </EuiForm>
   );
 };
diff --git a/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx b/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
index 8e5f10f315..6fa6778819 100644
--- a/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
+++ b/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
@@ -4,6 +4,7 @@
  */
 
 import React from 'react';
+import { EuiPanel } from '@elastic/eui';
 import { BarOrientation, LONG_CHART_COLOR } from '../../../../../../common/constants/shared';
 import { Plt } from '../../../../visualizations/plotly/plot';
 import { fillTimeDataWithEmpty } from '../../../utils/utils';
diff --git a/public/components/event_analytics/explorer/visualizations/direct_query_vis.tsx b/public/components/event_analytics/explorer/visualizations/direct_query_vis.tsx
index 73d55f0a56..a1268c62dc 100644
--- a/public/components/event_analytics/explorer/visualizations/direct_query_vis.tsx
+++ b/public/components/event_analytics/explorer/visualizations/direct_query_vis.tsx
@@ -3,8 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiTitle } from '@elastic/eui';
+import {
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPage,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
 import React from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
 import { queryWorkbenchPluginID } from '../../../../../common/constants/shared';
 import { coreRefs } from '../../../../framework/core_refs';
 
@@ -14,31 +23,53 @@ interface DirectQueryVisualizationProps {
 
 export const DirectQueryVisualization = ({ currentDataSource }: DirectQueryVisualizationProps) => {
   return (
-    <EuiFlexGroup direction="column">
-      <EuiFlexItem grow={false}>
-        <EuiCallOut title="Data source can't be visualized." color="danger" iconType="alert">
-          <p>
-            <EuiLink
-              onClick={() =>
-                coreRefs?.application!.navigateToApp(queryWorkbenchPluginID, {
-                  path: `#/${currentDataSource}`,
-                })
+    <I18nProvider>
+      <EuiPage paddingSize="s">
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem grow={false}>
+            <EuiCallOut
+              title={
+                <FormattedMessage
+                  id="observability.directQueryVisualization.cannotVisualizeTitle"
+                  defaultMessage="Data source can't be visualized"
+                />
               }
+              color="danger"
+              iconType="alert"
             >
-              Index data to visualize
-            </EuiLink>
-          </p>
-        </EuiCallOut>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiTitle size="s">
-          <h1>Index data to visualize or select indexed data.</h1>
-        </EuiTitle>
-        <p>
-          For external data only materialized views or covering indexes can be visualized. Ask your
-          administrator to create these indexes to visualize them.
-        </p>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+              <p>
+                <EuiLink
+                  onClick={() =>
+                    coreRefs?.application!.navigateToApp(queryWorkbenchPluginID, {
+                      path: `#/${currentDataSource}`,
+                    })
+                  }
+                >
+                  <FormattedMessage
+                    id="observability.directQueryVisualization.IndexDataBeforeVisualizeLink"
+                    defaultMessage="Index data to visualize"
+                  />
+                </EuiLink>
+              </p>
+            </EuiCallOut>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              <h2>
+                <FormattedMessage
+                  id="observability.directQueryVisualization.IndexDataBeforeVisualizeTitle"
+                  defaultMessage="Index data to visualize or select indexed data"
+                />
+              </h2>
+              <FormattedMessage
+                id="observability.directQueryVisualization.IndexDataBeforeVisualizeText"
+                defaultMessage="For external data only materialized views or covering indexes can be visualized. Ask
+                    your administrator to create these indexes to visualize them."
+              />
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPage>
+    </I18nProvider>
   );
 };
diff --git a/public/components/event_analytics/explorer/visualizations/index.tsx b/public/components/event_analytics/explorer/visualizations/index.tsx
index f97db37f3f..0b3a6bea5b 100644
--- a/public/components/event_analytics/explorer/visualizations/index.tsx
+++ b/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -93,16 +93,7 @@ export const ExplorerVisualizations = ({
               paddingSize="none"
               className="vis__leftPanel"
             >
-              <div className="explorerFieldSelector">
-                {!isMarkDown && (
-                  <div
-                    className="explorer__vizDataConfig"
-                    data-test-subj="explorer__vizDataConfig-panel"
-                  >
-                    {renderDataConfigContainer()}
-                  </div>
-                )}
-              </div>
+              {!isMarkDown && <>{renderDataConfigContainer()}</>}
             </EuiResizablePanel>
             <EuiResizableButton />
             <EuiResizablePanel
diff --git a/public/components/event_analytics/redux/slices/query_slice.ts b/public/components/event_analytics/redux/slices/query_slice.ts
index b6e3b5f611..38a9e41f81 100644
--- a/public/components/event_analytics/redux/slices/query_slice.ts
+++ b/public/components/event_analytics/redux/slices/query_slice.ts
@@ -80,7 +80,7 @@ export const queriesSlice = createSlice({
   extraReducers: (builder) => {},
 });
 
-export const { changeQuery, changeDateRange, remove, init } = queriesSlice.actions;
+export const { changeQuery, changeDateRange, remove, init, reset } = queriesSlice.actions;
 
 export const selectQueries = createSelector(
   (state) => state.queries,
diff --git a/public/components/event_analytics/redux/slices/search_meta_data_slice.ts b/public/components/event_analytics/redux/slices/search_meta_data_slice.ts
index eee7083fab..524e13bd8c 100644
--- a/public/components/event_analytics/redux/slices/search_meta_data_slice.ts
+++ b/public/components/event_analytics/redux/slices/search_meta_data_slice.ts
@@ -3,36 +3,61 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { createSlice, createSelector } from '@reduxjs/toolkit';
+import { createSlice, createSelector, PayloadAction } from '@reduxjs/toolkit';
 import { initialTabId } from '../../../../framework/redux/store/shared_state';
 import { REDUX_EXPL_SLICE_SEARCH_META_DATA } from '../../../../../common/constants/explorer';
+import { DirectQueryLoadingStatus, SelectedDataSource } from '../../../../../common/types/explorer';
+
+const searchMetaInitialState = {
+  lang: 'PPL',
+  datasources: [],
+  isPolling: false,
+};
 
 const initialState = {
   [initialTabId]: {
-    lang: 'PPL',
-    datasources: [],
-    isPolling: false,
-  },
+    ...searchMetaInitialState,
+  } as SearchMetaData,
 };
 
+interface SearchMetaData {
+  lang: string;
+  datasources: SelectedDataSource[];
+  isPolling: boolean;
+  status: DirectQueryLoadingStatus;
+}
+
+interface SearchMetaDataState {
+  [key: string]: SearchMetaData;
+}
+
+interface UpdatePayload {
+  tabId: string;
+  data: Partial<SearchMetaData>;
+}
+
 export const searchMetaDataSlice = createSlice({
   name: REDUX_EXPL_SLICE_SEARCH_META_DATA,
   initialState,
   reducers: {
-    update: (state, { payload }) => {
-      state[payload.tabId] = {
-        ...state[payload.tabId],
-        ...payload.data,
+    update: (state, action: PayloadAction<UpdatePayload>) => {
+      const { tabId, data } = action.payload;
+      state[tabId] = {
+        ...state[tabId],
+        ...data,
       };
     },
-    reset: (state, { payload }) => {
-      state[payload.tabId] = {};
+    reset: (state, action: PayloadAction<{ tabId: string }>) => {
+      const { tabId } = action.payload;
+      state[tabId] = { ...searchMetaInitialState };
     },
-    init: (state, { payload }) => {
-      state[payload.tabId] = {};
+    init: (state, action: PayloadAction<{ tabId: string }>) => {
+      const { tabId } = action.payload;
+      state[tabId] = { ...searchMetaInitialState };
     },
-    remove: (state, { payload }) => {
-      delete state[payload.tabId];
+    remove: (state, action: PayloadAction<{ tabId: string }>) => {
+      const { tabId } = action.payload;
+      delete state[tabId];
     },
   },
 });
@@ -45,3 +70,5 @@ export const selectSearchMetaData = createSelector(
 );
 
 export const searchMetaDataSliceReducer = searchMetaDataSlice.reducer;
+
+export type { SearchMetaData, SearchMetaDataState, UpdatePayload };
diff --git a/public/components/event_analytics/utils/__tests__/utils.test.tsx b/public/components/event_analytics/utils/__tests__/utils.test.tsx
index f6b5138d2f..85a216b481 100644
--- a/public/components/event_analytics/utils/__tests__/utils.test.tsx
+++ b/public/components/event_analytics/utils/__tests__/utils.test.tsx
@@ -118,7 +118,9 @@ describe('Utils event analytics helper functions', () => {
   });
 
   it('validates redoQuery function', () => {
-    const getEvents = jest.fn();
+    const fetchEvents = jest.fn();
+    const setData = jest.fn();
+
     redoQuery(
       '2023-01-01 00:00:00',
       '2023-09-28 23:19:10',
@@ -135,10 +137,14 @@ describe('Utils event analytics helper functions', () => {
       {
         current: [0, 100],
       },
-      getEvents
+      fetchEvents,
+      setData
     );
-    const expectedFinalQuery =
-      "source=opensearch_dashboards_sample_data_logs | where timestamp >= '2023-01-01 00:00:00' and timestamp <= '2023-09-28 23:19:10' | where match(request,'filebeat') | sort + timestamp | head 100 from 0";
-    expect(getEvents).toBeCalledWith(expectedFinalQuery);
+    const expectedFinalQuery = {
+      query:
+        "source=opensearch_dashboards_sample_data_logs | where timestamp >= '2023-01-01 00:00:00' and timestamp <= '2023-09-28 23:19:10' | where match(request,'filebeat') | sort + timestamp | head 100 from 0",
+    };
+    // final query is the only thing being tested here
+    expect(fetchEvents).toBeCalledWith(expectedFinalQuery, 'jdbc', expect.anything());
   });
 });
diff --git a/public/components/event_analytics/utils/utils.tsx b/public/components/event_analytics/utils/utils.tsx
index d680860e19..996a656b6b 100644
--- a/public/components/event_analytics/utils/utils.tsx
+++ b/public/components/event_analytics/utils/utils.tsx
@@ -413,7 +413,8 @@ export const redoQuery = (
   timeStampField: string,
   sortingFields: MutableRefObject<EuiDataGridSorting['columns']>,
   pageFields: MutableRefObject<number[]>,
-  getEvents: any
+  fetchEvents: any,
+  setData: React.Dispatch<React.SetStateAction<any[]>>
 ) => {
   let finalQuery = '';
 
@@ -436,5 +437,8 @@ export const redoQuery = (
   finalQuery =
     finalQuery +
     ` | head ${pageFields.current[1]} from ${pageFields.current[0] * pageFields.current[1]}`;
-  getEvents(finalQuery);
+
+  fetchEvents({ query: finalQuery }, 'jdbc', (res: any) => {
+    setData(res.jsonData);
+  });
 };
diff --git a/public/components/hooks/index.ts b/public/components/hooks/index.ts
index d3c599c18d..3296182d47 100644
--- a/public/components/hooks/index.ts
+++ b/public/components/hooks/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { usePolling } from './use_polling';
+export { usePolling, PollingConfigurations } from './use_polling';
diff --git a/public/components/hooks/use_direct_query_search.ts b/public/components/hooks/use_direct_query_search.ts
deleted file mode 100644
index a850c1690e..0000000000
--- a/public/components/hooks/use_direct_query_search.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
diff --git a/public/components/hooks/use_polling.ts b/public/components/hooks/use_polling.ts
index 42fe5b9d35..c1f79ada11 100644
--- a/public/components/hooks/use_polling.ts
+++ b/public/components/hooks/use_polling.ts
@@ -7,6 +7,65 @@ import { useState, useRef } from 'react';
 
 type FetchFunction<T, P = void> = (params?: P) => Promise<T>;
 
+export interface PollingConfigurations {
+  tabId: string;
+}
+
+export class UsePolling<T, P = void> {
+  public data: T | null = null;
+  public error: Error | null = null;
+  public loading: boolean = true;
+  private shouldPoll: boolean = false;
+  private intervalRef?: NodeJS.Timeout;
+
+  constructor(
+    private fetchFunction: FetchFunction<T, P>,
+    private interval: number = 5000,
+    private onPollingSuccess?: (data: T, configurations: PollingConfigurations) => boolean,
+    private onPollingError?: (error: Error) => boolean,
+    private configurations?: PollingConfigurations
+  ) {}
+
+  async fetchData(params?: P) {
+    this.loading = true;
+    try {
+      const result = await this.fetchFunction(params);
+      this.data = result;
+      this.loading = false;
+
+      if (this.onPollingSuccess && this.onPollingSuccess(result, this.configurations!)) {
+        this.stopPolling();
+      }
+    } catch (err) {
+      this.error = err as Error;
+      this.loading = false;
+
+      if (this.onPollingError && this.onPollingError(this.error)) {
+        this.stopPolling();
+      }
+    }
+  }
+
+  startPolling(params?: P) {
+    this.shouldPoll = true;
+    if (!this.intervalRef) {
+      this.intervalRef = setInterval(() => {
+        if (this.shouldPoll) {
+          this.fetchData(params);
+        }
+      }, this.interval);
+    }
+  }
+
+  stopPolling() {
+    this.shouldPoll = false;
+    if (this.intervalRef) {
+      clearInterval(this.intervalRef);
+      this.intervalRef = undefined;
+    }
+  }
+}
+
 interface UsePollingReturn<T> {
   data: T | null;
   loading: boolean;
@@ -17,7 +76,10 @@ interface UsePollingReturn<T> {
 
 export function usePolling<T, P = void>(
   fetchFunction: FetchFunction<T, P>,
-  interval: number = 5000
+  interval: number = 5000,
+  onPollingSuccess?: (data: T, configurations: PollingConfigurations) => boolean,
+  onPollingError?: (error: Error) => boolean,
+  configurations?: PollingConfigurations
 ): UsePollingReturn<T> {
   const [data, setData] = useState<T | null>(null);
   const [error, setError] = useState<Error | null>(null);
@@ -45,8 +107,18 @@ export function usePolling<T, P = void>(
     try {
       const result = await fetchFunction(params);
       setData(result);
-    } catch (err) {
-      setError(err);
+
+      // Check the success condition and stop polling if it's met
+      if (onPollingSuccess && onPollingSuccess(result, configurations)) {
+        stopPolling();
+      }
+    } catch (err: unknown) {
+      setError(err as Error);
+
+      // Check the error condition and stop polling if it's met
+      if (onPollingError && onPollingError(err as Error)) {
+        stopPolling();
+      }
     } finally {
       setLoading(false);
     }
diff --git a/public/components/metrics/index.scss b/public/components/metrics/index.scss
index 9f2d601982..abfeba3747 100644
--- a/public/components/metrics/index.scss
+++ b/public/components/metrics/index.scss
@@ -15,6 +15,6 @@
 }
 
 .mainContentTabs .euiResizableContainer {
-  height: calc(100vh - 298px);
+  height: calc(100vh - 194px);
 }
   
\ No newline at end of file
diff --git a/public/components/visualizations/visualization.tsx b/public/components/visualizations/visualization.tsx
index 6de22585ef..313f43cf7b 100644
--- a/public/components/visualizations/visualization.tsx
+++ b/public/components/visualizations/visualization.tsx
@@ -29,7 +29,7 @@ export const Visualization = ({
     // Markdown, it does not depend on if there is data
     if (vis.id === VIS_CHART_TYPES.Text) return [true, ''];
 
-    if (isEmpty(series)) return [false, VISUALIZATION_ERROR.INVALID_DATA]; // series is required to any visualization type
+    if (isEmpty(series)) return [false, VISUALIZATION_ERROR.NO_SERIES]; // series is required to any visualization type
 
     // bars, pie
     if (dimensions.length < 1 && isEmpty(span)) return [false, VISUALIZATION_ERROR.INVALID_DATA];
diff --git a/public/framework/datasources/obs_opensearch_datasource.ts b/public/framework/datasources/obs_opensearch_datasource.ts
new file mode 100644
index 0000000000..07a30dd02f
--- /dev/null
+++ b/public/framework/datasources/obs_opensearch_datasource.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DataSource } from '../../../../../src/plugins/data/public';
+
+interface DataSourceConfig {
+  name: string;
+  type: string;
+  metadata: any;
+}
+
+export class ObservabilityDefaultDataSource extends DataSource<any, any, any, any, any> {
+  constructor({ name, type, metadata }: DataSourceConfig) {
+    super(name, type, metadata);
+  }
+
+  async getDataSet(dataSetParams?: any) {
+    return ['Default data source'];
+  }
+
+  async testConnection(): Promise<boolean> {
+    return true;
+  }
+
+  async runQuery(queryParams: any) {
+    return null;
+  }
+}
diff --git a/public/services/saved_objects/saved_object_client/client_factory.ts b/public/services/saved_objects/saved_object_client/client_factory.ts
index 4af366a83e..7f9fb965a9 100644
--- a/public/services/saved_objects/saved_object_client/client_factory.ts
+++ b/public/services/saved_objects/saved_object_client/client_factory.ts
@@ -3,10 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { VISUALIZATION_SAVED_OBJECT } from '../../../../common/types/observability_saved_object_attributes';
+import {
+  SEARCH_SAVED_OBJECT,
+  VISUALIZATION_SAVED_OBJECT,
+} from '../../../../common/types/observability_saved_object_attributes';
 import { ISavedObjectsClient } from './client_interface';
 import { OSDSavedObjectClient } from './osd_saved_objects/osd_saved_object_client';
 import { OSDSavedVisualizationClient } from './osd_saved_objects/saved_visualization';
+import { OSDSavedSearchClient } from './osd_saved_objects/saved_searches';
 import { PPLSavedQueryClient, PPLSavedVisualizationClient } from './ppl';
 
 interface GetSavedObjectsClientOptions {
@@ -22,6 +26,8 @@ export const getSavedObjectsClient = (
   switch (type) {
     case VISUALIZATION_SAVED_OBJECT:
       return OSDSavedVisualizationClient.getInstance();
+    case SEARCH_SAVED_OBJECT:
+      return OSDSavedSearchClient.getInstance();
 
     default:
       break;
diff --git a/public/services/saved_objects/saved_object_client/osd_saved_objects/osd_saved_object_client.ts b/public/services/saved_objects/saved_object_client/osd_saved_objects/osd_saved_object_client.ts
index f0d0baa047..ac3204b7ad 100644
--- a/public/services/saved_objects/saved_object_client/osd_saved_objects/osd_saved_object_client.ts
+++ b/public/services/saved_objects/saved_object_client/osd_saved_objects/osd_saved_object_client.ts
@@ -66,6 +66,8 @@ export abstract class OSDSavedObjectClient extends SavedObjectClientBase {
     fields,
     dateRange,
     timestamp,
+    dataSources,
+    queryLang,
     name = '',
     chartType = '',
     description = '',
@@ -94,6 +96,8 @@ export abstract class OSDSavedObjectClient extends SavedObjectClientBase {
         },
         name: name || '',
         description: description || '',
+        data_sources: dataSources,
+        query_lang: queryLang,
       },
     };
 
diff --git a/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_searches.ts b/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_searches.ts
new file mode 100644
index 0000000000..45b5e3de4f
--- /dev/null
+++ b/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_searches.ts
@@ -0,0 +1,179 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SavedObjectsFindOptions } from '../../../../../../../src/core/public';
+import { IField } from '../../../../../common/types/explorer';
+import {
+  SAVED_OBJECT_VERSION,
+  SearchSavedObjectAttributes,
+  SEARCH_SAVED_OBJECT,
+} from '../../../../../common/types/observability_saved_object_attributes';
+import { getOSDSavedObjectsClient } from '../../../../../common/utils';
+import {
+  SavedObjectsDeleteBulkParams,
+  SavedObjectsDeleteParams,
+  SavedObjectsDeleteResponse,
+  SavedObjectsGetParams,
+  SavedObjectsGetResponse,
+} from '../types';
+import { OSDSavedObjectClient } from './osd_saved_object_client';
+import { OSDSavedObjectCreateResponse, OSDSavedObjectUpdateResponse } from './types';
+
+interface CommonParams {
+  query: string;
+  fields: IField[];
+  dateRange: [string, string];
+  type: string;
+  name: string;
+  timestamp: string;
+  applicationId: string;
+  userConfigs: any;
+  description: string;
+  subType: string;
+  unitsOfMeasure: string;
+  selectedLabels: string;
+  dataSources: string; // list of type SelectedDataSources that is stringified
+  queryLang: string;
+}
+
+type CreateParams = CommonParams & { applicationId: string };
+type UpdateParams = Partial<CommonParams> & { objectId: string };
+
+export class OSDSavedSearchClient extends OSDSavedObjectClient {
+  private static instance: OSDSavedSearchClient;
+
+  protected prependTypeToId(objectId: string) {
+    return `${SEARCH_SAVED_OBJECT}:${objectId}`;
+  }
+
+  async create(
+    params: CreateParams
+  ): Promise<OSDSavedObjectCreateResponse<SearchSavedObjectAttributes>> {
+    const body = this.buildRequestBody({
+      query: params.query,
+      fields: params.fields,
+      dateRange: params.dateRange,
+      name: params.name,
+      timestamp: params.timestamp,
+      description: params.description,
+      dataSources: params.dataSources,
+      queryLang: params.queryLang,
+    });
+
+    const response = await this.client.create<SearchSavedObjectAttributes>(SEARCH_SAVED_OBJECT, {
+      title: params.name,
+      description: params.description,
+      version: SAVED_OBJECT_VERSION,
+      createdTimeMs: new Date().getTime(),
+      savedQuery: {
+        ...body.object,
+      },
+    });
+
+    return {
+      objectId: this.prependTypeToId(response.id),
+      object: response,
+    };
+  }
+
+  async update(
+    params: UpdateParams
+  ): Promise<OSDSavedObjectUpdateResponse<SearchSavedObjectAttributes>> {
+    const body = this.buildRequestBody({
+      query: params.query,
+      fields: params.fields,
+      dateRange: params.dateRange,
+      name: params.name,
+      timestamp: params.timestamp,
+      description: params.description,
+      dataSources: params.dataSources,
+      queryLang: params.queryLang,
+    });
+
+    const response = await this.client.update<Partial<SearchSavedObjectAttributes>>(
+      SEARCH_SAVED_OBJECT,
+      OSDSavedObjectClient.extractTypeAndUUID(params.objectId).uuid,
+      {
+        title: params.name,
+        description: params.description,
+        version: SAVED_OBJECT_VERSION,
+        savedQuery: body.object,
+      }
+    );
+
+    return {
+      objectId: this.prependTypeToId(response.id),
+      object: response,
+    };
+  }
+
+  updateBulk(params: unknown): Promise<Array<Promise<unknown>>> {
+    throw new Error('Method not implemented.');
+  }
+
+  async get(params: SavedObjectsGetParams): Promise<SavedObjectsGetResponse> {
+    const response = await this.client.get<SearchSavedObjectAttributes>(
+      SEARCH_SAVED_OBJECT,
+      OSDSavedObjectClient.extractTypeAndUUID(params.objectId).uuid
+    );
+    return {
+      observabilityObjectList: [
+        {
+          objectId: this.prependTypeToId(response.id),
+          createdTimeMs: response.attributes.createdTimeMs,
+          lastUpdatedTimeMs: OSDSavedObjectClient.convertToLastUpdatedMs(response.updated_at),
+          savedQuery: response.attributes.savedQuery,
+        },
+      ],
+    };
+  }
+
+  async getBulk(params: Partial<SavedObjectsFindOptions> = {}): Promise<SavedObjectsGetResponse> {
+    const observabilityObjectList = await this.client
+      .find<SearchSavedObjectAttributes>({
+        ...params,
+        type: SEARCH_SAVED_OBJECT,
+      })
+      .then((findRes) =>
+        findRes.savedObjects.map((o) => ({
+          objectId: this.prependTypeToId(o.id),
+          createdTimeMs: o.attributes.createdTimeMs,
+          lastUpdatedTimeMs: OSDSavedObjectClient.convertToLastUpdatedMs(o.updated_at),
+          savedQuery: o.attributes.savedQuery,
+        }))
+      );
+    return { totalHits: observabilityObjectList.length, observabilityObjectList };
+  }
+
+  async delete(params: SavedObjectsDeleteParams): Promise<SavedObjectsDeleteResponse> {
+    const uuid = OSDSavedObjectClient.extractTypeAndUUID(params.objectId).uuid;
+    return this.client
+      .delete(SEARCH_SAVED_OBJECT, uuid)
+      .then(() => ({ deleteResponseList: { [params.objectId]: 'OK' } }))
+      .catch((res) => ({ deleteResponseList: { [params.objectId]: res } }));
+  }
+
+  async deleteBulk(params: SavedObjectsDeleteBulkParams): Promise<SavedObjectsDeleteResponse> {
+    const deleteResponseList: SavedObjectsDeleteResponse['deleteResponseList'] = {};
+    await Promise.allSettled(params.objectIdList.map((objectId) => this.delete({ objectId }))).then(
+      (res) => {
+        res.forEach((r, i) => {
+          deleteResponseList[params.objectIdList[i]] =
+            r.status === 'fulfilled'
+              ? r.value.deleteResponseList[params.objectIdList[i]]
+              : r.reason;
+        });
+      }
+    );
+    return { deleteResponseList };
+  }
+
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new this(getOSDSavedObjectsClient());
+    }
+    return this.instance;
+  }
+}
diff --git a/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization.ts b/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization.ts
index 635199c546..f0adf13f82 100644
--- a/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization.ts
+++ b/public/services/saved_objects/saved_object_client/osd_saved_objects/saved_visualization.ts
@@ -34,6 +34,8 @@ interface CommonParams {
   subType: string;
   unitsOfMeasure: string;
   selectedLabels: string;
+  dataSources: string; // list of type SelectedDataSources that is stringified
+  queryLang: string;
 }
 
 type CreateParams = CommonParams & { applicationId: string };
@@ -62,6 +64,8 @@ export class OSDSavedVisualizationClient extends OSDSavedObjectClient {
       subType: params.subType,
       unitsOfMeasure: params.unitsOfMeasure,
       selectedLabels: params.selectedLabels,
+      dataSources: params.dataSources,
+      queryLang: params.queryLang,
     });
 
     const response = await this.client.create<VisualizationSavedObjectAttributes>(
@@ -99,6 +103,8 @@ export class OSDSavedVisualizationClient extends OSDSavedObjectClient {
       subType: params.subType,
       unitsOfMeasure: params.unitsOfMeasure,
       selectedLabels: params.selectedLabels,
+      dataSources: params.dataSources,
+      queryLang: params.queryLang,
     });
 
     const response = await this.client.update<Partial<VisualizationSavedObjectAttributes>>(
diff --git a/public/services/saved_objects/saved_object_client/saved_objects_actions.ts b/public/services/saved_objects/saved_object_client/saved_objects_actions.ts
index 5d8ae29d39..3a1fc5a664 100644
--- a/public/services/saved_objects/saved_object_client/saved_objects_actions.ts
+++ b/public/services/saved_objects/saved_object_client/saved_objects_actions.ts
@@ -3,10 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { VISUALIZATION_SAVED_OBJECT } from '../../../../common/types/observability_saved_object_attributes';
+import {
+  SEARCH_SAVED_OBJECT,
+  VISUALIZATION_SAVED_OBJECT,
+} from '../../../../common/types/observability_saved_object_attributes';
 import { ISavedObjectRequestParams } from '../event_analytics/saved_objects';
 import { OSDSavedObjectClient } from './osd_saved_objects/osd_saved_object_client';
 import { OSDSavedVisualizationClient } from './osd_saved_objects/saved_visualization';
+import { OSDSavedSearchClient } from './osd_saved_objects/saved_searches';
 import { ObservabilitySavedObjectsType } from './osd_saved_objects/types';
 import { PPLSavedQueryClient } from './ppl';
 import {
@@ -29,6 +33,8 @@ export class SavedObjectsActions {
     switch (type) {
       case VISUALIZATION_SAVED_OBJECT:
         return OSDSavedVisualizationClient.getInstance().get(params);
+      case SEARCH_SAVED_OBJECT:
+        return OSDSavedSearchClient.getInstance().get(params);
 
       default:
         // for non-osd objects it does not matter which client implementation
@@ -52,6 +58,17 @@ export class SavedObjectsActions {
       ];
     }
 
+    if (params.objectType?.includes('savedQuery')) {
+      const osdSearchObjects = await OSDSavedSearchClient.getInstance().getBulk();
+      if (objects.totalHits && osdSearchObjects.totalHits) {
+        objects.totalHits += osdSearchObjects.totalHits;
+      }
+      objects.observabilityObjectList = [
+        ...objects.observabilityObjectList,
+        ...osdSearchObjects.observabilityObjectList,
+      ];
+    }
+
     if (params.sortOrder === 'asc') {
       objects.observabilityObjectList.sort((a, b) => a.lastUpdatedTimeMs - b.lastUpdatedTimeMs);
     } else {
@@ -65,6 +82,8 @@ export class SavedObjectsActions {
     switch (type) {
       case VISUALIZATION_SAVED_OBJECT:
         return OSDSavedVisualizationClient.getInstance().delete(params);
+      case SEARCH_SAVED_OBJECT:
+        return OSDSavedSearchClient.getInstance().delete(params);
 
       default:
         return PPLSavedQueryClient.getInstance().delete(params);
@@ -101,6 +120,16 @@ export class SavedObjectsActions {
       };
     }
 
+    if (idMap[SEARCH_SAVED_OBJECT]?.length) {
+      const searchDeleteResponses = await OSDSavedSearchClient.getInstance().deleteBulk({
+        objectIdList: idMap[SEARCH_SAVED_OBJECT],
+      });
+      responses.deleteResponseList = {
+        ...responses.deleteResponseList,
+        ...searchDeleteResponses.deleteResponseList,
+      };
+    }
+
     const remainingObjectIds = [
       ...new Set(
         idMap.non_osd?.concat(
diff --git a/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts b/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts
new file mode 100644
index 0000000000..6e207f7ab4
--- /dev/null
+++ b/public/services/saved_objects/saved_object_loaders/explorer_saved_object_loader.ts
@@ -0,0 +1,387 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty } from 'lodash';
+import { i18n } from '@osd/i18n';
+import { batch as Batch } from 'react-redux';
+import { updateFields as updateFieldsAction } from '../../../components/event_analytics/redux/slices/field_slice';
+import { changeQuery as changeQueryAction } from '../../../components/event_analytics/redux/slices/query_slice';
+import { updateTabName as updateTabNameAction } from '../../../components/event_analytics/redux/slices/query_tab_slice';
+import { change as updateVizConfigAction } from '../../../components/event_analytics/redux/slices/viualization_config_slice';
+import { update as updateSearchMetaData } from '../../../components/event_analytics/redux/slices/search_meta_data_slice';
+import { NotificationsStart } from '../../../../../../src/core/public';
+import {
+  AGGREGATIONS,
+  BREAKDOWNS,
+  GROUPBY,
+  RAW_QUERY,
+  SAVED_OBJECT_ID,
+  SAVED_OBJECT_TYPE,
+  SAVED_QUERY,
+  SAVED_VISUALIZATION,
+  SELECTED_DATE_RANGE,
+  SELECTED_FIELDS,
+  SELECTED_TIMESTAMP,
+  TYPE_TAB_MAPPING,
+} from '../../../../common/constants/explorer';
+import { QueryManager } from '../../../../common/query_manager';
+import { statsChunk } from '../../../../common/query_manager/ast/types/stats';
+import {
+  IField,
+  SavedQuery,
+  SavedVisualization,
+  SelectedDataSource,
+} from '../../../../common/types/explorer';
+import { AppDispatch } from '../../../framework/redux/store';
+import { ISavedObjectsClient } from '../saved_object_client/client_interface';
+import { ObservabilitySavedObject, ObservabilitySavedQuery } from '../saved_object_client/types';
+import { SavedObjectLoaderBase } from './loader_base';
+import { ISavedObjectLoader } from './loader_interface';
+import { PollingConfigurations } from '../../../components/hooks';
+import { SQLService } from '../../requests/sql';
+import { coreRefs } from '../../../framework/core_refs';
+import { UsePolling } from '../../../components/hooks/use_polling';
+
+enum DIRECT_DATA_SOURCE_TYPES {
+  DEFAULT_INDEX_PATTERNS = 'DEFAULT_INDEX_PATTERNS',
+  SPARK = 'spark',
+  S3GLUE = 's3glue',
+}
+
+interface LoadParams {
+  objectId: string;
+}
+
+interface LoadContext {
+  tabId: string;
+  appLogEvents: boolean;
+  setStartTime: (startTime: string) => void;
+  setEndTime: (endTime: string) => void;
+  queryManager: QueryManager;
+  getDefaultVisConfig: (
+    statsToken: statsChunk
+  ) => {
+    [AGGREGATIONS]: IField[];
+    [GROUPBY]: IField[];
+    [BREAKDOWNS]?: IField[];
+    span?: any;
+  };
+  setSelectedPanelName: (savedObjectName: string) => void;
+  setCurVisId: (visId: string) => void;
+  setTempQuery: (tmpQuery: string) => void;
+  setMetricChecked: (metricChecked: boolean) => void;
+  setMetricMeasure: (metricMeasure: string) => void;
+  setSubType: (type: string) => void;
+  setSelectedContentTab: (curTab: string) => void;
+  fetchData: () => void;
+  dispatchOnGettingHis: (res: unknown, query: string) => void;
+}
+
+interface Dispatchers {
+  batch: typeof Batch;
+  dispatch: AppDispatch;
+  changeQuery: typeof changeQueryAction;
+  updateFields: typeof updateFieldsAction;
+  updateTabName: typeof updateTabNameAction;
+  updateVizConfig: typeof updateVizConfigAction;
+}
+
+type SavedObjectData = ObservabilitySavedObject;
+
+function isObjectSavedQuery(
+  savedObjectData: SavedObjectData
+): savedObjectData is ObservabilitySavedQuery {
+  return SAVED_QUERY in savedObjectData;
+}
+
+function isInnerObjectSavedVisualization(
+  objectData: SavedQuery | SavedVisualization
+): objectData is SavedVisualization {
+  return 'type' in objectData;
+}
+
+const parseStringDataSource = (
+  dsInSavedObject: string,
+  notifications: NotificationsStart
+): SelectedDataSource[] => {
+  let selectedDataSources: SelectedDataSource[];
+  try {
+    selectedDataSources = JSON.parse(dsInSavedObject);
+  } catch (err: unknown) {
+    console.error(err);
+    notifications.toasts.addError(err as Error, {
+      title: i18n.translate('observability.notification.error.savedDataSourceParsingError', {
+        defaultMessage: 'Cannot parse datasources from saved object',
+      }),
+    });
+    return [] as SelectedDataSource[];
+  }
+  return selectedDataSources;
+};
+
+export class ExplorerSavedObjectLoader extends SavedObjectLoaderBase implements ISavedObjectLoader {
+  private pollingInstance: UsePolling<any, any> | undefined;
+  constructor(
+    protected readonly savedObjectClient: ISavedObjectsClient,
+    protected readonly notifications: NotificationsStart,
+    protected readonly dispatchers: Dispatchers,
+    protected readonly loadParams: LoadParams,
+    protected readonly loadContext: LoadContext
+  ) {
+    super();
+  }
+
+  async load() {
+    await this.getSavedObjectById(this.loadParams.objectId);
+  }
+
+  async getSavedObjectById(objectId: string) {
+    try {
+      const res = await this.savedObjectClient.get({
+        objectId,
+      });
+      await this.processSavedData(res.observabilityObjectList[0]);
+    } catch (error) {
+      this.notifications.toasts.addError(error, {
+        title: `Cannot get saved data for object id: ${objectId}`,
+      });
+    }
+  }
+
+  updateAppAnalyticSelectedDateRange(selectedDateRange: { start: string; end: string }) {
+    const { setStartTime, setEndTime } = this.loadContext;
+    setStartTime(selectedDateRange.start);
+    setEndTime(selectedDateRange.end);
+  }
+
+  async processSavedData(savedObjectData: SavedObjectData) {
+    const savedType = isObjectSavedQuery(savedObjectData) ? SAVED_QUERY : SAVED_VISUALIZATION;
+    const objectData = isObjectSavedQuery(savedObjectData)
+      ? savedObjectData.savedQuery
+      : savedObjectData.savedVisualization;
+    const currQuery = objectData?.query || '';
+    const { appLogEvents } = this.loadContext;
+
+    // app analytics specific
+    if (appLogEvents && objectData.selected_date_range) {
+      this.updateAppAnalyticSelectedDateRange(objectData.selected_date_range);
+    }
+
+    // update redux store with this saved object data
+    await this.updateReduxState(savedType, objectData, currQuery);
+
+    // update UI state with this saved object data
+    await this.updateUIState(objectData);
+
+    // fetch data based on saved object data
+    const { tabId } = this.loadContext;
+    await this.loadDataFromSavedObject(objectData, tabId);
+  }
+
+  async updateReduxState(
+    savedType: typeof SAVED_QUERY | typeof SAVED_VISUALIZATION,
+    objectData: SavedQuery | SavedVisualization,
+    currQuery: string
+  ) {
+    const { batch, dispatch, changeQuery, updateFields, updateTabName } = this.dispatchers;
+    const { tabId } = this.loadContext;
+    const { objectId } = this.loadParams;
+    batch(async () => {
+      await dispatch(
+        changeQuery({
+          tabId,
+          query: {
+            [RAW_QUERY]: currQuery,
+            [SELECTED_TIMESTAMP]: objectData?.selected_timestamp?.name || 'timestamp',
+            [SAVED_OBJECT_ID]: objectId,
+            [SAVED_OBJECT_TYPE]: savedType,
+            [SELECTED_DATE_RANGE]:
+              objectData?.selected_date_range?.start && objectData?.selected_date_range?.end
+                ? [objectData.selected_date_range.start, objectData.selected_date_range.end]
+                : ['now-15m', 'now'],
+          },
+        })
+      );
+      await dispatch(
+        updateFields({
+          tabId,
+          data: {
+            [SELECTED_FIELDS]: [...objectData?.selected_fields?.tokens],
+          },
+        })
+      );
+      await dispatch(
+        updateTabName({
+          tabId,
+          tabName: objectData.name,
+        })
+      );
+      await dispatch(
+        updateSearchMetaData({
+          tabId,
+          data: {
+            datasources: JSON.parse(objectData.data_sources),
+            lang: objectData.query_lang,
+          },
+        })
+      );
+      if (isInnerObjectSavedVisualization(objectData)) {
+        await this.updateVisualizationConfig(objectData);
+      }
+    });
+  }
+
+  async updateVisualizationConfig(objectData: SavedVisualization) {
+    const { dispatch, updateVizConfig } = this.dispatchers;
+    const { tabId, queryManager, getDefaultVisConfig } = this.loadContext;
+    // fill saved user configs
+    let visConfig = {};
+    const customConfig = objectData.user_configs ? JSON.parse(objectData.user_configs) : {};
+    if (!isEmpty(customConfig.dataConfig) && !isEmpty(customConfig.dataConfig?.series)) {
+      visConfig = { ...customConfig };
+    } else {
+      const statsTokens = queryManager.queryParser().parse(objectData.query).getStats();
+      visConfig = { dataConfig: { ...getDefaultVisConfig(statsTokens) } };
+    }
+    await dispatch(
+      updateVizConfig({
+        tabId,
+        vizId: objectData?.type,
+        data: visConfig,
+      })
+    );
+  }
+
+  async updateUIState(objectData: SavedQuery | SavedVisualization) {
+    const {
+      setSelectedPanelName,
+      setCurVisId,
+      setTempQuery,
+      setMetricChecked,
+      setMetricMeasure,
+      setSubType,
+      setSelectedContentTab,
+    } = this.loadContext;
+    // update UI state with saved data
+    setSelectedPanelName(objectData?.name || '');
+    setCurVisId(objectData?.type || 'bar');
+    setTempQuery((staleTempQuery) => {
+      return objectData?.query || staleTempQuery;
+    });
+    if (isInnerObjectSavedVisualization(objectData)) {
+      if (objectData.sub_type === 'metric') {
+        setMetricChecked(true);
+        setMetricMeasure(objectData.units_of_measure || '');
+      }
+      setSubType(objectData.sub_type);
+    }
+    const tabToBeFocused = isInnerObjectSavedVisualization(objectData)
+      ? TYPE_TAB_MAPPING[SAVED_VISUALIZATION]
+      : TYPE_TAB_MAPPING[SAVED_QUERY];
+    setSelectedContentTab(tabToBeFocused);
+  }
+
+  handleDirectQuerySuccess = (pollingResult, configurations: PollingConfigurations) => {
+    const { tabId, dispatchOnGettingHis } = this.loadContext;
+    const { dispatch } = this.dispatchers;
+    if (pollingResult && pollingResult.status === 'SUCCESS') {
+      // stop polling
+      dispatch(
+        updateSearchMetaData({
+          tabId,
+          data: {
+            isPolling: false,
+          },
+        })
+      );
+      // update page with data
+      dispatchOnGettingHis(pollingResult, '');
+      return true;
+    }
+    return false;
+  };
+
+  handleDirectQueryError = (error: Error) => {
+    console.error(error);
+    return true;
+  };
+
+  loadDefaultIndexPattern = () => {
+    const { fetchData } = this.loadContext;
+    fetchData();
+  };
+
+  loadSparkGlue = ({ objectData, dataSources, tabId }) => {
+    const { dispatch } = this.dispatchers;
+    const sqlService = new SQLService(coreRefs.http);
+
+    // Create an instance of UsePolling
+    const polling = new UsePolling<any, any>(
+      (params) => {
+        return sqlService.fetchWithJobId(params);
+      },
+      5000,
+      this.handleDirectQuerySuccess,
+      this.handleDirectQueryError,
+      { tabId }
+    );
+
+    // Update your references from the destructured hook to direct properties of the polling instance
+    const startPolling = polling.startPolling.bind(polling); // bind to ensure correct 'this' context
+
+    this.pollingInstance = polling;
+
+    dispatch(
+      updateSearchMetaData({
+        tabId,
+        data: {
+          isPolling: true,
+        },
+      })
+    );
+
+    sqlService
+      .fetch({
+        lang: objectData.query_lang.toLowerCase(),
+        query: objectData.query,
+        datasource: dataSources[0].label,
+      })
+      .then((result) => {
+        if (result.queryId) {
+          startPolling({ queryId: result.queryId });
+        } else {
+          console.log('no query id found in response');
+        }
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  };
+
+  async loadDataFromSavedObject(objectData, tabId: string) {
+    const dataSources = parseStringDataSource(objectData.data_sources, this.notifications);
+    if (dataSources.length > 0 && dataSources[0].type) {
+      switch (dataSources[0].type) {
+        case DIRECT_DATA_SOURCE_TYPES.DEFAULT_INDEX_PATTERNS:
+          this.loadDefaultIndexPattern();
+          return;
+        case DIRECT_DATA_SOURCE_TYPES.SPARK:
+        case DIRECT_DATA_SOURCE_TYPES.S3GLUE:
+          this.loadSparkGlue({
+            objectData,
+            dataSources,
+            tabId,
+          });
+          return;
+        default:
+          return;
+      }
+    }
+  }
+
+  getPollingInstance() {
+    return this.pollingInstance;
+  }
+}
diff --git a/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts b/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
index 21fc4b27ae..d10a78086e 100644
--- a/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
+++ b/public/services/saved_objects/saved_object_loaders/ppl/ppl_loader.ts
@@ -3,12 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { has, isEmpty } from 'lodash';
-import { updateFields as updateFieldsAction } from 'public/components/event_analytics/redux/slices/field_slice';
-import { changeQuery as changeQueryAction } from 'public/components/event_analytics/redux/slices/query_slice';
-import { updateTabName as updateTabNameAction } from 'public/components/event_analytics/redux/slices/query_tab_slice';
-import { change as updateVizConfigAction } from 'public/components/event_analytics/redux/slices/viualization_config_slice';
+import { isEmpty } from 'lodash';
 import { batch as Batch } from 'react-redux';
+import { update } from 'public/components/event_analytics/redux/slices/search_meta_data_slice';
+import { updateFields as updateFieldsAction } from '../../../../components/event_analytics/redux/slices/field_slice';
+import { changeQuery as changeQueryAction } from '../../../../components/event_analytics/redux/slices/query_slice';
+import { updateTabName as updateTabNameAction } from '../../../../components/event_analytics/redux/slices/query_tab_slice';
+import { change as updateVizConfigAction } from '../../../../components/event_analytics/redux/slices/viualization_config_slice';
+import { update as updateSearchMetaData } from '../../../../components/event_analytics/redux/slices/search_meta_data_slice';
 import { NotificationsStart } from '../../../../../../../src/core/public';
 import {
   AGGREGATIONS,
@@ -59,6 +61,7 @@ interface LoadContext {
   setSubType: (type: string) => void;
   setSelectedContentTab: (curTab: string) => void;
   fetchData: () => void;
+  dataSources: SelectedDataSource[];
 }
 
 interface Dispatchers {
@@ -179,6 +182,15 @@ export class PPLSavedObjectLoader extends SavedObjectLoaderBase implements ISave
           tabName: objectData.name,
         })
       );
+      await dispatch(
+        updateSearchMetaData({
+          tabId,
+          data: {
+            datasources: [JSON.parse(objectData.data_sources)],
+            lang: objectData.query_lang,
+          },
+        })
+      );
       if (isInnerObjectSavedVisualization(objectData)) {
         await this.updateVisualizationConfig(objectData);
       }
diff --git a/server/plugin.ts b/server/plugin.ts
index 31db6b3efc..59e3e41247 100644
--- a/server/plugin.ts
+++ b/server/plugin.ts
@@ -15,7 +15,10 @@ import {
 import { OpenSearchObservabilityPlugin } from './adaptors/opensearch_observability_plugin';
 import { PPLPlugin } from './adaptors/ppl_plugin';
 import { setupRoutes } from './routes/index';
-import { visualizationSavedObject } from './saved_objects/observability_saved_object';
+import {
+  searchSavedObject,
+  visualizationSavedObject,
+} from './saved_objects/observability_saved_object';
 import { ObservabilityPluginSetup, ObservabilityPluginStart } from './types';
 
 export class ObservabilityPlugin
@@ -111,6 +114,7 @@ export class ObservabilityPlugin
     setupRoutes({ router, client: openSearchObservabilityClient });
 
     core.savedObjects.registerType(visualizationSavedObject);
+    core.savedObjects.registerType(searchSavedObject);
     core.capabilities.registerProvider(() => ({
       observability: {
         show: true,
diff --git a/server/saved_objects/observability_saved_object.ts b/server/saved_objects/observability_saved_object.ts
index d8f8ca32d0..2054a43292 100644
--- a/server/saved_objects/observability_saved_object.ts
+++ b/server/saved_objects/observability_saved_object.ts
@@ -5,7 +5,10 @@
 
 import { SavedObjectsType } from '../../../../src/core/server';
 import { observabilityID, observabilityLogsID } from '../../common/constants/shared';
-import { VISUALIZATION_SAVED_OBJECT } from '../../common/types/observability_saved_object_attributes';
+import {
+  SEARCH_SAVED_OBJECT,
+  VISUALIZATION_SAVED_OBJECT,
+} from '../../common/types/observability_saved_object_attributes';
 
 export const visualizationSavedObject: SavedObjectsType = {
   name: VISUALIZATION_SAVED_OBJECT,
@@ -41,3 +44,38 @@ export const visualizationSavedObject: SavedObjectsType = {
   },
   migrations: {},
 };
+
+export const searchSavedObject: SavedObjectsType = {
+  name: SEARCH_SAVED_OBJECT,
+  icon: 'editorCodeBlock',
+  hidden: false,
+  namespaceType: 'single',
+  management: {
+    defaultSearchField: 'title',
+    importableAndExportable: true,
+    getTitle(obj) {
+      return obj.attributes.title;
+    },
+    getInAppUrl(obj) {
+      const editPath = `#/explorer/${SEARCH_SAVED_OBJECT}:${obj.id}`;
+      const editUrl = `/app/${observabilityLogsID}${editPath}`;
+      return {
+        path: editUrl,
+        uiCapabilitiesPath: 'observability.show',
+      };
+    },
+  },
+  mappings: {
+    dynamic: false,
+    properties: {
+      title: {
+        type: 'text',
+      },
+      description: {
+        type: 'text',
+      },
+      version: { type: 'integer' },
+    },
+  },
+  migrations: {},
+};