diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js
index 8056c3299..57fc0ad76 100644
--- a/.cypress/integration/1_event_analytics.spec.js
+++ b/.cypress/integration/1_event_analytics.spec.js
@@ -22,20 +22,15 @@ import {
   HOST_TEXT_2,
   HOST_TEXT_3,
   HOST_TEXT_4,
-  AGENT_TEXT_1,
-  AGENT_TEXT_2,
-  AGENT_TEXT_3,
   BAR_LEG_TEXT_1,
   BAR_LEG_TEXT_2,
   BAR_LEG_TEXT_3,
   VIS_TYPE_PIE,
-  VIS_TYPE_HBAR,
   VIS_TYPE_VBAR,
-  VIS_TYPE_HEATMAP,
   FIELD_HOST,
   FIELD_AGENT
 } from '../utils/event_analytics/constants';
-import { supressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants';
+import { suppressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants';
 import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers';
 
 describe('Adding sample data and visualization', () => {
@@ -90,7 +85,7 @@ describe('Open flyout for a data row to see details', () => {
 
   it('Should be able to open flyout and see data, json and traces', () => {
     cy.get('[data-test-subj="docTable"] tbody tr button.euiButtonIcon').first().click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('.observability-flyout').should('exist');
     cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content')
       .contains('Table')
@@ -117,7 +112,7 @@ describe('Open flyout for a data row to see details', () => {
 describe('Add/delete/switch explorer top level tabs', () => {
   before(() => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
   });
 
   it('Add a new tab', () => {
@@ -138,7 +133,7 @@ describe('Add/delete/switch explorer top level tabs', () => {
       .find('button.euiTab')
       .first()
       .click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
       .find('button.euiTab')
       .first()
@@ -215,7 +210,7 @@ describe('Click actions', () => {
     cy.get('[data-test-subj="eventHomeAction__delete"]').click();
     cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete');
     cy.get('[data-test-subj="popoverModal__deleteButton"').click();
-    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    cy.get('.euiToastHeader__title').should('contain', 'successfully');
   });
 });
 
@@ -223,14 +218,14 @@ describe('Saves a query on explorer page', () => {
   it('Saves a visualization on visualization tab of explorer page', () => {
     landOnEventExplorer();
     querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM);
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
     cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
     cy.get('[data-test-subj="eventExplorer__querySaveName"]')
       .focus()
       .type(SAVE_QUERY2, { force: true });
     cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true });
-    cy.get('.euiToastHeader__title').should('contain', 'successfully');
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
     landOnEventHome();
     cy.get('[data-test-subj="eventHome__savedQueryTableName"]').first().contains(SAVE_QUERY2);
   });
@@ -245,7 +240,7 @@ describe('Saves a query on explorer page', () => {
     cy.wait(delay);
     landOnEventExplorer();
     querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM);
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('button[id="main-content-vis"]', { timeout: COMMAND_TIMEOUT_LONG })
       .contains('Visualizations')
       .click();
@@ -261,7 +256,7 @@ describe('Saves a query on explorer page', () => {
 
   it('Saves a query on event tab of explorer page', () => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM);
 
     cy.get('.tab-title').contains('Events').click();
@@ -281,7 +276,7 @@ describe('Saves a query on explorer page', () => {
 
   it('Click on a saved query from event analytics home', () => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM);
 
     cy.get('.tab-title').contains('Events').click();
@@ -310,7 +305,7 @@ describe('Saves a query on explorer page', () => {
 describe('Override timestamp for an index', () => {
   it('Click override button to override default timestamp', () => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     clearQuerySearchBoxText('searchAutocompleteTextArea');
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[2].query);
     cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
@@ -330,7 +325,7 @@ describe('Override timestamp for an index', () => {
 describe('Toggle sidebar fields', () => {
   it('Toggle fields between available and selected section', () => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID);
     cy.get('[data-test-subj="fieldToggle-AvgTicketPrice"]').click();
     cy.get('[data-test-subj="field-AvgTicketPrice"]').should('exist');
@@ -344,7 +339,7 @@ describe('Toggle sidebar fields', () => {
 describe('Search fields in sidebar', () => {
   it('Search a field', () => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID);
     cy.get('[data-test-subj="eventExplorer__sidebarSearch"]').type('A');
     cy.get('[data-test-subj="field-Cancelled"]').should('not.exist');
@@ -373,7 +368,7 @@ describe('Delete saved objects', () => {
 describe('Click to view field insights', () => {
   beforeEach(() => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     querySearch(TEST_QUERIES[2].query, YEAR_TO_DATE_DOM_ID);
   });
 
@@ -411,7 +406,7 @@ describe('Click to view field insights', () => {
 describe('Switch on and off livetail', () => {
   it('Switch on and off in live tail', () => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query);
     cy.get('[data-test-subj=eventLiveTail]').click();
     cy.get('[data-test-subj=eventLiveTail__delay10s]').click();
@@ -424,7 +419,7 @@ describe('Switch on and off livetail', () => {
 describe('Live tail stop automatically', () => {
   it('Moving to other tab should stop live tail automatically', () => {
     landOnEventExplorer();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     clearQuerySearchBoxText('searchAutocompleteTextArea');
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query);
     cy.get('[data-test-subj=eventLiveTail]').click();
@@ -433,7 +428,7 @@ describe('Live tail stop automatically', () => {
   });
 
   it('Add a new tab', () => {
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
       .find('button.euiTab')
       .then((lists) => {
@@ -453,7 +448,7 @@ describe('Live tail stop automatically', () => {
       .find('button.euiTab')
       .first()
       .click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
 
     cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
       .find('button.euiTab')
@@ -474,7 +469,7 @@ describe('Live tail stop automatically', () => {
         const initialLength = Cypress.$(lists).length;
         cy.get('[data-test-subj="eventExplorer__topLevelTabbing"] button.euiTab').eq(1).click();
         cy.get('button.euiTab-isSelected [data-test-subj="eventExplorer__tabClose"]').click();
-        supressResizeObserverIssue();
+        suppressResizeObserverIssue();
         cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
           .find('button.euiTab')
           .should('have.length', initialLength - 1);
@@ -487,7 +482,7 @@ describe('Live tail stop automatically', () => {
 });
 
 describe('Visualizing data', () => {
-  before(() => {
+  beforeEach(() => {
     landOnEventVisualizations();
     querySearch(TEST_QUERIES[2].query, YEAR_TO_DATE_DOM_ID);
   });
@@ -542,50 +537,11 @@ describe('Visualizing data', () => {
     cy.get(`input[value="${FIELD_AGENT}"]`).click();
     cy.get('[data-test-subj="panelCloseBtn"]').click();
     cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
-    supressResizeObserverIssue();
-
-    cy.get('.infolayer .legendtext').as('legandTxt');
-    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_1);
-    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_2);
-    cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_3);
-  });
+    suppressResizeObserverIssue();
 
-  it('Visualize horizontal bar chart', () => {
-    cy.get('[data-test-subj="comboBoxInput"]').click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_HBAR).click();
-    cy.get('[data-test-subj="vizConfigSection-dimensions"]')
-      .find('[data-test-subj="viz-config-section"]')
-      .eq(1)
-      .find('[data-test-subj="viz-config-delete-btn"]')
-      .click();
-    cy.get('[data-test-subj="vizConfigSection-breakdowns"]')
-      .find('[data-test-subj="viz-config-add-btn"]')
-      .click();
-    cy.get('[data-test-subj="explorer__vizDataConfig-panel"]')
-      .find('[data-test-subj="comboBoxInput"]')
-      .click()
-      .type(FIELD_AGENT);
-    cy.get(`input[value="${FIELD_AGENT}"]`).click();
-    cy.get('[data-test-subj="panelCloseBtn"]').click();
-    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
     cy.get('.infolayer .legendtext').as('legandTxt');
     cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_1);
     cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_2);
     cy.get('@legandTxt').should('contain', BAR_LEG_TEXT_3);
   });
-
-  it('Visualize heatmap chart', () => {
-    cy.get('[data-test-subj="comboBoxInput"]').click();
-    cy.get('[data-test-subj="comboBoxOptionsList "] span').contains(VIS_TYPE_HEATMAP).click();
-    supressResizeObserverIssue();
-    cy.get('g.cartesianlayer g.xy g.xaxislayer-above g.xtick text').as('legandXTxt');
-    cy.get('@legandXTxt').should('contain', HOST_TEXT_1);
-    cy.get('@legandXTxt').should('contain', HOST_TEXT_3);
-    cy.get('@legandXTxt').should('contain', HOST_TEXT_4);
-    cy.get('@legandXTxt').should('contain', HOST_TEXT_2);
-    cy.get('g.cartesianlayer g.xy g.yaxislayer-above g.ytick text').as('legandYTxt');
-    cy.get('@legandYTxt').should('contain', AGENT_TEXT_1);
-    cy.get('@legandYTxt').should('contain', AGENT_TEXT_2);
-    cy.get('@legandYTxt').should('contain', AGENT_TEXT_3);
-  });
 });
diff --git a/.cypress/integration/3_panels.spec.js b/.cypress/integration/3_panels.spec.js
index 023a4d2ae..900472fa2 100644
--- a/.cypress/integration/3_panels.spec.js
+++ b/.cypress/integration/3_panels.spec.js
@@ -16,7 +16,7 @@ import {
   SAMPLE_VISUALIZATIONS_NAMES,
 } from '../utils/panel_constants';
 
-import { supressResizeObserverIssue } from '../utils/constants';
+import { suppressResizeObserverIssue } from '../utils/constants';
 
 const moveToEventsHome = () => {
   cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/`);
@@ -59,7 +59,7 @@ describe('Creating visualizations', () => {
     });
     cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
     cy.wait(delay);
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
     cy.wait(delay * 2);
     cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click();
@@ -80,7 +80,7 @@ describe('Creating visualizations', () => {
     });
     cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
     cy.wait(delay);
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
     cy.wait(delay);
     cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click();
@@ -384,7 +384,7 @@ describe('Testing a panel', () => {
     });
     cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click();
 
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
     cy.wait(delay * 2);
     cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click();
@@ -420,7 +420,7 @@ describe('Testing a panel', () => {
       .contains(PPL_VISUALIZATIONS_NAMES[0])
       .should('exist');
     cy.get('button[aria-label="actionMenuButton"]').eq(0).trigger('mouseover').click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('button[data-test-subj="editVizContextMenuItem"]').click();
     cy.wait(delay * 3);
     cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer'));
diff --git a/.cypress/integration/7_app_analytics.spec.js b/.cypress/integration/7_app_analytics.spec.js
index 377b2d323..e3a41a49b 100644
--- a/.cypress/integration/7_app_analytics.spec.js
+++ b/.cypress/integration/7_app_analytics.spec.js
@@ -33,7 +33,7 @@ import {
   TYPING_DELAY,
   timeoutDelay
 } from '../utils/app_constants';
-import { supressResizeObserverIssue } from '../utils/constants';
+import { suppressResizeObserverIssue } from '../utils/constants';
 
 describe('Creating application', () => {
   beforeEach(() => {
@@ -233,7 +233,7 @@ describe('Viewing application', () => {
     cy.get('[data-test-subj="app-analytics-serviceTab"]').click();
     cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
     cy.get('[data-test-subj="app-analytics-traceTab"]').click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
     cy.get('[data-test-subj="app-analytics-logTab"]').click();
     cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
@@ -262,7 +262,7 @@ describe('Viewing application', () => {
     cy.get('[data-test-subj="app-analytics-serviceTab"]').click();
     cy.wait(delay);
     cy.get('.euiLink').contains('authentication').click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('[data-test-subj="serviceDetailFlyoutTitle"]').should('be.visible');
     cy.get('[data-test-subj="serviceDetailFlyout"]').within(($flyout) => {
       cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3');
@@ -279,7 +279,7 @@ describe('Viewing application', () => {
 
   it('Opens trace detail flyout when Trace ID is clicked', () => {
     cy.get('[data-test-subj="app-analytics-traceTab"]').click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.wait(delay);
     cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click();
     cy.get('[data-test-subj="traceDetailFlyoutTitle"]').should('be.visible');
@@ -300,7 +300,7 @@ describe('Viewing application', () => {
 
   it('Opens span detail flyout when Span ID is clicked', () => {
     cy.get('[data-test-subj="app-analytics-traceTab"]').click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.wait(delay);
     cy.get('[data-test-subj="dataGridRowCell"]').contains('5ff3516909562c60').click();
     cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible');
@@ -334,7 +334,7 @@ describe('Viewing application', () => {
     changeTimeTo24('months');
     cy.wait(delay * 2);
     cy.get('[data-test-subj="main-content-visTab"]').click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
     cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visOneName);
     cy.wait(delay);
@@ -351,7 +351,7 @@ describe('Viewing application', () => {
     cy.get('[data-test-subj="app-analytics-panelTab"]').click();
     cy.get('[aria-label="actionMenuButton"]').click();
     cy.get('[data-test-subj="editVizContextMenuItem"]').click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
     cy.get('.euiTab[id="availability-panel"]').click();
     cy.get('[title="Bar"]').click();
@@ -389,7 +389,7 @@ describe('Viewing application', () => {
     cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
     cy.wait(delay);
     cy.get('[data-test-subj="main-content-visTab"]').click();
-    supressResizeObserverIssue();
+    suppressResizeObserverIssue();
     cy.get('.euiTab[id="availability-panel"]').click();
     cy.get('[title="Bar"]').click();
     cy.focused().type('{downArrow}');
diff --git a/.cypress/utils/app_constants.js b/.cypress/utils/app_constants.js
index f87432409..4d20359f4 100644
--- a/.cypress/utils/app_constants.js
+++ b/.cypress/utils/app_constants.js
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { supressResizeObserverIssue } from './constants';
+import { suppressResizeObserverIssue } from './constants';
 
 export const delay = 1000;
 export const timeoutDelay = 30000;
@@ -18,13 +18,13 @@ export const moveToHomePage = () => {
 export const moveToCreatePage = () => {
   cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`);
   cy.get('.euiButton[href="#/application_analytics/create"]').eq(0).click();
-  supressResizeObserverIssue();
+  suppressResizeObserverIssue();
   cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Create application');
 };
 
 export const moveToApplication = (name) => {
   cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`);
-  supressResizeObserverIssue();
+  suppressResizeObserverIssue();
   cy.wait(delay * 6);
   cy.get(`[data-test-subj="${name}ApplicationLink"]`).click();
   cy.wait(delay);
@@ -36,7 +36,7 @@ export const moveToEditPage = () => {
   moveToApplication(nameOne);
   cy.get('[data-test-subj="app-analytics-configTab"]').click();
   cy.get('[data-test-subj="editApplicationButton"]').click();
-  supressResizeObserverIssue();
+  suppressResizeObserverIssue();
   cy.wait(delay);
   cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Edit application');
 };
diff --git a/.cypress/utils/constants.js b/.cypress/utils/constants.js
index 4f9487ceb..5d6f692ff 100644
--- a/.cypress/utils/constants.js
+++ b/.cypress/utils/constants.js
@@ -110,7 +110,7 @@ export const PPL_QUERY_TEXT = `%ppl
 source=opensearch_dashboards_sample_data_flights
 `
 
-export const supressResizeObserverIssue = () => {
+export const suppressResizeObserverIssue = () => {
   // exception is thrown on loading EuiDataGrid in cypress only, ignore for now
   cy.on('uncaught:exception', (err, runnable) => {
     if (err.message.includes('ResizeObserver loop')) return false;
diff --git a/.cypress/utils/event_analytics/constants.js b/.cypress/utils/event_analytics/constants.js
index 4168fa74a..f425438b7 100644
--- a/.cypress/utils/event_analytics/constants.js
+++ b/.cypress/utils/event_analytics/constants.js
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { COMMAND_TIMEOUT_LONG, supressResizeObserverIssue } from '../constants';
+import { COMMAND_TIMEOUT_LONG, suppressResizeObserverIssue } from '../constants';
 
 export const delay = 1000;
 export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]';
@@ -77,6 +77,7 @@ export const querySearch = (query, rangeSelected) => {
     .clear()
     .focus()
     .type(query, { delay: 50 });
+  suppressResizeObserverIssue();
   cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
   cy.get(rangeSelected).click();
   cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
@@ -96,7 +97,7 @@ export const landOnEventVisualizations = () => {
   cy.visit(
     `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
   );
-  supressResizeObserverIssue(); // have to add
+  suppressResizeObserverIssue(); // have to add
   cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
 };
 
diff --git a/.eslintrc.js b/.eslintrc.js
index 4d8297eb3..f8dd0a681 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,5 +10,12 @@ module.exports = {
     'plugin:@elastic/eui/recommended',
     'plugin:react-hooks/recommended',
   ],
+  overrides: [
+    {
+      files: ['**/*.{js,ts,tsx}'],
+      rules: {
+        'no-console': 0,
+      },
+    },
+  ],
 };
-
diff --git a/.gitignore b/.gitignore
index 83a6e387b..8466c1c43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,5 +4,6 @@ build/
 coverage/
 .cypress/screenshots
 .cypress/videos
+.cypress/downloads
 common/query_manager/antlr/output
 .eslintcache
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
index 5a48e6b96..f1e936e12 100644
--- a/common/constants/shared.ts
+++ b/common/constants/shared.ts
@@ -160,8 +160,8 @@ export interface DefaultChartStylesProps {
 export const DEFAULT_CHART_STYLES: DefaultChartStylesProps = {
   DefaultModeLine: 'lines',
   Interpolation: 'spline',
-  LineWidth: 2,
-  FillOpacity: 70,
+  LineWidth: 0,
+  FillOpacity: 100,
   MarkerSize: 5,
   ShowLegend: 'show',
   LegendPosition: 'v',
diff --git a/common/types/explorer.ts b/common/types/explorer.ts
index ab378016f..d4b2ef593 100644
--- a/common/types/explorer.ts
+++ b/common/types/explorer.ts
@@ -318,6 +318,7 @@ export interface ConfigList {
   [AGGREGATIONS]?: ConfigListEntry[];
   [BREAKDOWNS]?: ConfigListEntry[] | HistogramConfigList[];
   span?: DimensionSpan;
+  isVertical?: boolean;
 }
 
 export interface Breadcrumbs {
@@ -385,3 +386,8 @@ export interface VisualizationState {
   visConfMetadata: ConfigList;
   visMeta: VisMeta;
 }
+
+export interface VisSpecificMetaData {
+  x_coordinate: string;
+  y_coordinate: string;
+}
diff --git a/cypress.json b/cypress.json
index 5c55805ba..dbe41c79b 100644
--- a/cypress.json
+++ b/cypress.json
@@ -8,6 +8,7 @@
   "screenshotsFolder": ".cypress/screenshots",
   "supportFile": ".cypress/support/index.js",
   "videosFolder": ".cypress/videos",
+  "downloadsFolder": ".cypress/downloads",
   "viewportWidth": 2000,
   "viewportHeight": 1320,
   "requestTimeout": 60000,
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index 5876133be..ae12e1b7d 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -72,16 +72,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "size": 4,
               "status": 200,
             },
-            "explorerFields": Array [
-              Object {
-                "name": "avg(FlightDelayMin)",
-                "type": "double",
-              },
-              Object {
-                "name": "Carrier",
-                "type": "keyword",
-              },
-            ],
+            "explorerFields": undefined,
           },
           "indexFields": Object {},
           "query": Object {
@@ -385,7 +376,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                       },
                       Object {
                         "component": [Function],
-                        "defaultState": 2,
+                        "defaultState": 0,
                         "eleType": "slider",
                         "mapTo": "lineWidth",
                         "name": "Line width",
@@ -395,7 +386,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                       },
                       Object {
                         "component": [Function],
-                        "defaultState": 70,
+                        "defaultState": 100,
                         "eleType": "slider",
                         "mapTo": "fillOpacity",
                         "name": "Fill opacity",
@@ -422,7 +413,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               },
             ],
           },
-          "fillopacity": 70,
+          "fillopacity": 100,
           "fulllabel": "Vertical bar",
           "groupwidth": 0.7,
           "icon": [Function],
@@ -431,7 +422,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
           "label": "Vertical bar",
           "labelangle": 0,
           "legendposition": "v",
-          "linewidth": 2,
+          "linewidth": 0,
           "mode": "group",
           "name": "bar",
           "orientation": "v",
@@ -537,16 +528,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "size": 4,
                 "status": 200,
               },
-              "explorerFields": Array [
-                Object {
-                  "name": "avg(FlightDelayMin)",
-                  "type": "double",
-                },
-                Object {
-                  "name": "Carrier",
-                  "type": "keyword",
-                },
-              ],
+              "explorerFields": undefined,
             },
             "indexFields": Object {},
             "query": Object {
@@ -850,7 +832,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 2,
+                          "defaultState": 0,
                           "eleType": "slider",
                           "mapTo": "lineWidth",
                           "name": "Line width",
@@ -860,7 +842,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 70,
+                          "defaultState": 100,
                           "eleType": "slider",
                           "mapTo": "fillOpacity",
                           "name": "Fill opacity",
@@ -887,7 +869,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 },
               ],
             },
-            "fillopacity": 70,
+            "fillopacity": 100,
             "fulllabel": "Vertical bar",
             "groupwidth": 0.7,
             "icon": [Function],
@@ -896,7 +878,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
             "label": "Vertical bar",
             "labelangle": 0,
             "legendposition": "v",
-            "linewidth": 2,
+            "linewidth": 0,
             "mode": "group",
             "name": "bar",
             "orientation": "v",
@@ -1009,16 +991,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                   "size": 4,
                   "status": 200,
                 },
-                "explorerFields": Array [
-                  Object {
-                    "name": "avg(FlightDelayMin)",
-                    "type": "double",
-                  },
-                  Object {
-                    "name": "Carrier",
-                    "type": "keyword",
-                  },
-                ],
+                "explorerFields": undefined,
               },
               "indexFields": Object {},
               "query": Object {
@@ -1322,7 +1295,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 2,
+                            "defaultState": 0,
                             "eleType": "slider",
                             "mapTo": "lineWidth",
                             "name": "Line width",
@@ -1332,7 +1305,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 70,
+                            "defaultState": 100,
                             "eleType": "slider",
                             "mapTo": "fillOpacity",
                             "name": "Fill opacity",
@@ -1359,7 +1332,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                   },
                 ],
               },
-              "fillopacity": 70,
+              "fillopacity": 100,
               "fulllabel": "Vertical bar",
               "groupwidth": 0.7,
               "icon": [Function],
@@ -1368,7 +1341,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "label": "Vertical bar",
               "labelangle": 0,
               "legendposition": "v",
-              "linewidth": 2,
+              "linewidth": 0,
               "mode": "group",
               "name": "bar",
               "orientation": "v",
@@ -1416,10 +1389,10 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               Object {
                 "hoverinfo": "all",
                 "marker": Object {
-                  "color": "rgba(60,161,199,0.35)",
+                  "color": "rgba(60,161,199,0.5)",
                   "line": Object {
                     "color": "#3CA1C7",
-                    "width": 2,
+                    "width": 0,
                   },
                 },
                 "name": "delays",
@@ -1506,10 +1479,10 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 Object {
                   "hoverinfo": "all",
                   "marker": Object {
-                    "color": "rgba(60,161,199,0.35)",
+                    "color": "rgba(60,161,199,0.5)",
                     "line": Object {
                       "color": "#3CA1C7",
-                      "width": 2,
+                      "width": 0,
                     },
                   },
                   "name": "delays",
@@ -1686,16 +1659,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "size": 4,
               "status": 200,
             },
-            "explorerFields": Array [
-              Object {
-                "name": "avg(FlightDelayMin)",
-                "type": "double",
-              },
-              Object {
-                "name": "Carrier",
-                "type": "keyword",
-              },
-            ],
+            "explorerFields": undefined,
           },
           "indexFields": Object {},
           "query": Object {
@@ -1982,7 +1946,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                       },
                       Object {
                         "component": [Function],
-                        "defaultState": 2,
+                        "defaultState": 0,
                         "eleType": "slider",
                         "mapTo": "lineWidth",
                         "name": "Line width",
@@ -1992,7 +1956,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                       },
                       Object {
                         "component": [Function],
-                        "defaultState": 70,
+                        "defaultState": 100,
                         "eleType": "slider",
                         "mapTo": "fillOpacity",
                         "name": "Fill opacity",
@@ -2212,16 +2176,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "size": 4,
                 "status": 200,
               },
-              "explorerFields": Array [
-                Object {
-                  "name": "avg(FlightDelayMin)",
-                  "type": "double",
-                },
-                Object {
-                  "name": "Carrier",
-                  "type": "keyword",
-                },
-              ],
+              "explorerFields": undefined,
             },
             "indexFields": Object {},
             "query": Object {
@@ -2508,7 +2463,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 2,
+                          "defaultState": 0,
                           "eleType": "slider",
                           "mapTo": "lineWidth",
                           "name": "Line width",
@@ -2518,7 +2473,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 70,
+                          "defaultState": 100,
                           "eleType": "slider",
                           "mapTo": "fillOpacity",
                           "name": "Fill opacity",
@@ -2752,16 +2707,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                   "size": 4,
                   "status": 200,
                 },
-                "explorerFields": Array [
-                  Object {
-                    "name": "avg(FlightDelayMin)",
-                    "type": "double",
-                  },
-                  Object {
-                    "name": "Carrier",
-                    "type": "keyword",
-                  },
-                ],
+                "explorerFields": undefined,
               },
               "indexFields": Object {},
               "query": Object {
@@ -3048,7 +2994,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 2,
+                            "defaultState": 0,
                             "eleType": "slider",
                             "mapTo": "lineWidth",
                             "name": "Line width",
@@ -3058,7 +3004,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 70,
+                            "defaultState": 100,
                             "eleType": "slider",
                             "mapTo": "fillOpacity",
                             "name": "Fill opacity",
@@ -3222,18 +3168,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             Array [
               Object {
                 "fill": "tozeroy",
-                "fillcolor": "rgba(60,161,199,0.35)",
+                "fillcolor": "rgba(60,161,199,0.5)",
                 "hoverinfo": "all",
                 "line": Object {
                   "color": "#3CA1C7",
                   "shape": "spline",
-                  "width": 2,
+                  "width": 0,
                 },
                 "marker": Object {
-                  "color": "rgba(60,161,199,0.35)",
+                  "color": "rgba(60,161,199,0.5)",
                   "line": Object {
                     "color": "#3CA1C7",
-                    "width": 2,
+                    "width": 0,
                   },
                   "size": 5,
                 },
@@ -3309,18 +3255,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               Array [
                 Object {
                   "fill": "tozeroy",
-                  "fillcolor": "rgba(60,161,199,0.35)",
+                  "fillcolor": "rgba(60,161,199,0.5)",
                   "hoverinfo": "all",
                   "line": Object {
                     "color": "#3CA1C7",
                     "shape": "spline",
-                    "width": 2,
+                    "width": 0,
                   },
                   "marker": Object {
-                    "color": "rgba(60,161,199,0.35)",
+                    "color": "rgba(60,161,199,0.5)",
                     "line": Object {
                       "color": "#3CA1C7",
-                      "width": 2,
+                      "width": 0,
                     },
                     "size": 5,
                   },
@@ -3477,16 +3423,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "size": 4,
               "status": 200,
             },
-            "explorerFields": Array [
-              Object {
-                "name": "avg(FlightDelayMin)",
-                "type": "double",
-              },
-              Object {
-                "name": "Carrier",
-                "type": "keyword",
-              },
-            ],
+            "explorerFields": undefined,
           },
           "indexFields": Object {},
           "query": Object {
@@ -3790,7 +3727,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                       },
                       Object {
                         "component": [Function],
-                        "defaultState": 2,
+                        "defaultState": 0,
                         "eleType": "slider",
                         "mapTo": "lineWidth",
                         "name": "Line width",
@@ -3800,7 +3737,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                       },
                       Object {
                         "component": [Function],
-                        "defaultState": 70,
+                        "defaultState": 100,
                         "eleType": "slider",
                         "mapTo": "fillOpacity",
                         "name": "Fill opacity",
@@ -3827,7 +3764,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               },
             ],
           },
-          "fillopacity": 70,
+          "fillopacity": 100,
           "fulllabel": "Horizontal bar",
           "groupwidth": 0.7,
           "icon": [Function],
@@ -3836,7 +3773,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
           "label": "Horizontal bar",
           "labelangle": 0,
           "legendposition": "v",
-          "linewidth": 2,
+          "linewidth": 0,
           "mode": "group",
           "name": "horizontal_bar",
           "orientation": "h",
@@ -3942,16 +3879,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "size": 4,
                 "status": 200,
               },
-              "explorerFields": Array [
-                Object {
-                  "name": "avg(FlightDelayMin)",
-                  "type": "double",
-                },
-                Object {
-                  "name": "Carrier",
-                  "type": "keyword",
-                },
-              ],
+              "explorerFields": undefined,
             },
             "indexFields": Object {},
             "query": Object {
@@ -4255,7 +4183,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 2,
+                          "defaultState": 0,
                           "eleType": "slider",
                           "mapTo": "lineWidth",
                           "name": "Line width",
@@ -4265,7 +4193,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 70,
+                          "defaultState": 100,
                           "eleType": "slider",
                           "mapTo": "fillOpacity",
                           "name": "Fill opacity",
@@ -4292,7 +4220,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 },
               ],
             },
-            "fillopacity": 70,
+            "fillopacity": 100,
             "fulllabel": "Horizontal bar",
             "groupwidth": 0.7,
             "icon": [Function],
@@ -4301,7 +4229,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
             "label": "Horizontal bar",
             "labelangle": 0,
             "legendposition": "v",
-            "linewidth": 2,
+            "linewidth": 0,
             "mode": "group",
             "name": "horizontal_bar",
             "orientation": "h",
@@ -4414,16 +4342,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                   "size": 4,
                   "status": 200,
                 },
-                "explorerFields": Array [
-                  Object {
-                    "name": "avg(FlightDelayMin)",
-                    "type": "double",
-                  },
-                  Object {
-                    "name": "Carrier",
-                    "type": "keyword",
-                  },
-                ],
+                "explorerFields": undefined,
               },
               "indexFields": Object {},
               "query": Object {
@@ -4727,7 +4646,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 2,
+                            "defaultState": 0,
                             "eleType": "slider",
                             "mapTo": "lineWidth",
                             "name": "Line width",
@@ -4737,7 +4656,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 70,
+                            "defaultState": 100,
                             "eleType": "slider",
                             "mapTo": "fillOpacity",
                             "name": "Fill opacity",
@@ -4764,7 +4683,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                   },
                 ],
               },
-              "fillopacity": 70,
+              "fillopacity": 100,
               "fulllabel": "Horizontal bar",
               "groupwidth": 0.7,
               "icon": [Function],
@@ -4773,7 +4692,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "label": "Horizontal bar",
               "labelangle": 0,
               "legendposition": "v",
-              "linewidth": 2,
+              "linewidth": 0,
               "mode": "group",
               "name": "horizontal_bar",
               "orientation": "h",
@@ -4821,10 +4740,10 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               Object {
                 "hoverinfo": "all",
                 "marker": Object {
-                  "color": "rgba(60,161,199,0.35)",
+                  "color": "rgba(60,161,199,0.5)",
                   "line": Object {
                     "color": "#3CA1C7",
-                    "width": 2,
+                    "width": 0,
                   },
                 },
                 "name": "avg(machine.ram)",
@@ -4911,10 +4830,10 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 Object {
                   "hoverinfo": "all",
                   "marker": Object {
-                    "color": "rgba(60,161,199,0.35)",
+                    "color": "rgba(60,161,199,0.5)",
                     "line": Object {
                       "color": "#3CA1C7",
-                      "width": 2,
+                      "width": 0,
                     },
                   },
                   "name": "avg(machine.ram)",
diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
index fc6f923b1..06f58d084 100644
--- a/public/components/custom_panels/helpers/utils.tsx
+++ b/public/components/custom_panels/helpers/utils.tsx
@@ -145,7 +145,7 @@ const pplServiceRequestor = async (
   setIsError: React.Dispatch<React.SetStateAction<VizContainerError>>
 ) => {
   await pplService
-    .fetch({ query: finalQuery, format: 'viz' })
+    .fetch({ query: finalQuery, format: 'jdbc' })
     .then((res) => {
       if (res === undefined)
         setIsError({ errorMessage: 'Please check the validity of PPL Filter' });
@@ -206,7 +206,7 @@ export const getQueryResponse = (
     finalQuery = queryAccumulator(query, timestampField, startTime, endTime, filterQuery);
   } catch (error) {
     const errorMessage = 'Issue in building final query';
-    setIsError({ errorMessage: errorMessage });
+    setIsError({ errorMessage });
     console.error(errorMessage, error);
     setIsLoading(false);
     return;
@@ -371,7 +371,7 @@ export const onTimeChange = (
   setStart: React.Dispatch<React.SetStateAction<string>>,
   setEnd: React.Dispatch<React.SetStateAction<string>>
 ) => {
-  let recentlyUsedRangeObject = recentlyUsedRanges.filter((recentlyUsedRange) => {
+  const recentlyUsedRangeObject = recentlyUsedRanges.filter((recentlyUsedRange) => {
     const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
     return !isDuplicate;
   });
@@ -479,7 +479,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
         query: { rawQuery: metaData.query },
         indexFields: {},
         userConfigs: mixedUserConfigs,
-        explorer: { explorerData: data, explorerFields: data.metadata.fields },
+        explorer: { explorerData: data, explorerFields: data.schema },
       })}
     />
   );
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index 0808a1787..8c6ec2ed3 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -426,25 +426,19 @@ export const Explorer = ({
       }
     });
 
-    // search
-    if (finalQuery.match(PPL_STATS_REGEX)) {
-      getVisualizations();
-      getAvailableFields(`search source=${curIndex}`);
+    if (!selectedIntervalRef.current || selectedIntervalRef.current.text === 'Auto') {
+      findAutoInterval(startingTime, endingTime);
+    }
+    if (isLiveTailOnRef.current) {
+      getLiveTail(undefined, getErrorHandler('Error fetching events'));
     } else {
-      if (!selectedIntervalRef.current || selectedIntervalRef.current.text === 'Auto') {
-        findAutoInterval(startingTime, endingTime);
-      }
-      if (isLiveTailOnRef.current) {
-        getLiveTail(undefined, getErrorHandler('Error fetching events'));
-      } else {
-        getEvents(undefined, getErrorHandler('Error fetching events'));
-      }
-      getCountVisualizations(selectedIntervalRef.current!.value.replace(/^auto_/, ''));
+      getEvents(undefined, getErrorHandler('Error fetching events'));
+    }
+    getCountVisualizations(selectedIntervalRef.current!.value.replace(/^auto_/, ''));
 
-      // to fetch patterns data on current query
-      if (!finalQuery.match(PATTERNS_REGEX)) {
-        getPatterns(selectedIntervalRef.current!.value.replace(/^auto_/, ''));
-      }
+    // to fetch patterns data on current query
+    if (!finalQuery.match(PATTERNS_REGEX)) {
+      getPatterns(selectedIntervalRef.current!.value.replace(/^auto_/, ''));
     }
 
     // for comparing usage if for the same tab, user changed index from one to another
@@ -1081,10 +1075,7 @@ export const Explorer = ({
         // update custom panel - query
       }
     } else if (isEqual(selectedContentTabId, TAB_CHART_ID)) {
-      if (
-        (isEmpty(currQuery![RAW_QUERY]) && isEmpty(appBaseQuery)) ||
-        isEmpty(explorerVisualizations)
-      ) {
+      if (isEmpty(currQuery![RAW_QUERY]) && isEmpty(appBaseQuery)) {
         setToast(`There is no query or(and) visualization to save`, 'danger');
         return;
       }
diff --git a/public/components/event_analytics/explorer/sidebar/field_insights.tsx b/public/components/event_analytics/explorer/sidebar/field_insights.tsx
index b9414ba70..dd0f42330 100644
--- a/public/components/event_analytics/explorer/sidebar/field_insights.tsx
+++ b/public/components/event_analytics/explorer/sidebar/field_insights.tsx
@@ -9,6 +9,15 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiBasicTable } from '@elastic/eui'
 import { getIndexPatternFromRawQuery } from '../../../../../common/utils/query_utils';
 import { TabContext } from '../../hooks/use_tab_context';
 
+interface IInsightsReq {
+  id: string;
+  name: string;
+  format: string;
+  query: string;
+}
+
+type IInsightsReqParams = Pick<IInsightsReq, 'format' | 'query'>;
+
 export const FieldInsights = ({ field, query }: any) => {
   const { pplService } = useContext(TabContext);
   const { rawQuery } = query;
@@ -33,19 +42,19 @@ export const FieldInsights = ({ field, query }: any) => {
       id: 'average',
       name: 'Average overtime',
       query: `source = ${index} | stats avg(${field.name})`,
-      format: 'viz',
+      format: 'jdbc',
     },
     {
       id: 'maximum',
       name: 'Maximum overtime',
       query: `source = ${index} | stats max(${field.name})`,
-      format: 'viz',
+      format: 'jdbc',
     },
     {
       id: 'minimum',
       name: 'Minimum overtime',
       query: `source = ${index} | stats min(${field.name})`,
-      format: 'viz',
+      format: 'jdbc',
     },
   ];
   const NUMERICAL_TYPES = ['short', 'integer', 'long', 'float', 'double'];
@@ -58,13 +67,13 @@ export const FieldInsights = ({ field, query }: any) => {
       id: 'stats',
       name: 'Stats',
       query: `source = ${index} | stats avg(${field.name}), max(${field.name}), min(${field.name})`,
-      format: 'viz',
+      format: 'jdbc',
     },
   ];
 
-  const fetchData = async (requests) => {
+  const fetchData = async (requests: IInsightsReq[]) => {
     return await Promise.all(
-      requests.map((reqQuery) => {
+      requests.map((reqQuery: IInsightsReq) => {
         const req = {
           format: reqQuery.format,
           query: reqQuery.query,
@@ -80,20 +89,20 @@ export const FieldInsights = ({ field, query }: any) => {
     fetchData(requests)
       .then((res) => {
         // numerical field
-        generalReports.map((report, index) => {
-          if (!res[index]?.jsonData) return;
+        generalReports.map((report, idx) => {
+          if (!res[idx]?.jsonData) return;
           setReportContent((staleState) => {
             return {
               ...staleState,
-              [report.id]: res[index]?.jsonData || {},
+              [report.id]: res[idx]?.jsonData || {},
             };
           });
         });
         if (res.length > 2) {
           const statsRes = last(res);
           if (!statsRes?.metadata) return;
-          numericalOnlyReports.map((rep, index) => {
-            const fieldName = statsRes.metadata?.fields[index]?.name;
+          numericalOnlyReports.map((rep, idx) => {
+            const fieldName = statsRes.metadata?.fields[idx]?.name;
             setReportContent((staleState) => {
               return {
                 ...staleState,
@@ -103,12 +112,14 @@ export const FieldInsights = ({ field, query }: any) => {
           });
         }
       })
-      .catch((error) => console.error(error));
+      .catch((error) => {
+        console.error(error);
+      });
   }, []);
 
-  const getInsights = async (query: string) => {
+  const getInsights = async (insightParams: IInsightsReqParams) => {
     try {
-      return await pplService.fetch(query);
+      return await pplService.fetch(insightParams);
     } catch (error) {
       console.error(error);
     }
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index ecdc438c5..7dfcd0eb8 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -11,6 +11,158 @@ exports[`Config panel component Renders config panel with visualization data 1`]
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -432,7 +584,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -442,7 +594,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -469,7 +621,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -478,7 +630,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
@@ -755,7 +907,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 2,
+                            "defaultState": 0,
                             "eleType": "slider",
                             "mapTo": "lineWidth",
                             "name": "Line width",
@@ -765,7 +917,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 70,
+                            "defaultState": 100,
                             "eleType": "slider",
                             "mapTo": "fillOpacity",
                             "name": "Fill opacity",
@@ -792,7 +944,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   },
                 ],
               },
-              "fillopacity": 70,
+              "fillopacity": 100,
               "fulllabel": "Vertical bar",
               "groupwidth": 0.7,
               "icon": [Function],
@@ -802,7 +954,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "label": "Vertical bar",
               "labelangle": 0,
               "legendposition": "v",
-              "linewidth": 2,
+              "linewidth": 0,
               "mode": "group",
               "name": "bar",
               "orientation": "v",
@@ -1061,7 +1213,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 2,
+                            "defaultState": 0,
                             "eleType": "slider",
                             "mapTo": "lineWidth",
                             "name": "Line width",
@@ -1071,7 +1223,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 70,
+                            "defaultState": 100,
                             "eleType": "slider",
                             "mapTo": "fillOpacity",
                             "name": "Fill opacity",
@@ -1098,7 +1250,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   },
                 ],
               },
-              "fillopacity": 70,
+              "fillopacity": 100,
               "fulllabel": "Horizontal bar",
               "groupwidth": 0.7,
               "icon": [Function],
@@ -1107,7 +1259,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "label": "Horizontal bar",
               "labelangle": 0,
               "legendposition": "v",
-              "linewidth": 2,
+              "linewidth": 0,
               "mode": "group",
               "name": "horizontal_bar",
               "orientation": "h",
@@ -1339,7 +1491,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 2,
+                            "defaultState": 0,
                             "eleType": "slider",
                             "mapTo": "lineWidth",
                             "name": "Line width",
@@ -1349,7 +1501,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 70,
+                            "defaultState": 100,
                             "eleType": "slider",
                             "mapTo": "fillOpacity",
                             "name": "Fill opacity",
@@ -2458,7 +2610,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 2,
+                            "defaultState": 0,
                             "eleType": "slider",
                             "mapTo": "lineWidth",
                             "name": "Line width",
@@ -2468,7 +2620,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 70,
+                            "defaultState": 100,
                             "eleType": "slider",
                             "mapTo": "fillOpacity",
                             "name": "Fill opacity",
@@ -2495,7 +2647,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   },
                 ],
               },
-              "fillopacity": 70,
+              "fillopacity": 100,
               "fulllabel": "Vertical bar",
               "groupwidth": 0.7,
               "icon": [Function],
@@ -2505,7 +2657,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "label": "Vertical bar",
               "labelangle": 0,
               "legendposition": "v",
-              "linewidth": 2,
+              "linewidth": 0,
               "mode": "group",
               "name": "bar",
               "orientation": "v",
@@ -2796,7 +2948,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                               },
                               Object {
                                 "component": [Function],
-                                "defaultState": 2,
+                                "defaultState": 0,
                                 "eleType": "slider",
                                 "mapTo": "lineWidth",
                                 "name": "Line width",
@@ -2806,7 +2958,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                               },
                               Object {
                                 "component": [Function],
-                                "defaultState": 70,
+                                "defaultState": 100,
                                 "eleType": "slider",
                                 "mapTo": "fillOpacity",
                                 "name": "Fill opacity",
@@ -2833,7 +2985,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       },
                     ],
                   },
-                  "fillopacity": 70,
+                  "fillopacity": 100,
                   "fulllabel": "Vertical bar",
                   "groupwidth": 0.7,
                   "icon": [Function],
@@ -2843,7 +2995,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   "label": "Vertical bar",
                   "labelangle": 0,
                   "legendposition": "v",
-                  "linewidth": 2,
+                  "linewidth": 0,
                   "mode": "group",
                   "name": "bar",
                   "orientation": "v",
@@ -3139,7 +3291,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     },
                                     Object {
                                       "component": [Function],
-                                      "defaultState": 2,
+                                      "defaultState": 0,
                                       "eleType": "slider",
                                       "mapTo": "lineWidth",
                                       "name": "Line width",
@@ -3149,7 +3301,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     },
                                     Object {
                                       "component": [Function],
-                                      "defaultState": 70,
+                                      "defaultState": 100,
                                       "eleType": "slider",
                                       "mapTo": "fillOpacity",
                                       "name": "Fill opacity",
@@ -3177,7 +3329,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           ],
                         }
                       }
-                      fillopacity={70}
+                      fillopacity={100}
                       fulllabel="Vertical bar"
                       groupwidth={0.7}
                       icon={[Function]}
@@ -3187,7 +3339,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       key="vertical bar"
                       labelangle={0}
                       legendposition="v"
-                      linewidth={2}
+                      linewidth={0}
                       mode="group"
                       name="bar"
                       option={
@@ -3417,7 +3569,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                       Object {
                                         "component": [Function],
-                                        "defaultState": 2,
+                                        "defaultState": 0,
                                         "eleType": "slider",
                                         "mapTo": "lineWidth",
                                         "name": "Line width",
@@ -3427,7 +3579,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                       Object {
                                         "component": [Function],
-                                        "defaultState": 70,
+                                        "defaultState": 100,
                                         "eleType": "slider",
                                         "mapTo": "fillOpacity",
                                         "name": "Fill opacity",
@@ -3454,7 +3606,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                               },
                             ],
                           },
-                          "fillopacity": 70,
+                          "fillopacity": 100,
                           "fulllabel": "Vertical bar",
                           "groupwidth": 0.7,
                           "icon": [Function],
@@ -3464,7 +3616,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           "label": "Vertical bar",
                           "labelangle": 0,
                           "legendposition": "v",
-                          "linewidth": 2,
+                          "linewidth": 0,
                           "mode": "group",
                           "name": "bar",
                           "orientation": "v",
@@ -3761,7 +3913,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                       Object {
                                         "component": [Function],
-                                        "defaultState": 2,
+                                        "defaultState": 0,
                                         "eleType": "slider",
                                         "mapTo": "lineWidth",
                                         "name": "Line width",
@@ -3771,7 +3923,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                       Object {
                                         "component": [Function],
-                                        "defaultState": 70,
+                                        "defaultState": 100,
                                         "eleType": "slider",
                                         "mapTo": "fillOpacity",
                                         "name": "Fill opacity",
@@ -3799,7 +3951,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             ],
                           }
                         }
-                        fillopacity={70}
+                        fillopacity={100}
                         fulllabel="Vertical bar"
                         groupwidth={0.7}
                         icon={[Function]}
@@ -3808,7 +3960,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         id="bar"
                         labelangle={0}
                         legendposition="v"
-                        linewidth={2}
+                        linewidth={0}
                         mode="group"
                         name="bar"
                         orientation="v"
@@ -4075,7 +4227,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           },
                                           Object {
                                             "component": [Function],
-                                            "defaultState": 2,
+                                            "defaultState": 0,
                                             "eleType": "slider",
                                             "mapTo": "lineWidth",
                                             "name": "Line width",
@@ -4085,7 +4237,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           },
                                           Object {
                                             "component": [Function],
-                                            "defaultState": 70,
+                                            "defaultState": 100,
                                             "eleType": "slider",
                                             "mapTo": "fillOpacity",
                                             "name": "Fill opacity",
@@ -4113,7 +4265,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 ],
                               }
                             }
-                            fillopacity={70}
+                            fillopacity={100}
                             fulllabel="Vertical bar"
                             groupwidth={0.7}
                             icon={[Function]}
@@ -4121,7 +4273,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             id="bar"
                             labelangle={0}
                             legendposition="v"
-                            linewidth={2}
+                            linewidth={0}
                             mode="group"
                             name="bar"
                             orientation="v"
@@ -4557,7 +4709,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 2,
+                          "defaultState": 0,
                           "eleType": "slider",
                           "mapTo": "lineWidth",
                           "name": "Line width",
@@ -4567,7 +4719,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 70,
+                          "defaultState": 100,
                           "eleType": "slider",
                           "mapTo": "fillOpacity",
                           "name": "Fill opacity",
@@ -4594,6 +4746,158 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       "fromApp": false,
                     },
                     "defaultAxes": Object {},
+                    "explorer": Object {
+                      "explorerData": Object {
+                        "jsonData": Array [
+                          Object {
+                            "double_per_ip_bytes": 11606,
+                            "host": "artifacts.opensearch.org",
+                            "ip_count": 176,
+                            "per_ip_bytes": 5803,
+                            "resp_code": "404",
+                            "sum_bytes": 1021420,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 10100,
+                            "host": "www.opensearch.org",
+                            "ip_count": 111,
+                            "per_ip_bytes": 5050,
+                            "resp_code": "404",
+                            "sum_bytes": 560638,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 0,
+                            "host": "artifacts.opensearch.org",
+                            "ip_count": 94,
+                            "per_ip_bytes": 0,
+                            "resp_code": "503",
+                            "sum_bytes": 0,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 0,
+                            "host": "www.opensearch.org",
+                            "ip_count": 78,
+                            "per_ip_bytes": 0,
+                            "resp_code": "503",
+                            "sum_bytes": 0,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 11526,
+                            "host": "cdn.opensearch-opensearch-opensearch.org",
+                            "ip_count": 43,
+                            "per_ip_bytes": 5763,
+                            "resp_code": "404",
+                            "sum_bytes": 247840,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 0,
+                            "host": "cdn.opensearch-opensearch-opensearch.org",
+                            "ip_count": 34,
+                            "per_ip_bytes": 0,
+                            "resp_code": "503",
+                            "sum_bytes": 0,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 8882,
+                            "host": "opensearch-opensearch-opensearch.org",
+                            "ip_count": 13,
+                            "per_ip_bytes": 4441,
+                            "resp_code": "404",
+                            "sum_bytes": 57735,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 0,
+                            "host": "opensearch-opensearch-opensearch.org",
+                            "ip_count": 6,
+                            "per_ip_bytes": 0,
+                            "resp_code": "503",
+                            "sum_bytes": 0,
+                          },
+                        ],
+                        "schema": Array [
+                          Object {
+                            "name": "agent",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "bytes",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "clientip",
+                            "type": "ip",
+                          },
+                          Object {
+                            "name": "event",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "extension",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "geo",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "host",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "index",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "ip",
+                            "type": "ip",
+                          },
+                          Object {
+                            "name": "machine",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "memory",
+                            "type": "double",
+                          },
+                          Object {
+                            "name": "message",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "phpmemory",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "referer",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "request",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "response",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "tags",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "timestamp",
+                            "type": "timestamp",
+                          },
+                          Object {
+                            "name": "url",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "utc_time",
+                            "type": "timestamp",
+                          },
+                        ],
+                      },
+                    },
                     "indexFields": Object {
                       "availableFields": Array [
                         Object {
@@ -5015,7 +5319,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 },
                                 Object {
                                   "component": [Function],
-                                  "defaultState": 2,
+                                  "defaultState": 0,
                                   "eleType": "slider",
                                   "mapTo": "lineWidth",
                                   "name": "Line width",
@@ -5025,7 +5329,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 },
                                 Object {
                                   "component": [Function],
-                                  "defaultState": 70,
+                                  "defaultState": 100,
                                   "eleType": "slider",
                                   "mapTo": "fillOpacity",
                                   "name": "Fill opacity",
@@ -5052,7 +5356,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         },
                       ],
                     },
-                    "fillopacity": 70,
+                    "fillopacity": 100,
                     "fulllabel": "Vertical bar",
                     "groupwidth": 0.7,
                     "icon": [Function],
@@ -5061,7 +5365,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     "label": "Vertical bar",
                     "labelangle": 0,
                     "legendposition": "v",
-                    "linewidth": 2,
+                    "linewidth": 0,
                     "mode": "group",
                     "name": "bar",
                     "orientation": "v",
@@ -5348,7 +5652,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 2,
+                            "defaultState": 0,
                             "eleType": "slider",
                             "mapTo": "lineWidth",
                             "name": "Line width",
@@ -5358,7 +5662,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "component": [Function],
-                            "defaultState": 70,
+                            "defaultState": 100,
                             "eleType": "slider",
                             "mapTo": "fillOpacity",
                             "name": "Fill opacity",
@@ -5385,6 +5689,158 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "fromApp": false,
                       },
                       "defaultAxes": Object {},
+                      "explorer": Object {
+                        "explorerData": Object {
+                          "jsonData": Array [
+                            Object {
+                              "double_per_ip_bytes": 11606,
+                              "host": "artifacts.opensearch.org",
+                              "ip_count": 176,
+                              "per_ip_bytes": 5803,
+                              "resp_code": "404",
+                              "sum_bytes": 1021420,
+                            },
+                            Object {
+                              "double_per_ip_bytes": 10100,
+                              "host": "www.opensearch.org",
+                              "ip_count": 111,
+                              "per_ip_bytes": 5050,
+                              "resp_code": "404",
+                              "sum_bytes": 560638,
+                            },
+                            Object {
+                              "double_per_ip_bytes": 0,
+                              "host": "artifacts.opensearch.org",
+                              "ip_count": 94,
+                              "per_ip_bytes": 0,
+                              "resp_code": "503",
+                              "sum_bytes": 0,
+                            },
+                            Object {
+                              "double_per_ip_bytes": 0,
+                              "host": "www.opensearch.org",
+                              "ip_count": 78,
+                              "per_ip_bytes": 0,
+                              "resp_code": "503",
+                              "sum_bytes": 0,
+                            },
+                            Object {
+                              "double_per_ip_bytes": 11526,
+                              "host": "cdn.opensearch-opensearch-opensearch.org",
+                              "ip_count": 43,
+                              "per_ip_bytes": 5763,
+                              "resp_code": "404",
+                              "sum_bytes": 247840,
+                            },
+                            Object {
+                              "double_per_ip_bytes": 0,
+                              "host": "cdn.opensearch-opensearch-opensearch.org",
+                              "ip_count": 34,
+                              "per_ip_bytes": 0,
+                              "resp_code": "503",
+                              "sum_bytes": 0,
+                            },
+                            Object {
+                              "double_per_ip_bytes": 8882,
+                              "host": "opensearch-opensearch-opensearch.org",
+                              "ip_count": 13,
+                              "per_ip_bytes": 4441,
+                              "resp_code": "404",
+                              "sum_bytes": 57735,
+                            },
+                            Object {
+                              "double_per_ip_bytes": 0,
+                              "host": "opensearch-opensearch-opensearch.org",
+                              "ip_count": 6,
+                              "per_ip_bytes": 0,
+                              "resp_code": "503",
+                              "sum_bytes": 0,
+                            },
+                          ],
+                          "schema": Array [
+                            Object {
+                              "name": "agent",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "bytes",
+                              "type": "long",
+                            },
+                            Object {
+                              "name": "clientip",
+                              "type": "ip",
+                            },
+                            Object {
+                              "name": "event",
+                              "type": "struct",
+                            },
+                            Object {
+                              "name": "extension",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "geo",
+                              "type": "struct",
+                            },
+                            Object {
+                              "name": "host",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "index",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "ip",
+                              "type": "ip",
+                            },
+                            Object {
+                              "name": "machine",
+                              "type": "struct",
+                            },
+                            Object {
+                              "name": "memory",
+                              "type": "double",
+                            },
+                            Object {
+                              "name": "message",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "phpmemory",
+                              "type": "long",
+                            },
+                            Object {
+                              "name": "referer",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "request",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "response",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "tags",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "timestamp",
+                              "type": "timestamp",
+                            },
+                            Object {
+                              "name": "url",
+                              "type": "string",
+                            },
+                            Object {
+                              "name": "utc_time",
+                              "type": "timestamp",
+                            },
+                          ],
+                        },
+                      },
                       "indexFields": Object {
                         "availableFields": Array [
                           Object {
@@ -5806,7 +6262,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   },
                                   Object {
                                     "component": [Function],
-                                    "defaultState": 2,
+                                    "defaultState": 0,
                                     "eleType": "slider",
                                     "mapTo": "lineWidth",
                                     "name": "Line width",
@@ -5816,7 +6272,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   },
                                   Object {
                                     "component": [Function],
-                                    "defaultState": 70,
+                                    "defaultState": 100,
                                     "eleType": "slider",
                                     "mapTo": "fillOpacity",
                                     "name": "Fill opacity",
@@ -5843,7 +6299,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         ],
                       },
-                      "fillopacity": 70,
+                      "fillopacity": 100,
                       "fulllabel": "Vertical bar",
                       "groupwidth": 0.7,
                       "icon": [Function],
@@ -5852,7 +6308,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       "label": "Vertical bar",
                       "labelangle": 0,
                       "legendposition": "v",
-                      "linewidth": 2,
+                      "linewidth": 0,
                       "mode": "group",
                       "name": "bar",
                       "orientation": "v",
@@ -6180,7 +6636,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 2,
+                          "defaultState": 0,
                           "eleType": "slider",
                           "mapTo": "lineWidth",
                           "name": "Line width",
@@ -6190,7 +6646,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         },
                         Object {
                           "component": [Function],
-                          "defaultState": 70,
+                          "defaultState": 100,
                           "eleType": "slider",
                           "mapTo": "fillOpacity",
                           "name": "Fill opacity",
@@ -6217,24 +6673,176 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       "fromApp": false,
                     },
                     "defaultAxes": Object {},
-                    "indexFields": Object {
-                      "availableFields": Array [
-                        Object {
-                          "name": "agent",
-                          "type": "string",
-                        },
-                        Object {
-                          "name": "bytes",
-                          "type": "long",
-                        },
-                        Object {
-                          "name": "clientip",
-                          "type": "ip",
-                        },
-                        Object {
-                          "name": "event",
-                          "type": "struct",
-                        },
+                    "explorer": Object {
+                      "explorerData": Object {
+                        "jsonData": Array [
+                          Object {
+                            "double_per_ip_bytes": 11606,
+                            "host": "artifacts.opensearch.org",
+                            "ip_count": 176,
+                            "per_ip_bytes": 5803,
+                            "resp_code": "404",
+                            "sum_bytes": 1021420,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 10100,
+                            "host": "www.opensearch.org",
+                            "ip_count": 111,
+                            "per_ip_bytes": 5050,
+                            "resp_code": "404",
+                            "sum_bytes": 560638,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 0,
+                            "host": "artifacts.opensearch.org",
+                            "ip_count": 94,
+                            "per_ip_bytes": 0,
+                            "resp_code": "503",
+                            "sum_bytes": 0,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 0,
+                            "host": "www.opensearch.org",
+                            "ip_count": 78,
+                            "per_ip_bytes": 0,
+                            "resp_code": "503",
+                            "sum_bytes": 0,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 11526,
+                            "host": "cdn.opensearch-opensearch-opensearch.org",
+                            "ip_count": 43,
+                            "per_ip_bytes": 5763,
+                            "resp_code": "404",
+                            "sum_bytes": 247840,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 0,
+                            "host": "cdn.opensearch-opensearch-opensearch.org",
+                            "ip_count": 34,
+                            "per_ip_bytes": 0,
+                            "resp_code": "503",
+                            "sum_bytes": 0,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 8882,
+                            "host": "opensearch-opensearch-opensearch.org",
+                            "ip_count": 13,
+                            "per_ip_bytes": 4441,
+                            "resp_code": "404",
+                            "sum_bytes": 57735,
+                          },
+                          Object {
+                            "double_per_ip_bytes": 0,
+                            "host": "opensearch-opensearch-opensearch.org",
+                            "ip_count": 6,
+                            "per_ip_bytes": 0,
+                            "resp_code": "503",
+                            "sum_bytes": 0,
+                          },
+                        ],
+                        "schema": Array [
+                          Object {
+                            "name": "agent",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "bytes",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "clientip",
+                            "type": "ip",
+                          },
+                          Object {
+                            "name": "event",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "extension",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "geo",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "host",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "index",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "ip",
+                            "type": "ip",
+                          },
+                          Object {
+                            "name": "machine",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "memory",
+                            "type": "double",
+                          },
+                          Object {
+                            "name": "message",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "phpmemory",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "referer",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "request",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "response",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "tags",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "timestamp",
+                            "type": "timestamp",
+                          },
+                          Object {
+                            "name": "url",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "utc_time",
+                            "type": "timestamp",
+                          },
+                        ],
+                      },
+                    },
+                    "indexFields": Object {
+                      "availableFields": Array [
+                        Object {
+                          "name": "agent",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "bytes",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "clientip",
+                          "type": "ip",
+                        },
+                        Object {
+                          "name": "event",
+                          "type": "struct",
+                        },
                         Object {
                           "name": "extension",
                           "type": "string",
@@ -6638,7 +7246,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 },
                                 Object {
                                   "component": [Function],
-                                  "defaultState": 2,
+                                  "defaultState": 0,
                                   "eleType": "slider",
                                   "mapTo": "lineWidth",
                                   "name": "Line width",
@@ -6648,7 +7256,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 },
                                 Object {
                                   "component": [Function],
-                                  "defaultState": 70,
+                                  "defaultState": 100,
                                   "eleType": "slider",
                                   "mapTo": "fillOpacity",
                                   "name": "Fill opacity",
@@ -6675,7 +7283,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         },
                       ],
                     },
-                    "fillopacity": 70,
+                    "fillopacity": 100,
                     "fulllabel": "Vertical bar",
                     "groupwidth": 0.7,
                     "icon": [Function],
@@ -6684,7 +7292,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     "label": "Vertical bar",
                     "labelangle": 0,
                     "legendposition": "v",
-                    "linewidth": 2,
+                    "linewidth": 0,
                     "mode": "group",
                     "name": "bar",
                     "orientation": "v",
@@ -6777,6 +7385,158 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "fromApp": false,
                                   },
                                   "defaultAxes": Object {},
+                                  "explorer": Object {
+                                    "explorerData": Object {
+                                      "jsonData": Array [
+                                        Object {
+                                          "double_per_ip_bytes": 11606,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 176,
+                                          "per_ip_bytes": 5803,
+                                          "resp_code": "404",
+                                          "sum_bytes": 1021420,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 10100,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 111,
+                                          "per_ip_bytes": 5050,
+                                          "resp_code": "404",
+                                          "sum_bytes": 560638,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 94,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 78,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 11526,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 43,
+                                          "per_ip_bytes": 5763,
+                                          "resp_code": "404",
+                                          "sum_bytes": 247840,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 34,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 8882,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 13,
+                                          "per_ip_bytes": 4441,
+                                          "resp_code": "404",
+                                          "sum_bytes": 57735,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 6,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                      ],
+                                      "schema": Array [
+                                        Object {
+                                          "name": "agent",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "bytes",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "clientip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "event",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "extension",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "geo",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "host",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "index",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "ip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "machine",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "memory",
+                                          "type": "double",
+                                        },
+                                        Object {
+                                          "name": "message",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "phpmemory",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "referer",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "request",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "response",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "timestamp",
+                                          "type": "timestamp",
+                                        },
+                                        Object {
+                                          "name": "url",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "utc_time",
+                                          "type": "timestamp",
+                                        },
+                                      ],
+                                    },
+                                  },
                                   "indexFields": Object {
                                     "availableFields": Array [
                                       Object {
@@ -7198,7 +7958,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 2,
+                                                "defaultState": 0,
                                                 "eleType": "slider",
                                                 "mapTo": "lineWidth",
                                                 "name": "Line width",
@@ -7208,7 +7968,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 70,
+                                                "defaultState": 100,
                                                 "eleType": "slider",
                                                 "mapTo": "fillOpacity",
                                                 "name": "Fill opacity",
@@ -7235,7 +7995,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                     ],
                                   },
-                                  "fillopacity": 70,
+                                  "fillopacity": 100,
                                   "fulllabel": "Vertical bar",
                                   "groupwidth": 0.7,
                                   "icon": [Function],
@@ -7244,7 +8004,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "label": "Vertical bar",
                                   "labelangle": 0,
                                   "legendposition": "v",
-                                  "linewidth": 2,
+                                  "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
                                   "orientation": "v",
@@ -7604,6 +8364,158 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "fromApp": false,
                                   },
                                   "defaultAxes": Object {},
+                                  "explorer": Object {
+                                    "explorerData": Object {
+                                      "jsonData": Array [
+                                        Object {
+                                          "double_per_ip_bytes": 11606,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 176,
+                                          "per_ip_bytes": 5803,
+                                          "resp_code": "404",
+                                          "sum_bytes": 1021420,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 10100,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 111,
+                                          "per_ip_bytes": 5050,
+                                          "resp_code": "404",
+                                          "sum_bytes": 560638,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 94,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 78,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 11526,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 43,
+                                          "per_ip_bytes": 5763,
+                                          "resp_code": "404",
+                                          "sum_bytes": 247840,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 34,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 8882,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 13,
+                                          "per_ip_bytes": 4441,
+                                          "resp_code": "404",
+                                          "sum_bytes": 57735,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 6,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                      ],
+                                      "schema": Array [
+                                        Object {
+                                          "name": "agent",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "bytes",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "clientip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "event",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "extension",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "geo",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "host",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "index",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "ip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "machine",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "memory",
+                                          "type": "double",
+                                        },
+                                        Object {
+                                          "name": "message",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "phpmemory",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "referer",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "request",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "response",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "timestamp",
+                                          "type": "timestamp",
+                                        },
+                                        Object {
+                                          "name": "url",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "utc_time",
+                                          "type": "timestamp",
+                                        },
+                                      ],
+                                    },
+                                  },
                                   "indexFields": Object {
                                     "availableFields": Array [
                                       Object {
@@ -8025,7 +8937,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 2,
+                                                "defaultState": 0,
                                                 "eleType": "slider",
                                                 "mapTo": "lineWidth",
                                                 "name": "Line width",
@@ -8035,7 +8947,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 70,
+                                                "defaultState": 100,
                                                 "eleType": "slider",
                                                 "mapTo": "fillOpacity",
                                                 "name": "Fill opacity",
@@ -8062,7 +8974,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                     ],
                                   },
-                                  "fillopacity": 70,
+                                  "fillopacity": 100,
                                   "fulllabel": "Vertical bar",
                                   "groupwidth": 0.7,
                                   "icon": [Function],
@@ -8071,7 +8983,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "label": "Vertical bar",
                                   "labelangle": 0,
                                   "legendposition": "v",
-                                  "linewidth": 2,
+                                  "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
                                   "orientation": "v",
@@ -8930,6 +9842,158 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "fromApp": false,
                                   },
                                   "defaultAxes": Object {},
+                                  "explorer": Object {
+                                    "explorerData": Object {
+                                      "jsonData": Array [
+                                        Object {
+                                          "double_per_ip_bytes": 11606,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 176,
+                                          "per_ip_bytes": 5803,
+                                          "resp_code": "404",
+                                          "sum_bytes": 1021420,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 10100,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 111,
+                                          "per_ip_bytes": 5050,
+                                          "resp_code": "404",
+                                          "sum_bytes": 560638,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 94,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 78,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 11526,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 43,
+                                          "per_ip_bytes": 5763,
+                                          "resp_code": "404",
+                                          "sum_bytes": 247840,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 34,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 8882,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 13,
+                                          "per_ip_bytes": 4441,
+                                          "resp_code": "404",
+                                          "sum_bytes": 57735,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 6,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                      ],
+                                      "schema": Array [
+                                        Object {
+                                          "name": "agent",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "bytes",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "clientip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "event",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "extension",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "geo",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "host",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "index",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "ip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "machine",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "memory",
+                                          "type": "double",
+                                        },
+                                        Object {
+                                          "name": "message",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "phpmemory",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "referer",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "request",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "response",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "timestamp",
+                                          "type": "timestamp",
+                                        },
+                                        Object {
+                                          "name": "url",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "utc_time",
+                                          "type": "timestamp",
+                                        },
+                                      ],
+                                    },
+                                  },
                                   "indexFields": Object {
                                     "availableFields": Array [
                                       Object {
@@ -9351,7 +10415,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 2,
+                                                "defaultState": 0,
                                                 "eleType": "slider",
                                                 "mapTo": "lineWidth",
                                                 "name": "Line width",
@@ -9361,7 +10425,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 70,
+                                                "defaultState": 100,
                                                 "eleType": "slider",
                                                 "mapTo": "fillOpacity",
                                                 "name": "Fill opacity",
@@ -9388,7 +10452,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                     ],
                                   },
-                                  "fillopacity": 70,
+                                  "fillopacity": 100,
                                   "fulllabel": "Vertical bar",
                                   "groupwidth": 0.7,
                                   "icon": [Function],
@@ -9397,7 +10461,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "label": "Vertical bar",
                                   "labelangle": 0,
                                   "legendposition": "v",
-                                  "linewidth": 2,
+                                  "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
                                   "orientation": "v",
@@ -10248,7 +11312,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 },
                                 Object {
                                   "component": [Function],
-                                  "defaultState": 2,
+                                  "defaultState": 0,
                                   "eleType": "slider",
                                   "mapTo": "lineWidth",
                                   "name": "Line width",
@@ -10258,7 +11322,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 },
                                 Object {
                                   "component": [Function],
-                                  "defaultState": 70,
+                                  "defaultState": 100,
                                   "eleType": "slider",
                                   "mapTo": "fillOpacity",
                                   "name": "Fill opacity",
@@ -10277,6 +11341,158 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "fromApp": false,
                                   },
                                   "defaultAxes": Object {},
+                                  "explorer": Object {
+                                    "explorerData": Object {
+                                      "jsonData": Array [
+                                        Object {
+                                          "double_per_ip_bytes": 11606,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 176,
+                                          "per_ip_bytes": 5803,
+                                          "resp_code": "404",
+                                          "sum_bytes": 1021420,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 10100,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 111,
+                                          "per_ip_bytes": 5050,
+                                          "resp_code": "404",
+                                          "sum_bytes": 560638,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 94,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 78,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 11526,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 43,
+                                          "per_ip_bytes": 5763,
+                                          "resp_code": "404",
+                                          "sum_bytes": 247840,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 34,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 8882,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 13,
+                                          "per_ip_bytes": 4441,
+                                          "resp_code": "404",
+                                          "sum_bytes": 57735,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 6,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                      ],
+                                      "schema": Array [
+                                        Object {
+                                          "name": "agent",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "bytes",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "clientip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "event",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "extension",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "geo",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "host",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "index",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "ip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "machine",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "memory",
+                                          "type": "double",
+                                        },
+                                        Object {
+                                          "name": "message",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "phpmemory",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "referer",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "request",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "response",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "timestamp",
+                                          "type": "timestamp",
+                                        },
+                                        Object {
+                                          "name": "url",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "utc_time",
+                                          "type": "timestamp",
+                                        },
+                                      ],
+                                    },
+                                  },
                                   "indexFields": Object {
                                     "availableFields": Array [
                                       Object {
@@ -10698,7 +11914,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 2,
+                                                "defaultState": 0,
                                                 "eleType": "slider",
                                                 "mapTo": "lineWidth",
                                                 "name": "Line width",
@@ -10708,7 +11924,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 70,
+                                                "defaultState": 100,
                                                 "eleType": "slider",
                                                 "mapTo": "fillOpacity",
                                                 "name": "Fill opacity",
@@ -10735,7 +11951,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                     ],
                                   },
-                                  "fillopacity": 70,
+                                  "fillopacity": 100,
                                   "fulllabel": "Vertical bar",
                                   "groupwidth": 0.7,
                                   "icon": [Function],
@@ -10744,7 +11960,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "label": "Vertical bar",
                                   "labelangle": 0,
                                   "legendposition": "v",
-                                  "linewidth": 2,
+                                  "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
                                   "orientation": "v",
@@ -12667,7 +13883,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           />
                                         </EuiSpacer>
                                         <SliderConfig
-                                          currentRange={2}
+                                          currentRange={0}
                                           handleSliderChange={[Function]}
                                           max={10}
                                           maxRange={10}
@@ -12764,7 +13980,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             showTicks={false}
                                             showValue={false}
                                             step={1}
-                                            value={2}
+                                            value={0}
                                           >
                                             <EuiRangeWrapper
                                               className="euiRange euiRange--hasInput"
@@ -12783,7 +13999,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   onChange={[Function]}
                                                   showTicks={false}
                                                   step={1}
-                                                  value={2}
+                                                  value={0}
                                                 >
                                                   <div
                                                     aria-hidden={true}
@@ -12801,7 +14017,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                       showTicks={false}
                                                       step={1}
                                                       tabIndex={-1}
-                                                      value={2}
+                                                      value={0}
                                                     >
                                                       <input
                                                         aria-hidden={true}
@@ -12814,7 +14030,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                         step={1}
                                                         tabIndex={-1}
                                                         type="range"
-                                                        value={2}
+                                                        value={0}
                                                       />
                                                     </EuiRangeSlider>
                                                   </div>
@@ -12835,7 +14051,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   name="Line width"
                                                   onChange={[Function]}
                                                   step={1}
-                                                  value={2}
+                                                  value={0}
                                                 >
                                                   <EuiFieldNumber
                                                     aria-label="change lineWidth slider"
@@ -12854,7 +14070,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                         "width": "3.6em",
                                                       }
                                                     }
-                                                    value={2}
+                                                    value={0}
                                                   >
                                                     <EuiFormControlLayout
                                                       compressed={true}
@@ -12884,7 +14100,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                                 }
                                                               }
                                                               type="number"
-                                                              value={2}
+                                                              value={0}
                                                             />
                                                           </EuiValidatableControl>
                                                           <EuiFormControlLayoutIcons
@@ -12908,7 +14124,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           />
                                         </EuiSpacer>
                                         <SliderConfig
-                                          currentRange={70}
+                                          currentRange={100}
                                           handleSliderChange={[Function]}
                                           max={100}
                                           maxRange={100}
@@ -13005,7 +14221,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             showTicks={false}
                                             showValue={false}
                                             step={1}
-                                            value={70}
+                                            value={100}
                                           >
                                             <EuiRangeWrapper
                                               className="euiRange euiRange--hasInput"
@@ -13024,7 +14240,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   onChange={[Function]}
                                                   showTicks={false}
                                                   step={1}
-                                                  value={70}
+                                                  value={100}
                                                 >
                                                   <div
                                                     aria-hidden={true}
@@ -13042,7 +14258,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                       showTicks={false}
                                                       step={1}
                                                       tabIndex={-1}
-                                                      value={70}
+                                                      value={100}
                                                     >
                                                       <input
                                                         aria-hidden={true}
@@ -13055,7 +14271,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                         step={1}
                                                         tabIndex={-1}
                                                         type="range"
-                                                        value={70}
+                                                        value={100}
                                                       />
                                                     </EuiRangeSlider>
                                                   </div>
@@ -13076,7 +14292,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   name="Fill opacity"
                                                   onChange={[Function]}
                                                   step={1}
-                                                  value={70}
+                                                  value={100}
                                                 >
                                                   <EuiFieldNumber
                                                     aria-label="change lineWidth slider"
@@ -13095,7 +14311,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                         "width": "4.4em",
                                                       }
                                                     }
-                                                    value={70}
+                                                    value={100}
                                                   >
                                                     <EuiFormControlLayout
                                                       compressed={true}
@@ -13125,7 +14341,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                                 }
                                                               }
                                                               type="number"
-                                                              value={70}
+                                                              value={100}
                                                             />
                                                           </EuiValidatableControl>
                                                           <EuiFormControlLayoutIcons
@@ -13189,6 +14405,158 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "fromApp": false,
                                   },
                                   "defaultAxes": Object {},
+                                  "explorer": Object {
+                                    "explorerData": Object {
+                                      "jsonData": Array [
+                                        Object {
+                                          "double_per_ip_bytes": 11606,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 176,
+                                          "per_ip_bytes": 5803,
+                                          "resp_code": "404",
+                                          "sum_bytes": 1021420,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 10100,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 111,
+                                          "per_ip_bytes": 5050,
+                                          "resp_code": "404",
+                                          "sum_bytes": 560638,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "artifacts.opensearch.org",
+                                          "ip_count": 94,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "www.opensearch.org",
+                                          "ip_count": 78,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 11526,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 43,
+                                          "per_ip_bytes": 5763,
+                                          "resp_code": "404",
+                                          "sum_bytes": 247840,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "cdn.opensearch-opensearch-opensearch.org",
+                                          "ip_count": 34,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 8882,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 13,
+                                          "per_ip_bytes": 4441,
+                                          "resp_code": "404",
+                                          "sum_bytes": 57735,
+                                        },
+                                        Object {
+                                          "double_per_ip_bytes": 0,
+                                          "host": "opensearch-opensearch-opensearch.org",
+                                          "ip_count": 6,
+                                          "per_ip_bytes": 0,
+                                          "resp_code": "503",
+                                          "sum_bytes": 0,
+                                        },
+                                      ],
+                                      "schema": Array [
+                                        Object {
+                                          "name": "agent",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "bytes",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "clientip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "event",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "extension",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "geo",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "host",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "index",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "ip",
+                                          "type": "ip",
+                                        },
+                                        Object {
+                                          "name": "machine",
+                                          "type": "struct",
+                                        },
+                                        Object {
+                                          "name": "memory",
+                                          "type": "double",
+                                        },
+                                        Object {
+                                          "name": "message",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "phpmemory",
+                                          "type": "long",
+                                        },
+                                        Object {
+                                          "name": "referer",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "request",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "response",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "timestamp",
+                                          "type": "timestamp",
+                                        },
+                                        Object {
+                                          "name": "url",
+                                          "type": "string",
+                                        },
+                                        Object {
+                                          "name": "utc_time",
+                                          "type": "timestamp",
+                                        },
+                                      ],
+                                    },
+                                  },
                                   "indexFields": Object {
                                     "availableFields": Array [
                                       Object {
@@ -13610,7 +14978,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 2,
+                                                "defaultState": 0,
                                                 "eleType": "slider",
                                                 "mapTo": "lineWidth",
                                                 "name": "Line width",
@@ -13620,7 +14988,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               },
                                               Object {
                                                 "component": [Function],
-                                                "defaultState": 70,
+                                                "defaultState": 100,
                                                 "eleType": "slider",
                                                 "mapTo": "fillOpacity",
                                                 "name": "Fill opacity",
@@ -13647,7 +15015,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       },
                                     ],
                                   },
-                                  "fillopacity": 70,
+                                  "fillopacity": 100,
                                   "fulllabel": "Vertical bar",
                                   "groupwidth": 0.7,
                                   "icon": [Function],
@@ -13656,7 +15024,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "label": "Vertical bar",
                                   "labelangle": 0,
                                   "legendposition": "v",
-                                  "linewidth": 2,
+                                  "linewidth": 0,
                                   "mode": "group",
                                   "name": "bar",
                                   "orientation": "v",
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 b8ac5343d..e5374811e 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
@@ -47,7 +47,6 @@ import {
 import { TabContext, useRenderVisualization } from '../../../../../hooks';
 import { DataConfigItemClickPanel } from '../config_controls/data_config_item_click_panel';
 import { DataConfigPanelFields } from '../config_controls/data_config_panel_fields';
-import { ButtonGroupItem } from './config_button_group';
 import { composeFinalQuery } from '../../../../../../../../common/utils';
 
 const initialDimensionEntry = {
@@ -285,9 +284,9 @@ export const DataConfigPanelItem = ({
     handleQueryChange(newQueryString);
     getVisualizations({
       query: nextQueryState[FINAL_QUERY],
-      callback: (res) => {
+      successCallback: (res) => {
         updateVisUIState({
-          visData: res,
+          visData: { ...res },
           queryState: nextQueryState,
           visConfMetadata: {
             ...configList,
@@ -297,6 +296,7 @@ export const DataConfigPanelItem = ({
           },
         });
       },
+      errorCallback: (err) => {},
     });
   }, [configList, query, visualizations]);
 
diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
index a5fdd3f00..6beea57c1 100644
--- a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
@@ -31,7 +31,7 @@ export function WorkspacePanel({ visualizations }: IWorkSpacePanel) {
           className="ws__visCanvasControl--switch"
           label="Table view"
           type="button"
-          disabled={isEmpty(visualizations?.data?.rawVizData)}
+          disabled={isEmpty(visualizations?.data?.explorer?.explorerData)}
           checked={isTableViewOn}
           onChange={() => {
             setIsTableViewOn((staleState) => !staleState);
diff --git a/public/components/event_analytics/hooks/use_fetch_visualizations.ts b/public/components/event_analytics/hooks/use_fetch_visualizations.ts
index 1586bb768..8ef331d64 100644
--- a/public/components/event_analytics/hooks/use_fetch_visualizations.ts
+++ b/public/components/event_analytics/hooks/use_fetch_visualizations.ts
@@ -8,7 +8,6 @@ import { batch, useDispatch, useSelector } from 'react-redux';
 import {
   FINAL_QUERY,
   QUERIED_FIELDS,
-  RAW_QUERY,
   SELECTED_FIELDS,
   SELECTED_TIMESTAMP,
 } from '../../../../common/constants/explorer';
@@ -18,7 +17,7 @@ import { render as renderExplorerVis } from '../redux/slices/visualization_slice
 import { updateFields, sortFields } from '../redux/slices/field_slice';
 import PPLService from '../../../services/requests/ppl';
 import { fetchSuccess } from '../redux/slices/query_result_slice';
-import { setPatterns, reset as patternsReset } from '../redux/slices/patterns_slice';
+import { reset as patternsReset } from '../redux/slices/patterns_slice';
 
 interface IFetchVisualizationsParams {
   pplService: PPLService;
@@ -44,19 +43,22 @@ export const useFetchVisualizations = ({
     setIsVisLoading(true);
 
     await pplService
-      .fetch({
-        query,
-        format,
-      }, (error) => {
-        errorHandler(error);
-        setIsVisLoading(false);
-      })
+      .fetch(
+        {
+          query,
+          format,
+        },
+        (error) => {
+          errorHandler(error);
+          setIsVisLoading(false);
+        }
+      )
       .then((res: any) => {
         if (res && res.status === 200) {
           successHandler(res);
         }
         setIsVisLoading(false);
-      })
+      });
   };
 
   const getCountVisualizations = (interval: string) => {
diff --git a/public/components/event_analytics/hooks/use_render_visualizations.ts b/public/components/event_analytics/hooks/use_render_visualizations.ts
index 09aec4146..13a593d59 100644
--- a/public/components/event_analytics/hooks/use_render_visualizations.ts
+++ b/public/components/event_analytics/hooks/use_render_visualizations.ts
@@ -6,15 +6,15 @@
 import { batch, useDispatch } from 'react-redux';
 import { VisualizationState } from 'common/types/explorer';
 import { updateFields, sortFields } from '../redux/slices/field_slice';
-import { render as renderExplorerVis } from '../redux/slices/visualization_slice';
 import { fetchSuccess } from '../redux/slices/query_result_slice';
 import { QUERIED_FIELDS, SELECTED_FIELDS } from '../../../../common/constants/explorer';
 import { change as changeVizConfig } from '../redux/slices/viualization_config_slice';
 import { changeQuery } from '../redux/slices/query_slice';
 
-export interface IVisualizationParams {
+export interface IVisFetchParams {
   query: string;
-  callback: (res: any) => void | null;
+  successCallback: (res: any) => any;
+  errorCallback: (err: any) => any;
 }
 
 export const useRenderVisualization = ({ pplService, requestParams }) => {
@@ -26,38 +26,23 @@ export const useRenderVisualization = ({ pplService, requestParams }) => {
     errorHandler: (error: any) => void
   ) => {
     await pplService
-      .fetch(
-        {
-          query,
-          format,
-        },
-        (error) => {
-          errorHandler(error);
-        }
-      )
+      .fetch({ query, format }, (error) => {
+        errorHandler(error);
+      })
       .then((res: any) => {
-        if (res && res.status === 200) {
-          successHandler(res);
-        }
+        successHandler(res);
       });
   };
 
-  const getVisualizations = ({ query, callback }: IVisualizationParams) => {
+  const getVisualizations = ({ query, successCallback, errorCallback }: IVisFetchParams) => {
     fetchVisualizations(
-      {
-        query,
-      },
-      'viz',
+      { query },
+      'jdbc',
       (res: any) => {
-        if (callback) callback(res);
+        successCallback(res);
       },
       (error: any) => {
-        dispatch(
-          renderExplorerVis({
-            tabId: requestParams.tabId,
-            data: error.body,
-          })
-        );
+        errorCallback(error);
       }
     );
   };
@@ -77,20 +62,12 @@ export const useRenderVisualization = ({ pplService, requestParams }) => {
         })
       );
 
-      // explorerVisualization
-      dispatch(
-        renderExplorerVis({
-          tabId: requestParams.tabId,
-          data: visData,
-        })
-      );
-
       // queryResults
       dispatch(
         fetchSuccess({
           tabId: requestParams.tabId,
           data: {
-            jsonData: visData?.jsonData || {},
+            ...visData,
           },
         })
       );
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index fe08d905c..bbc5c3cab 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -447,7 +599,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -457,7 +609,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -484,7 +636,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -493,7 +645,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap
index 98c317106..1916bc206 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap
@@ -7,14 +7,180 @@ exports[`Data table component Renders data table component 1`] = `
     columnDefs={
       Array [
         Object {
-          "colId": "count()",
+          "colId": "agent",
           "columnsMenuParams": Object {
             "suppressColumnExpandAll": true,
             "suppressColumnFilter": true,
             "suppressColumnSelectAll": true,
           },
-          "field": "count()",
-          "headerName": "count()",
+          "field": "agent",
+          "headerName": "agent",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "bytes",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "bytes",
+          "headerName": "bytes",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "clientip",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "clientip",
+          "headerName": "clientip",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "event",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "event",
+          "headerName": "event",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "extension",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "extension",
+          "headerName": "extension",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "geo",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "geo",
+          "headerName": "geo",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "host",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "host",
+          "headerName": "host",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "index",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "index",
+          "headerName": "index",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "ip",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "ip",
+          "headerName": "ip",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "machine",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "machine",
+          "headerName": "machine",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "memory",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "memory",
+          "headerName": "memory",
+          "lockVisible": true,
+          "valueGetter": [Function],
+        },
+        Object {
+          "colId": "message",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "message",
+          "headerName": "message",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "phpmemory",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "phpmemory",
+          "headerName": "phpmemory",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "referer",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "referer",
+          "headerName": "referer",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "request",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "request",
+          "headerName": "request",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "response",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "response",
+          "headerName": "response",
           "lockVisible": true,
         },
         Object {
@@ -28,6 +194,39 @@ exports[`Data table component Renders data table component 1`] = `
           "headerName": "tags",
           "lockVisible": true,
         },
+        Object {
+          "colId": "timestamp",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "timestamp",
+          "headerName": "timestamp",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "url",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "url",
+          "headerName": "url",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "utc_time",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "utc_time",
+          "headerName": "utc_time",
+          "lockVisible": true,
+        },
       ]
     }
     defaultColDef={
@@ -48,28 +247,68 @@ exports[`Data table component Renders data table component 1`] = `
     rowData={
       Array [
         Object {
-          "count()": 154,
-          "tags": "error",
+          "double_per_ip_bytes": 11606,
+          "host": "artifacts.opensearch.org",
+          "ip_count": 176,
+          "per_ip_bytes": 5803,
+          "resp_code": "404",
+          "sum_bytes": 1021420,
+        },
+        Object {
+          "double_per_ip_bytes": 10100,
+          "host": "www.opensearch.org",
+          "ip_count": 111,
+          "per_ip_bytes": 5050,
+          "resp_code": "404",
+          "sum_bytes": 560638,
+        },
+        Object {
+          "double_per_ip_bytes": 0,
+          "host": "artifacts.opensearch.org",
+          "ip_count": 94,
+          "per_ip_bytes": 0,
+          "resp_code": "503",
+          "sum_bytes": 0,
         },
         Object {
-          "count()": 1753,
-          "tags": "info",
+          "double_per_ip_bytes": 0,
+          "host": "www.opensearch.org",
+          "ip_count": 78,
+          "per_ip_bytes": 0,
+          "resp_code": "503",
+          "sum_bytes": 0,
         },
         Object {
-          "count()": 116,
-          "tags": "login",
+          "double_per_ip_bytes": 11526,
+          "host": "cdn.opensearch-opensearch-opensearch.org",
+          "ip_count": 43,
+          "per_ip_bytes": 5763,
+          "resp_code": "404",
+          "sum_bytes": 247840,
         },
         Object {
-          "count()": 468,
-          "tags": "security",
+          "double_per_ip_bytes": 0,
+          "host": "cdn.opensearch-opensearch-opensearch.org",
+          "ip_count": 34,
+          "per_ip_bytes": 0,
+          "resp_code": "503",
+          "sum_bytes": 0,
         },
         Object {
-          "count()": 1964,
-          "tags": "success",
+          "double_per_ip_bytes": 8882,
+          "host": "opensearch-opensearch-opensearch.org",
+          "ip_count": 13,
+          "per_ip_bytes": 4441,
+          "resp_code": "404",
+          "sum_bytes": 57735,
         },
         Object {
-          "count()": 219,
-          "tags": "warning",
+          "double_per_ip_bytes": 0,
+          "host": "opensearch-opensearch-opensearch.org",
+          "ip_count": 6,
+          "per_ip_bytes": 0,
+          "resp_code": "503",
+          "sum_bytes": 0,
         },
       ]
     }
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
index 70e513288..26727a324 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Gauge component Renders gauge component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
index 967f3492e..b14ca0589 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -17,6 +17,10 @@ exports[`Heatmap component Renders heatmap component 1`] = `
         "t": 30,
       },
       "showlegend": true,
+      "yaxis": Object {
+        "automargin": true,
+        "autosize": true,
+      },
     }
   }
   visualizations={
@@ -26,6 +30,158 @@ exports[`Heatmap component Renders heatmap component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -447,7 +603,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -457,7 +613,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -484,7 +640,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -493,7 +649,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
@@ -529,75 +685,132 @@ exports[`Heatmap component Renders heatmap component 1`] = `
     }
   }
 >
-  <VisCanvassPlaceholder
-    icon="visBarVerticalStacked"
-    message="Invalid data, heatmap can only have exact 2 dimensions and 1 series"
+  <Plt
+    config={Object {}}
+    data={
+      Array [
+        Object {
+          "colorscale": "Reds",
+          "hoverinfo": "all",
+          "showscale": true,
+          "type": "heatmap",
+          "x": Array [
+            undefined,
+          ],
+          "y": Array [
+            undefined,
+          ],
+          "z": Array [
+            Array [
+              undefined,
+            ],
+          ],
+        },
+      ]
+    }
+    layout={
+      Object {
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "height": 220,
+        "margin": Object {
+          "b": 30,
+          "l": 30,
+          "pad": 4,
+          "r": 5,
+          "t": 50,
+        },
+        "showlegend": true,
+        "title": "",
+        "yaxis": Object {
+          "automargin": true,
+          "autosize": true,
+        },
+      }
+    }
   >
-    <EuiText
-      className="lnsChart__empty"
-      color="subdued"
-      data-test-subj="vizWorkspace__noData"
-      size="xs"
-      textAlign="center"
+    <PlotlyComponent
+      config={
+        Object {
+          "displayModeBar": false,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "colorscale": "Reds",
+            "hoverinfo": "all",
+            "showscale": true,
+            "type": "heatmap",
+            "x": Array [
+              undefined,
+            ],
+            "y": Array [
+              undefined,
+            ],
+            "z": Array [
+              Array [
+                undefined,
+              ],
+            ],
+          },
+        ]
+      }
+      debug={false}
+      divId="explorerPlotComponent"
+      layout={
+        Object {
+          "autosize": true,
+          "barmode": "stack",
+          "colorway": Array [
+            "#8C55A3",
+          ],
+          "height": 220,
+          "hovermode": "closest",
+          "legend": Object {
+            "orientation": "h",
+            "traceorder": "normal",
+          },
+          "margin": Object {
+            "b": 30,
+            "l": 30,
+            "pad": 4,
+            "r": 5,
+            "t": 50,
+          },
+          "showlegend": true,
+          "title": "",
+          "xaxis": Object {
+            "automargin": true,
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "automargin": true,
+            "autosize": true,
+          },
+        }
+      }
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+      useResizeHandler={true}
     >
       <div
-        className="euiText euiText--extraSmall lnsChart__empty"
-        data-test-subj="vizWorkspace__noData"
-      >
-        <EuiTextAlign
-          textAlign="center"
-        >
-          <div
-            className="euiTextAlign euiTextAlign--center"
-          >
-            <EuiTextColor
-              color="subdued"
-              component="div"
-            >
-              <div
-                className="euiTextColor euiTextColor--subdued"
-              >
-                <EuiIcon
-                  color="subdued"
-                  size="xxl"
-                  type="visBarVerticalStacked"
-                >
-                  <EuiIconEmpty
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
-                    focusable="false"
-                    role="img"
-                    style={null}
-                  >
-                    <svg
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
-                      focusable="false"
-                      height={16}
-                      role="img"
-                      style={null}
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    />
-                  </EuiIconEmpty>
-                </EuiIcon>
-                <EuiSpacer
-                  size="l"
-                >
-                  <div
-                    className="euiSpacer euiSpacer--l"
-                  />
-                </EuiSpacer>
-                <p>
-                  Invalid data, heatmap can only have exact 2 dimensions and 1 series
-                </p>
-              </div>
-            </EuiTextColor>
-          </div>
-        </EuiTextAlign>
-      </div>
-    </EuiText>
-  </VisCanvassPlaceholder>
+        id="explorerPlotComponent"
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      />
+    </PlotlyComponent>
+  </Plt>
 </HeatMap>
 `;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
index 419ff3c03..9710a1000 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Histogram component Renders histogram component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -447,7 +599,7 @@ exports[`Histogram component Renders histogram component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -457,7 +609,7 @@ exports[`Histogram component Renders histogram component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -484,7 +636,7 @@ exports[`Histogram component Renders histogram component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -493,7 +645,7 @@ exports[`Histogram component Renders histogram component 1`] = `
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
@@ -536,10 +688,10 @@ exports[`Histogram component Renders histogram component 1`] = `
         Object {
           "hoverinfo": "all",
           "marker": Object {
-            "color": "rgba(60,161,199,0.35)",
+            "color": "rgba(60,161,199,0.5)",
             "line": Object {
               "color": "rgba(60,161,199,1)",
-              "width": 2,
+              "width": 0,
             },
           },
           "name": "count()",
@@ -589,10 +741,10 @@ exports[`Histogram component Renders histogram component 1`] = `
           Object {
             "hoverinfo": "all",
             "marker": Object {
-              "color": "rgba(60,161,199,0.35)",
+              "color": "rgba(60,161,199,0.5)",
               "line": Object {
                 "color": "rgba(60,161,199,1)",
-                "width": 2,
+                "width": 0,
               },
             },
             "name": "count()",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
index e9a120c07..0049049be 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -447,7 +599,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -457,7 +609,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -484,7 +636,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Horizontal bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -493,7 +645,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
         "label": "Horizontal bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "horizontal_bar",
         "orientation": "h",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index c87a070c8..8a495d3f9 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Line component Renders line component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -447,7 +599,7 @@ exports[`Line component Renders line component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -457,7 +609,7 @@ exports[`Line component Renders line component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -484,7 +636,7 @@ exports[`Line component Renders line component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -493,7 +645,7 @@ exports[`Line component Renders line component 1`] = `
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
index cd618eefc..b1885bd3d 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Logs View component Renders logs view component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -447,7 +599,7 @@ exports[`Logs View component Renders logs view component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -457,7 +609,7 @@ exports[`Logs View component Renders logs view component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -484,7 +636,7 @@ exports[`Logs View component Renders logs view component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -493,7 +645,7 @@ exports[`Logs View component Renders logs view component 1`] = `
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
@@ -542,7 +694,74 @@ exports[`Logs View component Renders logs view component 1`] = `
         }
       }
       rawQuery=""
-      rows={Array []}
+      rows={
+        Array [
+          Object {
+            "double_per_ip_bytes": 11606,
+            "host": "artifacts.opensearch.org",
+            "ip_count": 176,
+            "per_ip_bytes": 5803,
+            "resp_code": "404",
+            "sum_bytes": 1021420,
+          },
+          Object {
+            "double_per_ip_bytes": 10100,
+            "host": "www.opensearch.org",
+            "ip_count": 111,
+            "per_ip_bytes": 5050,
+            "resp_code": "404",
+            "sum_bytes": 560638,
+          },
+          Object {
+            "double_per_ip_bytes": 0,
+            "host": "artifacts.opensearch.org",
+            "ip_count": 94,
+            "per_ip_bytes": 0,
+            "resp_code": "503",
+            "sum_bytes": 0,
+          },
+          Object {
+            "double_per_ip_bytes": 0,
+            "host": "www.opensearch.org",
+            "ip_count": 78,
+            "per_ip_bytes": 0,
+            "resp_code": "503",
+            "sum_bytes": 0,
+          },
+          Object {
+            "double_per_ip_bytes": 11526,
+            "host": "cdn.opensearch-opensearch-opensearch.org",
+            "ip_count": 43,
+            "per_ip_bytes": 5763,
+            "resp_code": "404",
+            "sum_bytes": 247840,
+          },
+          Object {
+            "double_per_ip_bytes": 0,
+            "host": "cdn.opensearch-opensearch-opensearch.org",
+            "ip_count": 34,
+            "per_ip_bytes": 0,
+            "resp_code": "503",
+            "sum_bytes": 0,
+          },
+          Object {
+            "double_per_ip_bytes": 8882,
+            "host": "opensearch-opensearch-opensearch.org",
+            "ip_count": 13,
+            "per_ip_bytes": 4441,
+            "resp_code": "404",
+            "sum_bytes": 57735,
+          },
+          Object {
+            "double_per_ip_bytes": 0,
+            "host": "opensearch-opensearch-opensearch.org",
+            "ip_count": 6,
+            "per_ip_bytes": 0,
+            "resp_code": "503",
+            "sum_bytes": 0,
+          },
+        ]
+      }
       rowsAll={Array []}
       timeStampField=""
     >
@@ -572,7 +791,1360 @@ exports[`Logs View component Renders logs view component 1`] = `
               </th>
             </tr>
           </thead>
-          <tbody />
+          <tbody>
+            <ForwardRef
+              doc={
+                Object {
+                  "double_per_ip_bytes": 11606,
+                  "host": "artifacts.opensearch.org",
+                  "ip_count": 176,
+                  "per_ip_bytes": 5803,
+                  "resp_code": "404",
+                  "sum_bytes": 1021420,
+                }
+              }
+              docId="doc_view15"
+              explorerFields={
+                Object {
+                  "availableFields": Array [],
+                  "queriedFields": undefined,
+                  "selectedFields": Array [],
+                  "unselectedFields": Array [],
+                }
+              }
+              key="doc_view15"
+              onFlyoutOpen={[Function]}
+              rawQuery=""
+              selectedCols={Array []}
+              timeStampField=""
+            >
+              <tr
+                className="osdDocTable__row"
+              >
+                <td
+                  className="osdDocTableCell__toggleDetails"
+                  key="grid-td-30"
+                >
+                  <EuiButtonIcon
+                    className="euiButtonIcon euiButtonIcon--text"
+                    iconType="arrowRight"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </td>
+                <td
+                  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+                  key="datagrid-cell-29"
+                >
+                  <div
+                    className="truncate-by-height"
+                  >
+                    <span>
+                      <dl
+                        className="source truncate-by-height"
+                      >
+                        <span
+                          key="grid-desc23"
+                        >
+                          <dt>
+                            ip_count
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              176
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc24"
+                        >
+                          <dt>
+                            sum_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              1021420
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc25"
+                        >
+                          <dt>
+                            host
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              artifacts.opensearch.org
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc26"
+                        >
+                          <dt>
+                            resp_code
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              404
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc27"
+                        >
+                          <dt>
+                            per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              5803
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc28"
+                        >
+                          <dt>
+                            double_per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              11606
+                            </span>
+                          </dd>
+                        </span>
+                      </dl>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </ForwardRef>
+            <ForwardRef
+              doc={
+                Object {
+                  "double_per_ip_bytes": 10100,
+                  "host": "www.opensearch.org",
+                  "ip_count": 111,
+                  "per_ip_bytes": 5050,
+                  "resp_code": "404",
+                  "sum_bytes": 560638,
+                }
+              }
+              docId="doc_view16"
+              explorerFields={
+                Object {
+                  "availableFields": Array [],
+                  "queriedFields": undefined,
+                  "selectedFields": Array [],
+                  "unselectedFields": Array [],
+                }
+              }
+              key="doc_view16"
+              onFlyoutOpen={[Function]}
+              rawQuery=""
+              selectedCols={Array []}
+              timeStampField=""
+            >
+              <tr
+                className="osdDocTable__row"
+              >
+                <td
+                  className="osdDocTableCell__toggleDetails"
+                  key="grid-td-54"
+                >
+                  <EuiButtonIcon
+                    className="euiButtonIcon euiButtonIcon--text"
+                    iconType="arrowRight"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </td>
+                <td
+                  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+                  key="datagrid-cell-53"
+                >
+                  <div
+                    className="truncate-by-height"
+                  >
+                    <span>
+                      <dl
+                        className="source truncate-by-height"
+                      >
+                        <span
+                          key="grid-desc47"
+                        >
+                          <dt>
+                            ip_count
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              111
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc48"
+                        >
+                          <dt>
+                            sum_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              560638
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc49"
+                        >
+                          <dt>
+                            host
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              www.opensearch.org
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc50"
+                        >
+                          <dt>
+                            resp_code
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              404
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc51"
+                        >
+                          <dt>
+                            per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              5050
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc52"
+                        >
+                          <dt>
+                            double_per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              10100
+                            </span>
+                          </dd>
+                        </span>
+                      </dl>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </ForwardRef>
+            <ForwardRef
+              doc={
+                Object {
+                  "double_per_ip_bytes": 0,
+                  "host": "artifacts.opensearch.org",
+                  "ip_count": 94,
+                  "per_ip_bytes": 0,
+                  "resp_code": "503",
+                  "sum_bytes": 0,
+                }
+              }
+              docId="doc_view17"
+              explorerFields={
+                Object {
+                  "availableFields": Array [],
+                  "queriedFields": undefined,
+                  "selectedFields": Array [],
+                  "unselectedFields": Array [],
+                }
+              }
+              key="doc_view17"
+              onFlyoutOpen={[Function]}
+              rawQuery=""
+              selectedCols={Array []}
+              timeStampField=""
+            >
+              <tr
+                className="osdDocTable__row"
+              >
+                <td
+                  className="osdDocTableCell__toggleDetails"
+                  key="grid-td-78"
+                >
+                  <EuiButtonIcon
+                    className="euiButtonIcon euiButtonIcon--text"
+                    iconType="arrowRight"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </td>
+                <td
+                  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+                  key="datagrid-cell-77"
+                >
+                  <div
+                    className="truncate-by-height"
+                  >
+                    <span>
+                      <dl
+                        className="source truncate-by-height"
+                      >
+                        <span
+                          key="grid-desc71"
+                        >
+                          <dt>
+                            ip_count
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              94
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc72"
+                        >
+                          <dt>
+                            sum_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc73"
+                        >
+                          <dt>
+                            host
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              artifacts.opensearch.org
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc74"
+                        >
+                          <dt>
+                            resp_code
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              503
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc75"
+                        >
+                          <dt>
+                            per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc76"
+                        >
+                          <dt>
+                            double_per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                      </dl>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </ForwardRef>
+            <ForwardRef
+              doc={
+                Object {
+                  "double_per_ip_bytes": 0,
+                  "host": "www.opensearch.org",
+                  "ip_count": 78,
+                  "per_ip_bytes": 0,
+                  "resp_code": "503",
+                  "sum_bytes": 0,
+                }
+              }
+              docId="doc_view18"
+              explorerFields={
+                Object {
+                  "availableFields": Array [],
+                  "queriedFields": undefined,
+                  "selectedFields": Array [],
+                  "unselectedFields": Array [],
+                }
+              }
+              key="doc_view18"
+              onFlyoutOpen={[Function]}
+              rawQuery=""
+              selectedCols={Array []}
+              timeStampField=""
+            >
+              <tr
+                className="osdDocTable__row"
+              >
+                <td
+                  className="osdDocTableCell__toggleDetails"
+                  key="grid-td-102"
+                >
+                  <EuiButtonIcon
+                    className="euiButtonIcon euiButtonIcon--text"
+                    iconType="arrowRight"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </td>
+                <td
+                  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+                  key="datagrid-cell-101"
+                >
+                  <div
+                    className="truncate-by-height"
+                  >
+                    <span>
+                      <dl
+                        className="source truncate-by-height"
+                      >
+                        <span
+                          key="grid-desc95"
+                        >
+                          <dt>
+                            ip_count
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              78
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc96"
+                        >
+                          <dt>
+                            sum_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc97"
+                        >
+                          <dt>
+                            host
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              www.opensearch.org
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc98"
+                        >
+                          <dt>
+                            resp_code
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              503
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc99"
+                        >
+                          <dt>
+                            per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc100"
+                        >
+                          <dt>
+                            double_per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                      </dl>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </ForwardRef>
+            <ForwardRef
+              doc={
+                Object {
+                  "double_per_ip_bytes": 11526,
+                  "host": "cdn.opensearch-opensearch-opensearch.org",
+                  "ip_count": 43,
+                  "per_ip_bytes": 5763,
+                  "resp_code": "404",
+                  "sum_bytes": 247840,
+                }
+              }
+              docId="doc_view19"
+              explorerFields={
+                Object {
+                  "availableFields": Array [],
+                  "queriedFields": undefined,
+                  "selectedFields": Array [],
+                  "unselectedFields": Array [],
+                }
+              }
+              key="doc_view19"
+              onFlyoutOpen={[Function]}
+              rawQuery=""
+              selectedCols={Array []}
+              timeStampField=""
+            >
+              <tr
+                className="osdDocTable__row"
+              >
+                <td
+                  className="osdDocTableCell__toggleDetails"
+                  key="grid-td-126"
+                >
+                  <EuiButtonIcon
+                    className="euiButtonIcon euiButtonIcon--text"
+                    iconType="arrowRight"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </td>
+                <td
+                  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+                  key="datagrid-cell-125"
+                >
+                  <div
+                    className="truncate-by-height"
+                  >
+                    <span>
+                      <dl
+                        className="source truncate-by-height"
+                      >
+                        <span
+                          key="grid-desc119"
+                        >
+                          <dt>
+                            ip_count
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              43
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc120"
+                        >
+                          <dt>
+                            sum_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              247840
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc121"
+                        >
+                          <dt>
+                            host
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              cdn.opensearch-opensearch-opensearch.org
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc122"
+                        >
+                          <dt>
+                            resp_code
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              404
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc123"
+                        >
+                          <dt>
+                            per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              5763
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc124"
+                        >
+                          <dt>
+                            double_per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              11526
+                            </span>
+                          </dd>
+                        </span>
+                      </dl>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </ForwardRef>
+            <ForwardRef
+              doc={
+                Object {
+                  "double_per_ip_bytes": 0,
+                  "host": "cdn.opensearch-opensearch-opensearch.org",
+                  "ip_count": 34,
+                  "per_ip_bytes": 0,
+                  "resp_code": "503",
+                  "sum_bytes": 0,
+                }
+              }
+              docId="doc_view20"
+              explorerFields={
+                Object {
+                  "availableFields": Array [],
+                  "queriedFields": undefined,
+                  "selectedFields": Array [],
+                  "unselectedFields": Array [],
+                }
+              }
+              key="doc_view20"
+              onFlyoutOpen={[Function]}
+              rawQuery=""
+              selectedCols={Array []}
+              timeStampField=""
+            >
+              <tr
+                className="osdDocTable__row"
+              >
+                <td
+                  className="osdDocTableCell__toggleDetails"
+                  key="grid-td-150"
+                >
+                  <EuiButtonIcon
+                    className="euiButtonIcon euiButtonIcon--text"
+                    iconType="arrowRight"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </td>
+                <td
+                  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+                  key="datagrid-cell-149"
+                >
+                  <div
+                    className="truncate-by-height"
+                  >
+                    <span>
+                      <dl
+                        className="source truncate-by-height"
+                      >
+                        <span
+                          key="grid-desc143"
+                        >
+                          <dt>
+                            ip_count
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              34
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc144"
+                        >
+                          <dt>
+                            sum_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc145"
+                        >
+                          <dt>
+                            host
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              cdn.opensearch-opensearch-opensearch.org
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc146"
+                        >
+                          <dt>
+                            resp_code
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              503
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc147"
+                        >
+                          <dt>
+                            per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc148"
+                        >
+                          <dt>
+                            double_per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                      </dl>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </ForwardRef>
+            <ForwardRef
+              doc={
+                Object {
+                  "double_per_ip_bytes": 8882,
+                  "host": "opensearch-opensearch-opensearch.org",
+                  "ip_count": 13,
+                  "per_ip_bytes": 4441,
+                  "resp_code": "404",
+                  "sum_bytes": 57735,
+                }
+              }
+              docId="doc_view21"
+              explorerFields={
+                Object {
+                  "availableFields": Array [],
+                  "queriedFields": undefined,
+                  "selectedFields": Array [],
+                  "unselectedFields": Array [],
+                }
+              }
+              key="doc_view21"
+              onFlyoutOpen={[Function]}
+              rawQuery=""
+              selectedCols={Array []}
+              timeStampField=""
+            >
+              <tr
+                className="osdDocTable__row"
+              >
+                <td
+                  className="osdDocTableCell__toggleDetails"
+                  key="grid-td-174"
+                >
+                  <EuiButtonIcon
+                    className="euiButtonIcon euiButtonIcon--text"
+                    iconType="arrowRight"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </td>
+                <td
+                  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+                  key="datagrid-cell-173"
+                >
+                  <div
+                    className="truncate-by-height"
+                  >
+                    <span>
+                      <dl
+                        className="source truncate-by-height"
+                      >
+                        <span
+                          key="grid-desc167"
+                        >
+                          <dt>
+                            ip_count
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              13
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc168"
+                        >
+                          <dt>
+                            sum_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              57735
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc169"
+                        >
+                          <dt>
+                            host
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              opensearch-opensearch-opensearch.org
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc170"
+                        >
+                          <dt>
+                            resp_code
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              404
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc171"
+                        >
+                          <dt>
+                            per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              4441
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc172"
+                        >
+                          <dt>
+                            double_per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              8882
+                            </span>
+                          </dd>
+                        </span>
+                      </dl>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </ForwardRef>
+            <ForwardRef
+              doc={
+                Object {
+                  "double_per_ip_bytes": 0,
+                  "host": "opensearch-opensearch-opensearch.org",
+                  "ip_count": 6,
+                  "per_ip_bytes": 0,
+                  "resp_code": "503",
+                  "sum_bytes": 0,
+                }
+              }
+              docId="doc_view22"
+              explorerFields={
+                Object {
+                  "availableFields": Array [],
+                  "queriedFields": undefined,
+                  "selectedFields": Array [],
+                  "unselectedFields": Array [],
+                }
+              }
+              key="doc_view22"
+              onFlyoutOpen={[Function]}
+              rawQuery=""
+              selectedCols={Array []}
+              timeStampField=""
+            >
+              <tr
+                className="osdDocTable__row"
+              >
+                <td
+                  className="osdDocTableCell__toggleDetails"
+                  key="grid-td-198"
+                >
+                  <EuiButtonIcon
+                    className="euiButtonIcon euiButtonIcon--text"
+                    iconType="arrowRight"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </td>
+                <td
+                  className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+                  key="datagrid-cell-197"
+                >
+                  <div
+                    className="truncate-by-height"
+                  >
+                    <span>
+                      <dl
+                        className="source truncate-by-height"
+                      >
+                        <span
+                          key="grid-desc191"
+                        >
+                          <dt>
+                            ip_count
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              6
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc192"
+                        >
+                          <dt>
+                            sum_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc193"
+                        >
+                          <dt>
+                            host
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              opensearch-opensearch-opensearch.org
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc194"
+                        >
+                          <dt>
+                            resp_code
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              503
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc195"
+                        >
+                          <dt>
+                            per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                        <span
+                          key="grid-desc196"
+                        >
+                          <dt>
+                            double_per_ip_bytes
+                            :
+                          </dt>
+                          <dd>
+                            <span>
+                              0
+                            </span>
+                          </dd>
+                        </span>
+                      </dl>
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </ForwardRef>
+          </tbody>
         </table>
       </div>
       <div />
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
index c001a02af..551cc8879 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Metrics component Renders Metrics component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index 6a90d37ef..9103460ea 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Pie component Renders pie component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -447,7 +599,7 @@ exports[`Pie component Renders pie component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -457,7 +609,7 @@ exports[`Pie component Renders pie component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -484,7 +636,7 @@ exports[`Pie component Renders pie component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -493,7 +645,7 @@ exports[`Pie component Renders pie component 1`] = `
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
index 762a46316..083750cfd 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
@@ -9,6 +9,158 @@ exports[`Text component Renders text component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -430,7 +582,7 @@ exports[`Text component Renders text component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -440,7 +592,7 @@ exports[`Text component Renders text component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -467,7 +619,7 @@ exports[`Text component Renders text component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -476,7 +628,7 @@ exports[`Text component Renders text component 1`] = `
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
index 23d4f693a..5560d66b9 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -26,6 +26,158 @@ exports[`Treemap component Renders treemap component 1`] = `
           "fromApp": false,
         },
         "defaultAxes": Object {},
+        "explorer": Object {
+          "explorerData": Object {
+            "jsonData": Array [
+              Object {
+                "double_per_ip_bytes": 11606,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 176,
+                "per_ip_bytes": 5803,
+                "resp_code": "404",
+                "sum_bytes": 1021420,
+              },
+              Object {
+                "double_per_ip_bytes": 10100,
+                "host": "www.opensearch.org",
+                "ip_count": 111,
+                "per_ip_bytes": 5050,
+                "resp_code": "404",
+                "sum_bytes": 560638,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "artifacts.opensearch.org",
+                "ip_count": 94,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "www.opensearch.org",
+                "ip_count": 78,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 11526,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 43,
+                "per_ip_bytes": 5763,
+                "resp_code": "404",
+                "sum_bytes": 247840,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "cdn.opensearch-opensearch-opensearch.org",
+                "ip_count": 34,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+              Object {
+                "double_per_ip_bytes": 8882,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 13,
+                "per_ip_bytes": 4441,
+                "resp_code": "404",
+                "sum_bytes": 57735,
+              },
+              Object {
+                "double_per_ip_bytes": 0,
+                "host": "opensearch-opensearch-opensearch.org",
+                "ip_count": 6,
+                "per_ip_bytes": 0,
+                "resp_code": "503",
+                "sum_bytes": 0,
+              },
+            ],
+            "schema": Array [
+              Object {
+                "name": "agent",
+                "type": "string",
+              },
+              Object {
+                "name": "bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "clientip",
+                "type": "ip",
+              },
+              Object {
+                "name": "event",
+                "type": "struct",
+              },
+              Object {
+                "name": "extension",
+                "type": "string",
+              },
+              Object {
+                "name": "geo",
+                "type": "struct",
+              },
+              Object {
+                "name": "host",
+                "type": "string",
+              },
+              Object {
+                "name": "index",
+                "type": "string",
+              },
+              Object {
+                "name": "ip",
+                "type": "ip",
+              },
+              Object {
+                "name": "machine",
+                "type": "struct",
+              },
+              Object {
+                "name": "memory",
+                "type": "double",
+              },
+              Object {
+                "name": "message",
+                "type": "string",
+              },
+              Object {
+                "name": "phpmemory",
+                "type": "long",
+              },
+              Object {
+                "name": "referer",
+                "type": "string",
+              },
+              Object {
+                "name": "request",
+                "type": "string",
+              },
+              Object {
+                "name": "response",
+                "type": "string",
+              },
+              Object {
+                "name": "tags",
+                "type": "string",
+              },
+              Object {
+                "name": "timestamp",
+                "type": "timestamp",
+              },
+              Object {
+                "name": "url",
+                "type": "string",
+              },
+              Object {
+                "name": "utc_time",
+                "type": "timestamp",
+              },
+            ],
+          },
+        },
         "indexFields": Object {
           "availableFields": Array [
             Object {
@@ -447,7 +599,7 @@ exports[`Treemap component Renders treemap component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 2,
+                      "defaultState": 0,
                       "eleType": "slider",
                       "mapTo": "lineWidth",
                       "name": "Line width",
@@ -457,7 +609,7 @@ exports[`Treemap component Renders treemap component 1`] = `
                     },
                     Object {
                       "component": [Function],
-                      "defaultState": 70,
+                      "defaultState": 100,
                       "eleType": "slider",
                       "mapTo": "fillOpacity",
                       "name": "Fill opacity",
@@ -484,7 +636,7 @@ exports[`Treemap component Renders treemap component 1`] = `
             },
           ],
         },
-        "fillopacity": 70,
+        "fillopacity": 100,
         "fulllabel": "Vertical bar",
         "groupwidth": 0.7,
         "icon": [Function],
@@ -493,7 +645,7 @@ exports[`Treemap component Renders treemap component 1`] = `
         "label": "Vertical bar",
         "labelangle": 0,
         "legendposition": "v",
-        "linewidth": 2,
+        "linewidth": 0,
         "mode": "group",
         "name": "bar",
         "orientation": "v",
diff --git a/public/components/visualizations/charts/bar/bar.tsx b/public/components/visualizations/charts/bar/bar.tsx
index 720063d31..10c6a6f7e 100644
--- a/public/components/visualizations/charts/bar/bar.tsx
+++ b/public/components/visualizations/charts/bar/bar.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { isEmpty, last } from 'lodash';
+import { last } from 'lodash';
 import {
   AGGREGATIONS,
   BREAKDOWNS,
@@ -14,7 +14,6 @@ import {
 import {
   BarOrientation,
   FILLOPACITY_DIV_FACTOR,
-  LONG_CHART_COLOR,
   PLOTLY_COLOR,
   THRESHOLD_LINE_OPACITY,
   THRESHOLD_LINE_WIDTH,
@@ -23,7 +22,6 @@ import {
 import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
 import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
-import { VisCanvassPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components';
 import { hexToRgb } from '../../../event_analytics/utils/utils';
 import { Plt } from '../../plotly/plot';
 import { transformPreprocessedDataToTraces, preprocessJsonData } from '../shared/common';
@@ -31,10 +29,8 @@ import { transformPreprocessedDataToTraces, preprocessJsonData } from '../shared
 export const Bar = ({ visualizations, layout, config }: any) => {
   const {
     data: {
-      rawVizData: {
-        data: queriedVizData,
-        jsonData,
-        metadata: { fields },
+      explorer: {
+        explorerData: { jsonData },
       },
       userConfigs: {
         dataConfig: {
@@ -67,8 +63,6 @@ export const Bar = ({ visualizations, layout, config }: any) => {
     },
   }: IVisualizationContainerProps = visualizations;
 
-  const lastIndex = fields.length - 1;
-
   /**
    * determine stylings
    */
@@ -93,10 +87,6 @@ export const Bar = ({ visualizations, layout, config }: any) => {
     (colorTheme.length > 0 &&
       colorTheme.find((colorSelected) => colorSelected.name.label === field)?.color) ||
     PLOTLY_COLOR[index % PLOTLY_COLOR.length];
-  // If chart has length of result buckets < 16
-  // then use the LONG_CHART_COLOR for all the bars in the chart
-  const plotlyColorway =
-    queriedVizData[fields[lastIndex].name].length < 16 ? PLOTLY_COLOR : [LONG_CHART_COLOR];
 
   const addStylesToTraces = (traces, traceStyles) => {
     const {
@@ -127,7 +117,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
   };
 
   let bars = useMemo(() => {
-    const visConfig = {
+    const visPanelConfig = {
       dimensions,
       series,
       breakdowns,
@@ -141,16 +131,24 @@ export const Bar = ({ visualizations, layout, config }: any) => {
       tooltipText,
       lineWidth,
     };
+    const barSpecficMetaData = {
+      x_coordinate: 'x',
+      y_coordinate: 'y',
+    };
 
     return addStylesToTraces(
-      transformPreprocessedDataToTraces(preprocessJsonData(jsonData, visConfig), visConfig),
+      transformPreprocessedDataToTraces(
+        preprocessJsonData(jsonData, visPanelConfig),
+        visPanelConfig,
+        barSpecficMetaData
+      ),
       { ...traceStyles }
     );
   }, [chartStyles, jsonData, dimensions, series, breakdowns, span, tooltipOptions]);
 
   const mergedLayout = useMemo(() => {
     return {
-      colorway: plotlyColorway,
+      colorway: PLOTLY_COLOR,
       ...layout,
       title: panelOptions.title || layoutConfig.layout?.title || '',
       barmode: chartStyles.mode || visualizations.vis.mode,
diff --git a/public/components/visualizations/charts/data_table/data_table.tsx b/public/components/visualizations/charts/data_table/data_table.tsx
index 2efa8bbaf..c340ff0d0 100644
--- a/public/components/visualizations/charts/data_table/data_table.tsx
+++ b/public/components/visualizations/charts/data_table/data_table.tsx
@@ -30,12 +30,11 @@ const doubleValueGetter = (params) => {
 export const DataTable = ({ visualizations, layout, config }: any) => {
   const {
     data: {
-      rawVizData: {
-        jsonData = [],
-        metadata: { fields = [] } = {},
-      } = {},
+      explorer: {
+        explorerData: { jsonData = [], schema = [] },
+      },
       userConfigs: { dataConfig: { chartStyles = {} } = {} } = {},
-    } = {}
+    } = {},
   }: IVisualizationContainerProps = visualizations;
 
   const enablePagination =
@@ -72,7 +71,7 @@ export const DataTable = ({ visualizations, layout, config }: any) => {
 
   const columns = useMemo(
     () =>
-      fields.map((field: IField) => {
+      schema.map((field: IField) => {
         return {
           lockVisible: true,
           columnsMenuParams: {
@@ -88,7 +87,7 @@ export const DataTable = ({ visualizations, layout, config }: any) => {
           }),
         };
       }),
-    [fields]
+    [schema]
   );
 
   // ag-grid-react bindings
diff --git a/public/components/visualizations/charts/lines/line.tsx b/public/components/visualizations/charts/lines/line.tsx
index bc06b2e98..9c3e3041f 100644
--- a/public/components/visualizations/charts/lines/line.tsx
+++ b/public/components/visualizations/charts/lines/line.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { isEmpty, last } from 'lodash';
+import { last } from 'lodash';
 import React, { useMemo } from 'react';
 import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer';
 import {
@@ -17,7 +17,6 @@ import { IVisualizationContainerProps } from '../../../../../common/types/explor
 import { hexToRgb } from '../../../../components/event_analytics/utils/utils';
 import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
-import { VisCanvassPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components';
 import { Plt } from '../../plotly/plot';
 import { transformPreprocessedDataToTraces, preprocessJsonData } from '../shared/common';
 
@@ -36,10 +35,8 @@ export const Line = ({ visualizations, layout, config }: any) => {
 
   const {
     data: {
-      rawVizData: {
-        data: queriedVizData,
-        jsonData,
-        metadata: { fields },
+      explorer: {
+        explorerData: { jsonData },
       },
       userConfigs: {
         dataConfig: {
@@ -140,9 +137,17 @@ export const Line = ({ visualizations, layout, config }: any) => {
       lineWidth,
       markerSize,
     };
+    const lineSpecficMetaData = {
+      x_coordinate: 'x',
+      y_coordinate: 'y',
+    };
 
     return addStylesToTraces(
-      transformPreprocessedDataToTraces(preprocessJsonData(jsonData, visConfig), visConfig),
+      transformPreprocessedDataToTraces(
+        preprocessJsonData(jsonData, visConfig),
+        visConfig,
+        lineSpecficMetaData
+      ),
       traceStyles
     );
   }, [chartStyles, jsonData, dimensions, series, span, breakdowns, panelOptions, tooltipOptions]);
diff --git a/public/components/visualizations/charts/maps/heatmap.tsx b/public/components/visualizations/charts/maps/heatmap.tsx
index ad08ac26f..9bca96d8f 100644
--- a/public/components/visualizations/charts/maps/heatmap.tsx
+++ b/public/components/visualizations/charts/maps/heatmap.tsx
@@ -4,7 +4,7 @@
  */
 import React, { useMemo } from 'react';
 import { colorPalette } from '@elastic/eui';
-import { forEach, has, isEmpty, isEqual, uniq } from 'lodash';
+import { forEach, isEmpty, isEqual, map } from 'lodash';
 import Plotly from 'plotly.js-dist';
 import {
   HEATMAP_PALETTE_COLOR,
@@ -22,15 +22,17 @@ import { VisCanvassPlaceholder } from '../../../event_analytics/explorer/visuali
 import { Plt } from '../../plotly/plot';
 import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer';
 import { PLOT_MARGIN } from '../../../../../common/constants/shared';
-import { getCompleteTimespanKey } from '../../../visualizations/charts/shared/common';
+import {
+  getCompleteTimespanKey,
+  removeBackTick,
+} from '../../../visualizations/charts/shared/common';
 import { removeBacktick } from '../../../../../common/utils';
 
 export const HeatMap = ({ visualizations, layout, config }: any) => {
   const {
     data: {
-      rawVizData: {
-        data: queriedVizData,
-        metadata: { fields },
+      explorer: {
+        explorerData: { jsonData: fieldValueMapList },
       },
       userConfigs: {
         dataConfig: {
@@ -48,33 +50,14 @@ export const HeatMap = ({ visualizations, layout, config }: any) => {
     vis: { icontype },
   }: IVisualizationContainerProps = visualizations;
 
-  const backtickRemovedVisData = {};
-  forEach(queriedVizData, (value, key) => {
-    backtickRemovedVisData[removeBacktick(key)] = value;
-  });
-
   const combinedDemensions = [
     ...(!isEmpty(span) ? [getCompleteTimespanKey(span)] : []),
     ...dimensions,
   ];
-  if (!isEqual(combinedDemensions.length, 2) || !isEqual(series.length, 1))
-    return <VisCanvassPlaceholder message="Invalid data, heatmap can only have exact 2 dimensions and 1 series" icon={icontype} />;
+
   const xaxisField = { ...combinedDemensions[0] };
   const yaxisField = { ...combinedDemensions[1] };
   const zMetrics = { ...series[0] };
-  if (
-    isEmpty(xaxisField) ||
-    isEmpty(yaxisField) ||
-    isEmpty(zMetrics) ||
-    isEmpty(backtickRemovedVisData[removeBacktick(xaxisField.label)]) ||
-    isEmpty(backtickRemovedVisData[removeBacktick(yaxisField.label)])
-  )
-    return <VisCanvassPlaceholder message="Invalid data" icon={icontype} />;
-
-  const uniqueYaxis = uniq(backtickRemovedVisData[removeBacktick(yaxisField.label)]);
-  const uniqueXaxis = uniq(backtickRemovedVisData[removeBacktick(xaxisField.label)]);
-  const uniqueYaxisLength = uniqueYaxis.length;
-  const uniqueXaxisLength = uniqueXaxis.length;
   const tooltipMode =
     tooltipOptions.tooltipMode !== undefined ? tooltipOptions.tooltipMode : 'show';
   const tooltipText = tooltipOptions.tooltipText !== undefined ? tooltipOptions.tooltipText : 'all';
@@ -97,51 +80,48 @@ export const HeatMap = ({ visualizations, layout, config }: any) => {
     });
   }
 
-  const calculatedHeapMapZaxis: Plotly.Data[] = useMemo(() => {
-    const heapMapZaxis = [];
-    const buckets = {};
+  const heatMapAxes = useMemo(() => {
+    const dmaps = new Map<string, any>(); // key: values of 1st and 2nd group-by fields combined
+    const uniqueXaxisVals = new Set<any>(); // any value for a field
+    const uniqueYaxisVals = new Set<any>(); // any value for a field
+    const zKey = getPropName(zMetrics);
 
-    // maps bukcets to metrics
-    for (let i = 0; i < backtickRemovedVisData[removeBacktick(xaxisField.label)].length; i++) {
-      buckets[`${backtickRemovedVisData[removeBacktick(xaxisField.label)][i]},${backtickRemovedVisData[removeBacktick(yaxisField.label)][i]}`] =
-      backtickRemovedVisData[getPropName(zMetrics)][i];
-    }
+    forEach(fieldValueMapList, (entry) => {
+      const backtickRemovedEntry = removeBackTick(entry);
+      const xKey = removeBacktick(xaxisField.label);
+      const yKey = removeBacktick(yaxisField.label);
 
-    // initialize empty 2 dimensional array, inner loop for each xaxis field, outer loop for yaxis
-    for (let i = 0; i < uniqueYaxisLength; i++) {
-      const innerBuckets = [];
-      for (let j = 0; j < uniqueXaxisLength; j++) {
-        innerBuckets.push(null);
-      }
-      heapMapZaxis.push(innerBuckets);
-    }
+      // collect unique values from all values of 1st and 2nd group-by fields
+      // for later composing 2 dimensional heatmap x, y axes
+      uniqueXaxisVals.add(backtickRemovedEntry[xKey]);
+      uniqueYaxisVals.add(backtickRemovedEntry[yKey]);
 
-    // fill in each bucket
-    for (let i = 0; i < uniqueYaxisLength; i++) {
-      for (let j = 0; j < uniqueXaxisLength; j++) {
-        if (has(buckets, `${uniqueXaxis[j]},${uniqueYaxis[i]}`)) {
-          heapMapZaxis[i][j] = buckets[`${uniqueXaxis[j]},${uniqueYaxis[i]}`];
-        }
-      }
-    }
+      // establish 1st,2nd -> data entry mapping for later filling in
+      // corresponding aggregations to 2 dimensional heatmap zaxis
+      dmaps.set(
+        `${backtickRemovedEntry[xKey]},${backtickRemovedEntry[yKey]}`,
+        backtickRemovedEntry
+      );
+    });
+
+    const xAxis = [...uniqueXaxisVals];
+    const yAxis = [...uniqueYaxisVals];
+    const zaxis = map(yAxis, (yvalue) => {
+      return map(xAxis, (xvalue) => {
+        return dmaps.get(`${xvalue},${yvalue}`) ? dmaps.get(`${xvalue},${yvalue}`)[zKey] : null;
+      });
+    });
 
-    return heapMapZaxis;
-  }, [
-    backtickRemovedVisData,
-    uniqueYaxis,
-    uniqueXaxis,
-    uniqueYaxisLength,
-    uniqueXaxisLength,
-    xaxisField,
-    yaxisField,
-    zMetrics,
-  ]);
+    return {
+      z: zaxis,
+      x: xAxis,
+      y: yAxis,
+    };
+  }, [fieldValueMapList]);
 
-  const heapMapData = [
+  const heapMapData: Plotly.Data[] = [
     {
-      z: calculatedHeapMapZaxis,
-      x: uniqueXaxis,
-      y: uniqueYaxis,
+      ...heatMapAxes,
       hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
       colorscale: colorField.name === SINGLE_COLOR_PALETTE ? traceColor : colorField.name,
       type: 'heatmap',
diff --git a/public/components/visualizations/charts/pie/pie.tsx b/public/components/visualizations/charts/pie/pie.tsx
index 3b8fb2db1..eefdef476 100644
--- a/public/components/visualizations/charts/pie/pie.tsx
+++ b/public/components/visualizations/charts/pie/pie.tsx
@@ -3,9 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { find, forEach } from 'lodash';
 import React, { useMemo } from 'react';
-import { DEFAULT_PALETTE, HEX_CONTRAST_COLOR } from '../../../../../common/constants/colors';
+import { DEFAULT_PALETTE } from '../../../../../common/constants/colors';
 import {
   AGGREGATIONS,
   GROUPBY,
@@ -13,24 +12,17 @@ import {
   PIE_YAXIS_GAP,
   PLOTLY_PIE_COLUMN_NUMBER,
 } from '../../../../../common/constants/explorer';
-import { PLOT_MARGIN } from '../../../../../common/constants/shared';
-import {
-  ConfigListEntry,
-  IVisualizationContainerProps,
-} from '../../../../../common/types/explorer';
-import { getPropName, getTooltipHoverInfo } from '../../../event_analytics/utils/utils';
+import { PLOT_MARGIN, PLOTLY_COLOR } from '../../../../../common/constants/shared';
+import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
+import { getTooltipHoverInfo } from '../../../event_analytics/utils/utils';
 import { Plt } from '../../plotly/plot';
-import { removeBacktick } from '../../../../../common/utils';
+import { transformPreprocessedDataToTraces, preprocessJsonData } from '../shared/common';
 
 export const Pie = ({ visualizations, layout, config }: any) => {
   const {
     data: {
-      defaultAxes,
-      indexFields,
-      query,
-      rawVizData: {
-        data: queriedVizData,
-        metadata: { fields },
+      explorer: {
+        explorerData: { jsonData: fieldValueMapList },
       },
       userConfigs: {
         dataConfig: {
@@ -45,7 +37,7 @@ export const Pie = ({ visualizations, layout, config }: any) => {
         layoutConfig = {},
       } = {},
     } = {},
-    vis: { mode, icontype, showlegend, legendSize, labelSize, legendposition },
+    vis: { mode, showlegend, legendSize, labelSize, legendposition },
   }: IVisualizationContainerProps = visualizations;
 
   const type = chartStyles.mode || mode;
@@ -54,65 +46,37 @@ export const Pie = ({ visualizations, layout, config }: any) => {
   const chartLegendSize = legend.size || legendSize;
   const chartLabelSize = chartStyles.labelSize || labelSize;
   const title = panelOptions.title || layoutConfig.layout?.title || '';
-  const timestampField = find(fields, (field) => field.type === 'timestamp');
-
-  const backtickRemovedVisData = {};
-  forEach(queriedVizData, (value, key) => {
-    backtickRemovedVisData[removeBacktick(key)] = value;
-  });
-
-  /**
-   * determine x axis
-   */
-  let xaxes: ConfigListEntry[] = [];
-  if (span && span.time_field && timestampField) {
-    xaxes = [timestampField, ...dimensions];
-  } else {
-    xaxes = dimensions;
-  }
-
-  const invertHex = (hex: string) =>
-    (Number(`0x1${hex}`) ^ HEX_CONTRAST_COLOR).toString(16).substr(1).toUpperCase(); // eslint-disable-line no-bitwise
 
-  const labelsOfXAxis = xaxes.reduce((prev, cur) => {
-    if (backtickRemovedVisData[removeBacktick(cur.name)]) {
-      if (prev.length === 0) return backtickRemovedVisData[removeBacktick(cur.name)].flat();
-      return prev.map(
-        (item: string | number, index: number) =>
-          `${item}, ${backtickRemovedVisData[removeBacktick(cur.name)][index]}`
-      );
-    }
-  }, []);
+  const pieTreaces = useMemo(() => {
+    const chartConfigs = {
+      dimensions,
+      series,
+      breakdowns: [], // pie doesn't support breakdowns
+      span,
+      isVertical: true,
+    };
+    const pieSpecificMetaData = {
+      x_coordinate: 'labels',
+      y_coordinate: 'values',
+    };
 
-  const hexColor = invertHex(colorTheme);
+    return transformPreprocessedDataToTraces(
+      preprocessJsonData(fieldValueMapList, chartConfigs),
+      chartConfigs,
+      pieSpecificMetaData
+    );
+  }, [chartStyles, fieldValueMapList, dimensions, series, [], span, tooltipOptions]);
 
   const pies = useMemo(
     () =>
-      series.map((field: any, index: number) => {
-        const fieldName = getPropName(field);
-        const marker =
-          colorTheme.name !== DEFAULT_PALETTE
-            ? {
-                marker: {
-                  colors: [
-                    ...Array(backtickRemovedVisData[removeBacktick(fieldName)].length).fill(
-                      colorTheme.childColor
-                    ),
-                  ],
-                  line: {
-                    color: hexColor,
-                    width: 1,
-                  },
-                },
-              }
-            : undefined;
+      pieTreaces.map((pieTrace: any, index: number) => {
         return {
-          labels: labelsOfXAxis,
-          values: backtickRemovedVisData[removeBacktick(fieldName)],
+          labels: pieTrace.labels,
+          values: pieTrace.values,
           type: 'pie',
-          name: getPropName(field),
+          name: pieTrace.name,
           hole: type === 'pie' ? 0 : 0.5,
-          text: fieldName,
+          text: pieTrace.name,
           textinfo: 'percent',
           hoverinfo: getTooltipHoverInfo({
             tooltipMode: tooltipOptions.tooltipMode,
@@ -120,28 +84,30 @@ export const Pie = ({ visualizations, layout, config }: any) => {
           }),
           automargin: true,
           textposition: 'outside',
-          title: { text: fieldName },
+          title: { text: pieTrace.name },
           domain: {
             row: Math.floor(index / PLOTLY_PIE_COLUMN_NUMBER),
             column: index % PLOTLY_PIE_COLUMN_NUMBER,
           },
-          ...marker,
+          marker: {
+            colors: [...PLOTLY_COLOR],
+          },
           outsidetextfont: {
             size: chartLabelSize,
           },
         };
       }),
-    [series, backtickRemovedVisData, chartLabelSize, labelsOfXAxis, colorTheme]
+    [chartLabelSize, colorTheme]
   );
 
   const mergedLayout = useMemo(() => {
-    const isAtleastOneFullRow = Math.floor(series.length / PLOTLY_PIE_COLUMN_NUMBER) > 0;
+    const isAtleastOneFullRow = Math.floor(pieTreaces.length / PLOTLY_PIE_COLUMN_NUMBER) > 0;
     return {
       grid: {
         xgap: PIE_XAXIS_GAP,
         ygap: PIE_YAXIS_GAP,
-        rows: Math.floor(series.length / PLOTLY_PIE_COLUMN_NUMBER) + 1,
-        columns: isAtleastOneFullRow ? PLOTLY_PIE_COLUMN_NUMBER : series.length,
+        rows: Math.floor(pieTreaces.length / PLOTLY_PIE_COLUMN_NUMBER) + 1,
+        columns: isAtleastOneFullRow ? PLOTLY_PIE_COLUMN_NUMBER : pieTreaces.length,
         pattern: 'independent',
       },
       ...layout,
@@ -168,7 +134,7 @@ export const Pie = ({ visualizations, layout, config }: any) => {
         yref: 'container',
       },
     };
-  }, [series, layoutConfig.layout, title, layout.legend]);
+  }, [layoutConfig.layout, title, layout.legend]);
 
   const mergedConfigs = useMemo(
     () => ({
diff --git a/public/components/visualizations/charts/shared/common.ts b/public/components/visualizations/charts/shared/common.ts
index 6d782b41a..50790511e 100644
--- a/public/components/visualizations/charts/shared/common.ts
+++ b/public/components/visualizations/charts/shared/common.ts
@@ -3,11 +3,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { isEmpty, forEach } from 'lodash';
+import { isEmpty, forEach, mapKeys } from 'lodash';
 import { CUSTOM_LABEL } from '../../../../../common/constants/explorer';
-import { ConfigList, DimensionSpan } from '../../../../../common/types/explorer';
+import {
+  ConfigList,
+  DimensionSpan,
+  VisSpecificMetaData,
+} from '../../../../../common/types/explorer';
 import { removeBacktick } from '../../../../../common/utils';
 
+interface IIntermediateMapping {
+  value: number;
+  x: string;
+  breakdown: string;
+  aggName: string;
+}
+
+type PlotlyTrace = Partial<Plotly.Data>;
+
 export const getCompleteTimespanKey = (span: DimensionSpan) => {
   if (isEmpty(span) || isEmpty(span.time_field) || isEmpty(span.interval) || isEmpty(span.unit))
     return '';
@@ -17,57 +30,73 @@ export const getCompleteTimespanKey = (span: DimensionSpan) => {
 
 /**
  * Transform to traces that can be consumed by plotly.
- * @param intermediateVisData preprocessed json data that has dimensions to single aggregation mapping.
- * @param param1 required visualization configurations.
- * @returns traces.
+ * @param intermediateVisData intermediate visualization mapping data.
+ * @param configList visualization configurations from config panel UI.
+ * @param visTypeMetaData contains info related to how to prepare traces for this specifc visualizaton type.
+ * @returns plotly traces.
  */
 export const transformPreprocessedDataToTraces = (
-  intermediateVisData: Array<any>,
-  { breakdowns, isVertical = true }: Partial<ConfigList>
-) => {
+  intermediateVisData: IIntermediateMapping[],
+  { breakdowns, isVertical = true }: Partial<ConfigList>,
+  visTypeMetaData: VisSpecificMetaData
+): PlotlyTrace[] => {
   const traceMap = new Map<string, any>();
   const hasBreakdown = !isEmpty(breakdowns);
   forEach(intermediateVisData, (entry) => {
     const traceKey = hasBreakdown ? [entry.breakdown, entry.aggName].join(',') : entry.aggName;
+    const xCoordinate = visTypeMetaData.x_coordinate;
+    const yCoordinate = visTypeMetaData.y_coordinate;
+
     if (isEmpty(traceMap.get(traceKey))) {
       traceMap.set(traceKey, {
-        x: isVertical ? [entry.x] : [entry.value],
-        y: isVertical ? [entry.value] : [entry.x],
+        [xCoordinate]: isVertical ? [entry.x] : [entry.value],
+        [yCoordinate]: isVertical ? [entry.value] : [entry.x],
         name: hasBreakdown ? [entry.breakdown, entry.aggName].join(',') : `${traceKey}`,
       });
     } else {
       const curTrace = traceMap.get(traceKey);
       const xaxisValue = isVertical ? entry.x : entry.value;
       const yaxisValue = isVertical ? entry.value : entry.x;
-      curTrace!.x.push(xaxisValue);
-      curTrace!.y.push(yaxisValue);
+      curTrace![xCoordinate].push(xaxisValue);
+      curTrace![yCoordinate].push(yaxisValue);
     }
   });
   return [...traceMap.values()];
 };
 
+export const removeBackTick = (entry: any) => {
+  return {
+    ...mapKeys(entry, (val: any, key: string) => removeBacktick(key)),
+  };
+};
+
 /**
- * preprocess json data to
+ * preprocess raw schema-data, key-value mapping to form an intermediate,
+ * dimension - breakdown - aggregation, key-value mapping.
  * 1. concatenate dimensions to generate one dimension
- * 2. concatenate breakdowns (if there's any) generate one breakdown
+ * 2. concatenate breakdowns (if there's any) to generate one breakdown
  * 3. map dimension/breakdown to aggregations
- * @param visJson raw json data from data fetching
- * @param param1 required visualization configurations.
- * @returns intermediate visualization json data
+ * @param jdbcFieldValueMapList raw jsonData comes from fetched data that has schema to data mapping
+ * @param configList visualization configurations from config panel UI.
+ * @returns intermediate visualization mapping data
  */
 export const preprocessJsonData = (
-  visJson: Array<any>,
+  jdbcFieldValueMapList: any[],
   { dimensions, series, breakdowns, span }: Partial<ConfigList>
-) => {
-  const seriesFlattenedEntries = [];
-  forEach(visJson, (entry) => {
-    const backtickRemovedEntry = {};
-    // remove backtick, so data in jsonData can be accessed through using field name
-    forEach(entry, (value, key) => {
-      backtickRemovedEntry[removeBacktick(key)] = value;
-    });
+): IIntermediateMapping[] => {
+  const seriesFlattenedEntries: IIntermediateMapping[] = [];
+  forEach(jdbcFieldValueMapList, (entry: any) => {
+    const backtickRemovedEntry = {
+      ...removeBackTick(entry),
+    };
+
     forEach(series, (sr) => {
-      let tabularVizData = {};
+      let tabularVizData: IIntermediateMapping = {
+        value: 0,
+        x: '',
+        breakdown: '',
+        aggName: '',
+      };
       const serieKey = sr[CUSTOM_LABEL] ? sr[CUSTOM_LABEL] : `${sr.aggregation}(${sr.name})`;
       if (!isEmpty(serieKey)) {
         const concatedXaxisLabel = [
@@ -89,12 +118,6 @@ export const preprocessJsonData = (
           breakdown: concatedBreakdownLabel,
           aggName: serieKey,
         };
-      } else {
-        tabularVizData = {
-          value: 0,
-          x: '',
-          breakdown: '',
-        };
       }
       seriesFlattenedEntries.push(tabularVizData);
     });
diff --git a/public/components/visualizations/visualization.tsx b/public/components/visualizations/visualization.tsx
index f1107908b..9845788fe 100644
--- a/public/components/visualizations/visualization.tsx
+++ b/public/components/visualizations/visualization.tsx
@@ -19,7 +19,6 @@ export const Visualization = ({
   const isVisDataValid = (vs: IVisualizationContainerProps) => {
     const {
       data: {
-        rawVizData: { data: queriedVizData },
         userConfigs: {
           dataConfig: { span = {}, [GROUPBY]: dimensions = [], [AGGREGATIONS]: series = [] } = {},
         } = {},
@@ -30,17 +29,11 @@ export const Visualization = ({
     // Markdown, it does not depend on if there is data
     if (vis.id === VIS_CHART_TYPES.Text) return [true, ''];
 
-    if (isEmpty(queriedVizData)) return [false, VISUALIZATION_ERROR.NO_DATA];
-
     if (isEmpty(series)) return [false, VISUALIZATION_ERROR.INVALID_DATA]; // series is required to any visualization type
 
     // bars, pie
     if (dimensions.length < 1 && isEmpty(span)) return [false, VISUALIZATION_ERROR.INVALID_DATA];
 
-    // heatmap
-    if (vis.id === VIS_CHART_TYPES.HeatMap && (series.length !== 1 || dimensions.length !== 2))
-      return [false, VISUALIZATION_ERROR.INVALID_DATA];
-
     return [true, ''];
   };
 
diff --git a/test/event_analytics_constants.ts b/test/event_analytics_constants.ts
index bcb75afaf..cf8df8a0e 100644
--- a/test/event_analytics_constants.ts
+++ b/test/event_analytics_constants.ts
@@ -523,6 +523,9 @@ export const VALUE_OPTIONS = {
 export const TEST_VISUALIZATIONS_DATA = {
   data: {
     appData: { fromApp: false },
+    explorer: {
+      explorerData: { jsonData: JSON_DATA, schema: AVAILABLE_FIELDS },
+    },
     defaultAxes: {},
     indexFields: EXPLORER_FIELDS,
     query: {},