From a338dd8b38c0bd653a2eb76fd9ede5308a6540ad Mon Sep 17 00:00:00 2001
From: Paulo Henrique <paulo.henrique@elastic.co>
Date: Tue, 26 Sep 2023 14:42:10 -0700
Subject: [PATCH 1/5] [UnifiedDataTable] Add gridStyle override support
 (#166994)

---
 .../src/components/data_table.test.tsx        | 33 +++++++++++++++++++
 .../src/components/data_table.tsx             |  8 ++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
index 7ca088823074..6aa101cc558b 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -432,4 +432,37 @@ describe('UnifiedDataTable', () => {
       expect(tourStep).toEqual('test-expand');
     });
   });
+
+  describe('gridStyleOverride', () => {
+    it('should render the grid with the default style if no gridStyleOverride is provided', async () => {
+      const component = await getComponent({
+        ...getProps(),
+      });
+
+      const grid = findTestSubject(component, 'docTable');
+
+      expect(grid.hasClass('euiDataGrid--bordersHorizontal')).toBeTruthy();
+      expect(grid.hasClass('euiDataGrid--fontSizeSmall')).toBeTruthy();
+      expect(grid.hasClass('euiDataGrid--paddingLarge')).toBeTruthy();
+      expect(grid.hasClass('euiDataGrid--rowHoverHighlight')).toBeTruthy();
+      expect(grid.hasClass('euiDataGrid--headerUnderline')).toBeTruthy();
+      expect(grid.hasClass('euiDataGrid--stripes')).toBeTruthy();
+    });
+    it('should render the grid with style override if gridStyleOverride is provided', async () => {
+      const component = await getComponent({
+        ...getProps(),
+        gridStyleOverride: {
+          stripes: false,
+          rowHover: 'none',
+          border: 'none',
+        },
+      });
+
+      const grid = findTestSubject(component, 'docTable');
+
+      expect(grid.hasClass('euiDataGrid--stripes')).toBeFalsy();
+      expect(grid.hasClass('euiDataGrid--rowHoverHighlight')).toBeFalsy();
+      expect(grid.hasClass('euiDataGrid--bordersNone')).toBeTruthy();
+    });
+  });
 });
diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx
index e5f5e5dbbba3..a9d749e46169 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.tsx
@@ -27,6 +27,7 @@ import {
   EuiDataGridControlColumn,
   EuiDataGridCustomBodyProps,
   EuiDataGridCellValueElementProps,
+  EuiDataGridStyle,
 } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import {
@@ -282,6 +283,10 @@ export interface UnifiedDataTableProps {
    * Optional key/value pairs to set guided onboarding steps ids for a data table components included to guided tour.
    */
   componentsTourSteps?: Record<string, string>;
+  /**
+   * Optional gridStyle override.
+   */
+  gridStyleOverride?: EuiDataGridStyle;
 }
 
 export const EuiDataGridMemoized = React.memo(EuiDataGrid);
@@ -335,6 +340,7 @@ export const UnifiedDataTable = ({
   externalCustomRenderers,
   consumer = 'discover',
   componentsTourSteps,
+  gridStyleOverride,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
@@ -789,7 +795,7 @@ export const UnifiedDataTable = ({
             toolbarVisibility={toolbarVisibility}
             rowHeightsOptions={rowHeightsOptions}
             inMemory={inMemory}
-            gridStyle={GRID_STYLE}
+            gridStyle={gridStyleOverride ?? GRID_STYLE}
             renderCustomGridBody={renderCustomGridBody}
             trailingControlColumns={trailingControlColumns}
           />

From 4dfd31def0ab83d22473c627ebe1639579eca7e8 Mon Sep 17 00:00:00 2001
From: "Quynh Nguyen (Quinn)" <43350163+qn895@users.noreply.github.com>
Date: Tue, 26 Sep 2023 17:15:35 -0500
Subject: [PATCH 2/5] [ML] Add data drift detection workflow from Trained
 models to Data comparison view (#162853)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

This PR adds data drift detection workflow from Trained models to Data
comparison view. It also renames Data comparison to Data Drift.

**From the new map view in Trained model list:**

- Clicking on the index icon in the map view will give an option/action
to Analyze data drift


https://github.com/elastic/kibana/assets/43350163/a68163ab-8a83-4378-8cf3-ea49f4480a06

- If model has detected related indices, it will also give an option to
Analyze data drift in the Transform actions

**From the data comparison/drift page:**

- Default screen with list of available data views and saved search will
be shown

<img width="1470" alt="Screen Shot 2023-09-07 at 00 22 01"
src="https://github.com/elastic/kibana/assets/43350163/db13b8b7-9d90-4220-b03e-9f9d12ab53e9">

- But can also customize index patterns for the data sets to analyze.
Upon 'analyzing', a new data view will be created if needed (either
permanently or temporarily).

<img width="1271" alt="Screen Shot 2023-08-29 at 16 56 57"
src="https://github.com/elastic/kibana/assets/43350163/e000e920-162b-4369-8762-70b6244e50e7">

<img width="1470" alt="Screen Shot 2023-09-07 at 00 22 49"
src="https://github.com/elastic/kibana/assets/43350163/6577a530-c3b0-4ab9-95e4-d1d8fd1c9f0a">

- If there exists a data view with exact combination of index patterns
and time field, it will use that data view
- If there exists a data view with the same index patterns but different
time field, it will create a new data view with name
`{referencePattern},{comparisonPattern}-{timeField}`
- If no data view exists that matches, it will create a new data view
with name `{referencePattern},{comparisonPattern}`


## For reviewers:
- **appex-sharedux**: [Small change in the exported type interface for
BaseSavedObjectFinder](https://github.com/elastic/kibana/pull/162853/files#diff-5e2e62df8aba5ac9445962bfa00eee933a386110d0a24dfe6ac0f300a796ccc3)
to correctly list `children` as an accepted prop. This prop which is
used for the `toolsRight`.
- **security-solution**: Renaming of `Data comparison` to `Data Drift`

## Tests:
[Flaky test suite runner with Data Drift
test](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3216#018accc2-d33b-4cd6-a178-589e6698b675)
... successful after 50 runs✅


### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 api_docs/data_view_editor.devdocs.json        |   2 +-
 api_docs/kbn_deeplinks_ml.devdocs.json        |   6 +-
 packages/deeplinks/ml/deep_links.ts           |   2 +-
 packages/default-nav/ml/default_navigation.ts |   4 +-
 .../chrome/navigation/mocks/src/navlinks.ts   |   2 +-
 .../default_navigation.test.tsx.snap          |  14 +-
 .../public/data_view_editor_service.ts        |  12 +
 .../public/data_view_editor_service_lazy.ts   |   9 +
 src/plugins/data_view_editor/public/index.ts  |   6 +-
 src/plugins/data_view_editor/public/mocks.ts  |   1 +
 .../data_view_editor/public/plugin.tsx        |   8 +
 src/plugins/data_view_editor/public/types.ts  |   9 +
 .../__snapshots__/overview.test.tsx.snap      |   1 +
 .../public/finder/saved_object_finder.tsx     |   1 +
 .../document_count_chart.tsx                  |  15 +-
 .../src/random_sampler_manager.ts             |  30 +-
 .../data_visualizer/public/api/index.ts       |   6 +-
 .../total_count_header.tsx                    |  22 +-
 .../random_sampling_menu.tsx                  |  12 +-
 .../application/common/hooks/use_data.ts      | 138 +++-
 .../common/hooks/use_document_count_stats.ts  |   1 +
 .../application/common/hooks/use_search.ts    |   2 +-
 .../common/util/get_data_test_subject.ts      |  11 +
 .../data_comparison_distribution_chart.tsx    |  51 --
 .../charts/overlap_distribution_chart.tsx     |  64 --
 .../charts/data_drift_distribution_chart.tsx  |  71 ++
 .../charts/default_value_formatter.ts         |  41 ++
 .../charts/no_charts_data.tsx                 |   0
 .../charts/overlap_distribution_chart.tsx     |  90 +++
 .../charts/single_distribution_chart.tsx      |  33 +-
 .../constants.ts                              |  38 +-
 .../data_drift_app_state.tsx}                 |  68 +-
 .../data_drift_chart_tooltip_body.tsx}        |  37 +-
 .../data_drift_overview_table.tsx}            | 131 ++--
 .../data_drift_page.tsx}                      | 246 +++----
 .../data_drift_utils.test.ts}                 |  10 +-
 .../data_drift_utils.ts}                      |   0
 .../data_drift_view.tsx}                      |  68 +-
 .../document_count_with_dual_brush.tsx        | 103 ++-
 .../{data_comparison => data_drift}/index.ts  |   9 +-
 .../{data_comparison => data_drift}/types.ts  |  39 +-
 .../use_data_drift_result.ts                  | 230 +++++--
 .../data_drift/use_state_manager.ts           |  84 +++
 .../public/application/index.ts               |   2 +-
 .../index_data_visualizer_view.tsx            |   4 +-
 .../components/search_panel/search_bar.tsx    |   4 +-
 .../index_data_visualizer/locator/locator.ts  |   4 +-
 .../utils/saved_search_utils.ts               |   1 +
 .../plugins/data_visualizer/public/index.ts   |   2 +-
 .../lazy_load_bundle/component_wrapper.tsx    |  10 +-
 .../public/lazy_load_bundle/index.ts          |   4 +-
 .../public/lazy_load_bundle/lazy/index.tsx    |   2 +-
 .../plugins/data_visualizer/public/plugin.ts  |   4 +-
 x-pack/plugins/ml/common/constants/locator.ts |   5 +-
 x-pack/plugins/ml/common/types/locator.ts     |   5 +-
 .../plugins/ml/common/types/trained_models.ts |   2 +
 x-pack/plugins/ml/kibana.jsonc                |   1 +
 x-pack/plugins/ml/public/application/app.tsx  |   1 +
 .../components/ml_page/side_nav.tsx           |   8 +-
 .../contexts/kibana/kibana_context.ts         |   2 +
 .../pages/job_map/components/controls.tsx     |  24 +
 .../data_drift_index_patterns_editor.tsx      | 436 +++++++++++++
 .../data_drift_page.tsx}                      |  18 +-
 .../data_drift/data_view_editor.tsx           | 190 ++++++
 .../data_drift/index_patterns_picker.tsx      | 205 ++++++
 .../new_job/pages/index_or_search/page.tsx    |   3 +-
 .../model_management/model_actions.tsx        |  34 +
 .../model_management/models_list.tsx          |   1 +
 .../public/application/routing/breadcrumbs.ts |   8 +-
 .../routes/datavisualizer/data_comparison.tsx |  26 +-
 .../routes/datavisualizer/data_drift.tsx      | 107 +++
 .../routing/routes/datavisualizer/index.ts    |   1 +
 .../routes/new_job/index_or_search.tsx        |  20 -
 .../services/ml_api_service/trained_models.ts |   1 +
 .../plugins/ml/public/locator/ml_locator.ts   |   5 +-
 x-pack/plugins/ml/public/plugin.ts            |   3 +
 .../search_deep_links.ts                      |   8 +-
 .../data_frame_analytics/analytics_manager.ts | 218 +------
 .../model_management/models_provider.ts       | 615 +++++++++++++-----
 .../server/routes/schemas/inference_schema.ts |   1 +
 .../ml/server/routes/trained_models.ts        |  76 ++-
 x-pack/plugins/ml/tsconfig.json               |   1 +
 .../public/navigation/links/constants.ts      |   2 +-
 .../navigation/links/sections/ml_links.ts     |   8 +-
 .../links/sections/ml_translations.ts         |  10 +-
 .../translations/translations/fr-FR.json      |   1 -
 .../translations/translations/ja-JP.json      |   1 -
 .../translations/translations/zh-CN.json      |   1 -
 .../apis/ml/trained_models/get_models.ts      |  68 +-
 .../apps/ml/data_visualizer/data_drift.ts     | 111 ++++
 .../apps/ml/data_visualizer/index.ts          |   1 +
 x-pack/test/functional/services/ml/api.ts     |  13 +-
 .../test/functional/services/ml/data_drift.ts | 214 ++++++
 x-pack/test/functional/services/ml/index.ts   |   5 +-
 .../services/ml/job_source_selection.ts       |   4 +
 .../test/functional/services/ml/navigation.ts |   4 +
 96 files changed, 3211 insertions(+), 1021 deletions(-)
 create mode 100644 src/plugins/data_view_editor/public/data_view_editor_service_lazy.ts
 create mode 100644 x-pack/plugins/data_visualizer/public/application/common/util/get_data_test_subject.ts
 delete mode 100644 x-pack/plugins/data_visualizer/public/application/data_comparison/charts/data_comparison_distribution_chart.tsx
 delete mode 100644 x-pack/plugins/data_visualizer/public/application/data_comparison/charts/overlap_distribution_chart.tsx
 create mode 100644 x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx
 create mode 100644 x-pack/plugins/data_visualizer/public/application/data_drift/charts/default_value_formatter.ts
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison => data_drift}/charts/no_charts_data.tsx (100%)
 create mode 100644 x-pack/plugins/data_visualizer/public/application/data_drift/charts/overlap_distribution_chart.tsx
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison => data_drift}/charts/single_distribution_chart.tsx (51%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison => data_drift}/constants.ts (99%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison/data_comparison_app_state.tsx => data_drift/data_drift_app_state.tsx} (52%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison/data_comparison_chart_tooltip_body.tsx => data_drift/data_drift_chart_tooltip_body.tsx} (80%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison/data_comparison_overview_table.tsx => data_drift/data_drift_overview_table.tsx} (64%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison/data_comparison_page.tsx => data_drift/data_drift_page.tsx} (60%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison/data_comparison_utils.test.ts => data_drift/data_drift_utils.test.ts} (87%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison/data_comparison_utils.ts => data_drift/data_drift_utils.ts} (100%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison/data_comparison_view.tsx => data_drift/data_drift_view.tsx} (78%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison => data_drift}/document_count_with_dual_brush.tsx (58%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison => data_drift}/index.ts (64%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison => data_drift}/types.ts (76%)
 rename x-pack/plugins/data_visualizer/public/application/{data_comparison => data_drift}/use_data_drift_result.ts (78%)
 create mode 100644 x-pack/plugins/data_visualizer/public/application/data_drift/use_state_manager.ts
 create mode 100644 x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_drift_index_patterns_editor.tsx
 rename x-pack/plugins/ml/public/application/datavisualizer/{data_comparison/data_comparison_page.tsx => data_drift/data_drift_page.tsx} (69%)
 create mode 100644 x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_view_editor.tsx
 create mode 100644 x-pack/plugins/ml/public/application/datavisualizer/data_drift/index_patterns_picker.tsx
 create mode 100644 x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_drift.tsx
 create mode 100644 x-pack/test/functional/apps/ml/data_visualizer/data_drift.ts
 create mode 100644 x-pack/test/functional/services/ml/data_drift.ts

diff --git a/api_docs/data_view_editor.devdocs.json b/api_docs/data_view_editor.devdocs.json
index 6ecfaa57fcaa..bc40d7a29ec6 100644
--- a/api_docs/data_view_editor.devdocs.json
+++ b/api_docs/data_view_editor.devdocs.json
@@ -320,4 +320,4 @@
     "misc": [],
     "objects": []
   }
-}
\ No newline at end of file
+}
diff --git a/api_docs/kbn_deeplinks_ml.devdocs.json b/api_docs/kbn_deeplinks_ml.devdocs.json
index a1d4f7262f54..d15d3e61bc63 100644
--- a/api_docs/kbn_deeplinks_ml.devdocs.json
+++ b/api_docs/kbn_deeplinks_ml.devdocs.json
@@ -45,7 +45,7 @@
         "label": "DeepLinkId",
         "description": [],
         "signature": [
-          "\"ml\" | \"ml:nodes\" | \"ml:notifications\" | \"ml:overview\" | \"ml:settings\" | \"ml:dataVisualizer\" | \"ml:anomalyDetection\" | \"ml:anomalyExplorer\" | \"ml:singleMetricViewer\" | \"ml:dataComparison\" | \"ml:dataFrameAnalytics\" | \"ml:resultExplorer\" | \"ml:analyticsMap\" | \"ml:aiOps\" | \"ml:logRateAnalysis\" | \"ml:logPatternAnalysis\" | \"ml:changePointDetections\" | \"ml:modelManagement\" | \"ml:nodesOverview\" | \"ml:memoryUsage\" | \"ml:fileUpload\" | \"ml:indexDataVisualizer\" | \"ml:calendarSettings\" | \"ml:filterListsSettings\""
+          "\"ml\" | \"ml:nodes\" | \"ml:notifications\" | \"ml:overview\" | \"ml:settings\" | \"ml:dataVisualizer\" | \"ml:anomalyDetection\" | \"ml:anomalyExplorer\" | \"ml:singleMetricViewer\" | \"ml:dataDrift\" | \"ml:dataFrameAnalytics\" | \"ml:resultExplorer\" | \"ml:analyticsMap\" | \"ml:aiOps\" | \"ml:logRateAnalysis\" | \"ml:logPatternAnalysis\" | \"ml:changePointDetections\" | \"ml:modelManagement\" | \"ml:nodesOverview\" | \"ml:memoryUsage\" | \"ml:fileUpload\" | \"ml:indexDataVisualizer\" | \"ml:calendarSettings\" | \"ml:filterListsSettings\""
         ],
         "path": "packages/deeplinks/ml/deep_links.ts",
         "deprecated": false,
@@ -60,7 +60,7 @@
         "label": "LinkId",
         "description": [],
         "signature": [
-          "\"nodes\" | \"notifications\" | \"overview\" | \"settings\" | \"dataVisualizer\" | \"anomalyDetection\" | \"anomalyExplorer\" | \"singleMetricViewer\" | \"dataComparison\" | \"dataFrameAnalytics\" | \"resultExplorer\" | \"analyticsMap\" | \"aiOps\" | \"logRateAnalysis\" | \"logPatternAnalysis\" | \"changePointDetections\" | \"modelManagement\" | \"nodesOverview\" | \"memoryUsage\" | \"fileUpload\" | \"indexDataVisualizer\" | \"calendarSettings\" | \"filterListsSettings\""
+          "\"nodes\" | \"notifications\" | \"overview\" | \"settings\" | \"dataVisualizer\" | \"anomalyDetection\" | \"anomalyExplorer\" | \"singleMetricViewer\" | \"dataDrift\" | \"dataFrameAnalytics\" | \"resultExplorer\" | \"analyticsMap\" | \"aiOps\" | \"logRateAnalysis\" | \"logPatternAnalysis\" | \"changePointDetections\" | \"modelManagement\" | \"nodesOverview\" | \"memoryUsage\" | \"fileUpload\" | \"indexDataVisualizer\" | \"calendarSettings\" | \"filterListsSettings\""
         ],
         "path": "packages/deeplinks/ml/deep_links.ts",
         "deprecated": false,
@@ -70,4 +70,4 @@
     ],
     "objects": []
   }
-}
\ No newline at end of file
+}
diff --git a/packages/deeplinks/ml/deep_links.ts b/packages/deeplinks/ml/deep_links.ts
index dc6accb27527..1c16543512b0 100644
--- a/packages/deeplinks/ml/deep_links.ts
+++ b/packages/deeplinks/ml/deep_links.ts
@@ -15,7 +15,7 @@ export type LinkId =
   | 'anomalyDetection'
   | 'anomalyExplorer'
   | 'singleMetricViewer'
-  | 'dataComparison'
+  | 'dataDrift'
   | 'dataFrameAnalytics'
   | 'resultExplorer'
   | 'analyticsMap'
diff --git a/packages/default-nav/ml/default_navigation.ts b/packages/default-nav/ml/default_navigation.ts
index 829c2307299d..c0035f6f25db 100644
--- a/packages/default-nav/ml/default_navigation.ts
+++ b/packages/default-nav/ml/default_navigation.ts
@@ -114,9 +114,9 @@ export const defaultNavigation: MlNodeDefinition = {
         },
         {
           title: i18n.translate('defaultNavigation.ml.dataComparison', {
-            defaultMessage: 'Data comparison',
+            defaultMessage: 'Data drift',
           }),
-          link: 'ml:dataComparison',
+          link: 'ml:dataDrift',
         },
       ],
     },
diff --git a/packages/shared-ux/chrome/navigation/mocks/src/navlinks.ts b/packages/shared-ux/chrome/navigation/mocks/src/navlinks.ts
index c3d3b756eaae..b0adfd22734f 100644
--- a/packages/shared-ux/chrome/navigation/mocks/src/navlinks.ts
+++ b/packages/shared-ux/chrome/navigation/mocks/src/navlinks.ts
@@ -62,7 +62,7 @@ const allNavLinks: AppDeepLinkId[] = [
   'ml:fileUpload',
   'ml:filterListsSettings',
   'ml:indexDataVisualizer',
-  'ml:dataComparison',
+  'ml:dataDrift',
   'ml:logPatternAnalysis',
   'ml:logRateAnalysis',
   'ml:memoryUsage',
diff --git a/packages/shared-ux/chrome/navigation/src/ui/__snapshots__/default_navigation.test.tsx.snap b/packages/shared-ux/chrome/navigation/src/ui/__snapshots__/default_navigation.test.tsx.snap
index f7f08fe075f5..d73d9c68385b 100644
--- a/packages/shared-ux/chrome/navigation/src/ui/__snapshots__/default_navigation.test.tsx.snap
+++ b/packages/shared-ux/chrome/navigation/src/ui/__snapshots__/default_navigation.test.tsx.snap
@@ -473,21 +473,21 @@ Array [
             "children": undefined,
             "deepLink": Object {
               "baseUrl": "/mocked",
-              "href": "http://mocked/ml:dataComparison",
-              "id": "ml:dataComparison",
-              "title": "Deeplink ml:dataComparison",
-              "url": "/mocked/ml:dataComparison",
+              "href": "http://mocked/ml:dataDrift",
+              "id": "ml:dataDrift",
+              "title": "Deeplink ml:dataDrift",
+              "url": "/mocked/ml:dataDrift",
             },
             "href": undefined,
-            "id": "ml:dataComparison",
+            "id": "ml:dataDrift",
             "isActive": false,
             "path": Array [
               "rootNav:ml",
               "data_visualizer",
-              "ml:dataComparison",
+              "ml:dataDrift",
             ],
             "renderItem": undefined,
-            "title": "Data comparison",
+            "title": "Data drift",
           },
         ],
         "deepLink": undefined,
diff --git a/src/plugins/data_view_editor/public/data_view_editor_service.ts b/src/plugins/data_view_editor/public/data_view_editor_service.ts
index 8d709ca30fe3..c9b382447fd8 100644
--- a/src/plugins/data_view_editor/public/data_view_editor_service.ts
+++ b/src/plugins/data_view_editor/public/data_view_editor_service.ts
@@ -37,12 +37,24 @@ export const matchedIndiciesDefault = {
   visibleIndices: [],
 };
 
+/**
+ * ConstructorArgs for DataViewEditorService
+ */
 export interface DataViewEditorServiceConstructorArgs {
+  /**
+   * Dependencies for the DataViewEditorService
+   */
   services: {
     http: HttpSetup;
     dataViews: DataViewsServicePublic;
   };
+  /**
+   * Whether service requires requireTimestampField
+   */
   requireTimestampField?: boolean;
+  /**
+   * Initial type, indexPattern, and name to populate service
+   */
   initialValues: {
     name?: string;
     type?: INDEX_PATTERN_TYPE;
diff --git a/src/plugins/data_view_editor/public/data_view_editor_service_lazy.ts b/src/plugins/data_view_editor/public/data_view_editor_service_lazy.ts
new file mode 100644
index 000000000000..14c9e809e984
--- /dev/null
+++ b/src/plugins/data_view_editor/public/data_view_editor_service_lazy.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { DataViewEditorService } from './data_view_editor_service';
diff --git a/src/plugins/data_view_editor/public/index.ts b/src/plugins/data_view_editor/public/index.ts
index 3d6d40c9846a..7b55450cd292 100644
--- a/src/plugins/data_view_editor/public/index.ts
+++ b/src/plugins/data_view_editor/public/index.ts
@@ -20,7 +20,11 @@
 
 import { DataViewEditorPlugin } from './plugin';
 
-export type { PluginStart as DataViewEditorStart, DataViewEditorProps } from './types';
+export type {
+  PluginStart as DataViewEditorStart,
+  DataViewEditorProps,
+  DataViewEditorService,
+} from './types';
 
 export function plugin() {
   return new DataViewEditorPlugin();
diff --git a/src/plugins/data_view_editor/public/mocks.ts b/src/plugins/data_view_editor/public/mocks.ts
index fe4f3663cbab..0ea3587b2b7b 100644
--- a/src/plugins/data_view_editor/public/mocks.ts
+++ b/src/plugins/data_view_editor/public/mocks.ts
@@ -23,6 +23,7 @@ const createStartContract = (): Start => {
     userPermissions: {
       editDataView: jest.fn(),
     },
+    dataViewEditorServiceFactory: jest.fn(),
   };
 };
 
diff --git a/src/plugins/data_view_editor/public/plugin.tsx b/src/plugins/data_view_editor/public/plugin.tsx
index 232958fbb2c2..34263ad6cdca 100644
--- a/src/plugins/data_view_editor/public/plugin.tsx
+++ b/src/plugins/data_view_editor/public/plugin.tsx
@@ -63,6 +63,14 @@ export class DataViewEditorPlugin
       userPermissions: {
         editDataView: () => dataViews.getCanSaveSync(),
       },
+      /**
+       * Helper method to generate a new data view editor service.
+       * @returns DataViewEditorService
+       */
+      dataViewEditorServiceFactory: async () => {
+        const module = await import('./data_view_editor_service_lazy');
+        return module;
+      },
     };
   }
 
diff --git a/src/plugins/data_view_editor/public/types.ts b/src/plugins/data_view_editor/public/types.ts
index 93fe26ab4762..472fe2393a4a 100644
--- a/src/plugins/data_view_editor/public/types.ts
+++ b/src/plugins/data_view_editor/public/types.ts
@@ -24,6 +24,7 @@ import type {
   INDEX_PATTERN_TYPE,
   MatchedItem,
 } from '@kbn/data-views-plugin/public';
+import type { DataViewEditorService } from './data_view_editor_service';
 import { DataPublicPluginStart, IndexPatternAggRestrictions } from './shared_imports';
 
 export interface DataViewEditorContext {
@@ -74,12 +75,20 @@ export interface DataViewEditorProps {
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface PluginSetup {}
 
+export type { DataViewEditorService };
 export interface PluginStart {
   openEditor(options: DataViewEditorProps): () => void;
   IndexPatternEditorComponent: FC<DataViewEditorProps>;
   userPermissions: {
     editDataView: () => boolean;
   };
+  /**
+   * Helper method to generate a new data view editor service.
+   * @param requireTimestampField - whether service requires requireTimestampField
+   * @param initialValues - initial type, indexPattern, and name to populate service
+   * @returns DataViewEditorService
+   */
+  dataViewEditorServiceFactory: () => Promise<typeof import('./data_view_editor_service_lazy')>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
diff --git a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
index 453d20385e70..656a59a6425f 100644
--- a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
+++ b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
@@ -711,6 +711,7 @@ exports[`Overview renders correctly when there is no user data view 1`] = `
     dataViewEditor={
       Object {
         "IndexPatternEditorComponent": [MockFunction],
+        "dataViewEditorServiceFactory": [MockFunction],
         "openEditor": [MockFunction],
         "userPermissions": Object {
           "editDataView": [MockFunction],
diff --git a/src/plugins/saved_objects_finder/public/finder/saved_object_finder.tsx b/src/plugins/saved_objects_finder/public/finder/saved_object_finder.tsx
index aad1734dff65..d660a8bf2857 100644
--- a/src/plugins/saved_objects_finder/public/finder/saved_object_finder.tsx
+++ b/src/plugins/saved_objects_finder/public/finder/saved_object_finder.tsx
@@ -75,6 +75,7 @@ interface BaseSavedObjectFinder {
   savedObjectMetaData: Array<SavedObjectMetaData<FinderAttributes>>;
   showFilter?: boolean;
   leftChildren?: ReactElement | ReactElement[];
+  children?: ReactElement | ReactElement[];
   helpText?: string;
 }
 
diff --git a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
index 967821db0e0d..dd0d30862ea7 100644
--- a/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
+++ b/x-pack/packages/ml/aiops_components/src/document_count_chart/document_count_chart.tsx
@@ -104,6 +104,8 @@ export interface DocumentCountChartProps {
   brushSelectionUpdateHandler?: BrushSelectionUpdateHandler;
   /** Optional width */
   width?: number;
+  /** Optional chart height */
+  height?: number;
   /** Data chart points */
   chartPoints: LogRateHistogramItem[];
   /** Data chart points split */
@@ -130,6 +132,8 @@ export interface DocumentCountChartProps {
   deviationBrush?: BrushSettings;
   /** Optional settings override for the 'baseline' brush */
   baselineBrush?: BrushSettings;
+  /** Optional data-test-subject */
+  dataTestSubj?: string;
 }
 
 const SPEC_ID = 'document_count';
@@ -174,9 +178,11 @@ function getBaselineBadgeOverflow(
  */
 export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
   const {
+    dataTestSubj,
     dependencies,
     brushSelectionUpdateHandler,
     width,
+    height,
     chartPoints,
     chartPointsSplit,
     timeRangeEarliest,
@@ -417,7 +423,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
   return (
     <>
       {isBrushVisible && (
-        <div className="aiopsHistogramBrushes" data-test-subj="aiopsHistogramBrushes">
+        <div className="aiopsHistogramBrushes" data-test-subj={'aiopsHistogramBrushes'}>
           <div css={{ height: BADGE_HEIGHT }}>
             <BrushBadge
               label={
@@ -461,11 +467,14 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
           </div>
         </div>
       )}
-      <div css={{ width: width ?? '100%' }} data-test-subj="aiopsDocumentCountChart">
+      <div
+        css={{ width: width ?? '100%' }}
+        data-test-subj={dataTestSubj ?? 'aiopsDocumentCountChart'}
+      >
         <Chart
           size={{
             width: '100%',
-            height: 120,
+            height: height ?? 120,
           }}
         >
           <Settings
diff --git a/x-pack/packages/ml/random_sampler_utils/src/random_sampler_manager.ts b/x-pack/packages/ml/random_sampler_utils/src/random_sampler_manager.ts
index 364fbdfc4b8a..841253981b9e 100644
--- a/x-pack/packages/ml/random_sampler_utils/src/random_sampler_manager.ts
+++ b/x-pack/packages/ml/random_sampler_utils/src/random_sampler_manager.ts
@@ -58,8 +58,8 @@ export class RandomSampler {
   private docCount$ = new BehaviorSubject<number>(0);
   private mode$ = new BehaviorSubject<RandomSamplerOption>(RANDOM_SAMPLER_OPTION.ON_AUTOMATIC);
   private probability$ = new BehaviorSubject<RandomSamplerProbability>(DEFAULT_PROBABILITY);
-  private setRandomSamplerModeInStorage: (mode: RandomSamplerOption) => void;
-  private setRandomSamplerProbabilityInStorage: (prob: RandomSamplerProbability) => void;
+  private setRandomSamplerModeInStorage?: (mode: RandomSamplerOption) => void;
+  private setRandomSamplerProbabilityInStorage?: (prob: RandomSamplerProbability) => void;
 
   /**
    * Initial values
@@ -69,15 +69,17 @@ export class RandomSampler {
    * @param setRandomSamplerProbability - initial setter for random sampler probability
    */
   constructor(
-    randomSamplerMode: RandomSamplerOption,
-    setRandomSamplerMode: (mode: RandomSamplerOption) => void,
-    randomSamplerProbability: RandomSamplerProbability,
-    setRandomSamplerProbability: (prob: RandomSamplerProbability) => void
+    randomSamplerMode?: RandomSamplerOption,
+    setRandomSamplerMode?: (mode: RandomSamplerOption) => void,
+    randomSamplerProbability?: RandomSamplerProbability,
+    setRandomSamplerProbability?: (prob: RandomSamplerProbability) => void
   ) {
-    this.mode$.next(randomSamplerMode);
-    this.setRandomSamplerModeInStorage = setRandomSamplerMode;
-    this.probability$.next(randomSamplerProbability);
-    this.setRandomSamplerProbabilityInStorage = setRandomSamplerProbability;
+    if (randomSamplerMode) this.mode$.next(randomSamplerMode);
+
+    if (setRandomSamplerMode) this.setRandomSamplerModeInStorage = setRandomSamplerMode;
+    if (randomSamplerProbability) this.probability$.next(randomSamplerProbability);
+    if (setRandomSamplerProbability)
+      this.setRandomSamplerProbabilityInStorage = setRandomSamplerProbability;
   }
 
   /**
@@ -100,7 +102,9 @@ export class RandomSampler {
    * @param {RandomSamplerOption} mode - mode to use when wrapping/unwrapping random sampling aggs
    */
   public setMode(mode: RandomSamplerOption) {
-    this.setRandomSamplerModeInStorage(mode);
+    if (this.setRandomSamplerModeInStorage) {
+      this.setRandomSamplerModeInStorage(mode);
+    }
     return this.mode$.next(mode);
   }
 
@@ -123,7 +127,9 @@ export class RandomSampler {
    * @param {RandomSamplerProbability} probability - numeric value 0 < probability < 1 to use for random sampling
    */
   public setProbability(probability: RandomSamplerProbability) {
-    this.setRandomSamplerProbabilityInStorage(probability);
+    if (this.setRandomSamplerProbabilityInStorage) {
+      this.setRandomSamplerProbabilityInStorage(probability);
+    }
     return this.probability$.next(probability);
   }
 
diff --git a/x-pack/plugins/data_visualizer/public/api/index.ts b/x-pack/plugins/data_visualizer/public/api/index.ts
index a07f4041637b..68c265e200f1 100644
--- a/x-pack/plugins/data_visualizer/public/api/index.ts
+++ b/x-pack/plugins/data_visualizer/public/api/index.ts
@@ -7,7 +7,7 @@
 
 import { lazyLoadModules } from '../lazy_load_bundle';
 import type {
-  DataComparisonSpec,
+  DataDriftSpec,
   FileDataVisualizerSpec,
   IndexDataVisualizerSpec,
 } from '../application';
@@ -22,7 +22,7 @@ export async function getIndexDataVisualizerComponent(): Promise<() => IndexData
   return () => modules.IndexDataVisualizer;
 }
 
-export async function getDataComparisonComponent(): Promise<() => DataComparisonSpec> {
+export async function getDataDriftComponent(): Promise<() => DataDriftSpec> {
   const modules = await lazyLoadModules();
-  return () => modules.DataComparison;
+  return () => modules.DataDrift;
 }
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/total_count_header.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/total_count_header.tsx
index 99ecd72d2985..e681e6c85efc 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/total_count_header.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/total_count_header.tsx
@@ -9,30 +9,44 @@ import { EuiFlexItem, EuiText, EuiLoadingSpinner, EuiIconTip } from '@elastic/eu
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-
+import { getDataTestSubject } from '../../util/get_data_test_subject';
 const SIGFIGS_IF_ROUNDING = 3; // Number of sigfigs to use for values < 10
 
+const defaultDocCountLabel = i18n.translate(
+  'xpack.dataVisualizer.searchPanel.totalDocumentsLabel',
+  { defaultMessage: 'Total documents' }
+);
+
 export const TotalCountHeader = ({
+  id,
   totalCount,
   approximate,
   loading,
+  label = defaultDocCountLabel,
 }: {
+  id?: string;
   totalCount: number;
+  label?: string;
   loading?: boolean;
   approximate?: boolean;
 }) => {
   return (
     <EuiFlexItem grow={false} style={{ flexDirection: 'row' }}>
-      <EuiText size="s" data-test-subj="dataVisualizerTotalDocCountHeader" textAlign="center">
+      <EuiText
+        size="s"
+        data-test-subj={getDataTestSubject('dataVisualizerTotalDocCountHeader', id)}
+        textAlign="center"
+      >
         <FormattedMessage
           id="xpack.dataVisualizer.searchPanel.totalDocCountLabel"
-          defaultMessage="Total documents: {prepend}{strongTotalCount}"
+          defaultMessage="{label}: {prepend}{strongTotalCount}"
           values={{
+            label,
             prepend: !loading && approximate ? '~' : '',
             strongTotalCount: loading ? (
               <EuiLoadingSpinner size="s" />
             ) : (
-              <strong data-test-subj="dataVisualizerTotalDocCount">
+              <strong data-test-subj={getDataTestSubject('dataVisualizerTotalDocCount', id)}>
                 <FormattedMessage
                   id="xpack.dataVisualizer.searchPanel.totalDocCountNumber"
                   defaultMessage="{totalCount, plural, one {#} other {#}}"
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/random_sampling_menu/random_sampling_menu.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/random_sampling_menu/random_sampling_menu.tsx
index 41b041366201..99c6350615f8 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/components/random_sampling_menu/random_sampling_menu.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/random_sampling_menu/random_sampling_menu.tsx
@@ -19,6 +19,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { RandomSampler } from '@kbn/ml-random-sampler-utils';
+import { getDataTestSubject } from '../../util/get_data_test_subject';
 import { RandomSamplerRangeSlider } from './random_sampler_range_slider';
 import {
   MIN_SAMPLER_PROBABILITY,
@@ -31,9 +32,10 @@ import { ProbabilityUsedMessage } from './probability_used';
 interface Props {
   randomSampler: RandomSampler;
   reload: () => void;
+  id?: string;
 }
 
-export const SamplingMenu: FC<Props> = ({ randomSampler, reload }) => {
+export const SamplingMenu: FC<Props> = ({ randomSampler, reload, id }) => {
   const [showSamplingOptionsPopover, setShowSamplingOptionsPopover] = useState(false);
 
   const samplingProbability = useObservable(
@@ -129,13 +131,15 @@ export const SamplingMenu: FC<Props> = ({ randomSampler, reload }) => {
 
   return (
     <EuiPopover
-      data-test-subj="aiopsRandomSamplerOptionsPopover"
+      data-test-subj={getDataTestSubject('aiopsRandomSamplerOptionsPopover', id)}
       id="aiopsSamplingOptions"
       button={
         <EuiButtonEmpty
+          data-test-subj={getDataTestSubject('aiopsRandomSamplerOptionsButton', id)}
           onClick={() => setShowSamplingOptionsPopover(!showSamplingOptionsPopover)}
           iconSide="right"
           iconType="arrowDown"
+          size="s"
         >
           {buttonText}
         </EuiButtonEmpty>
@@ -152,7 +156,7 @@ export const SamplingMenu: FC<Props> = ({ randomSampler, reload }) => {
         <EuiSpacer size="m" />
 
         <EuiFormRow
-          data-test-subj="aiopsRandomSamplerOptionsFormRow"
+          data-test-subj={getDataTestSubject('aiopsRandomSamplerOptionsFormRow', id)}
           label={i18n.translate(
             'xpack.dataVisualizer.randomSamplerSettingsPopUp.randomSamplerRowLabel',
             {
@@ -161,7 +165,7 @@ export const SamplingMenu: FC<Props> = ({ randomSampler, reload }) => {
           )}
         >
           <EuiSelect
-            data-test-subj="aiopsRandomSamplerOptionsSelect"
+            data-test-subj={getDataTestSubject('aiopsRandomSamplerOptionsSelect', id)}
             options={RANDOM_SAMPLER_SELECT_OPTIONS}
             value={randomSamplerPreference}
             onChange={(e) => setRandomSamplerPreference(e.target.value as RandomSamplerOption)}
diff --git a/x-pack/plugins/data_visualizer/public/application/common/hooks/use_data.ts b/x-pack/plugins/data_visualizer/public/application/common/hooks/use_data.ts
index 9e7e3f963329..65c882ba551d 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/hooks/use_data.ts
+++ b/x-pack/plugins/data_visualizer/public/application/common/hooks/use_data.ts
@@ -6,7 +6,6 @@
  */
 
 import { DataView } from '@kbn/data-views-plugin/common';
-import * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { Dictionary } from '@kbn/ml-url-state';
 import { Moment } from 'moment';
 import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
@@ -14,8 +13,14 @@ import { useEffect, useMemo, useState } from 'react';
 import { mlTimefilterRefresh$, useTimefilter } from '@kbn/ml-date-picker';
 import { merge } from 'rxjs';
 import { RandomSampler } from '@kbn/ml-random-sampler-utils';
+import { mapAndFlattenFilters } from '@kbn/data-plugin/public';
+import { Query } from '@kbn/es-query';
+import { SearchQueryLanguage } from '@kbn/ml-query-utils';
+import { createMergedEsQuery } from '../../index_data_visualizer/utils/saved_search_utils';
+import { useDataDriftStateManagerContext } from '../../data_drift/use_state_manager';
+import type { InitialSettings } from '../../data_drift/use_data_drift_result';
 import {
-  DocumentStatsSearchStrategyParams,
+  type DocumentStatsSearchStrategyParams,
   useDocumentCountStats,
 } from './use_document_count_stats';
 import { useDataVisualizerKibana } from '../../kibana_context';
@@ -24,16 +29,23 @@ import { useTimeBuckets } from './use_time_buckets';
 const DEFAULT_BAR_TARGET = 75;
 
 export const useData = (
+  initialSettings: InitialSettings,
   selectedDataView: DataView,
   contextId: string,
-  searchQuery: estypes.QueryDslQueryContainer,
+  searchString: Query['query'],
+  searchQueryLanguage: SearchQueryLanguage,
   randomSampler: RandomSampler,
+  randomSamplerProd: RandomSampler,
   onUpdate?: (params: Dictionary<unknown>) => void,
   barTarget: number = DEFAULT_BAR_TARGET,
   timeRange?: { min: Moment; max: Moment }
 ) => {
   const {
-    services: { executionContext },
+    services: {
+      executionContext,
+      uiSettings,
+      data: { query: queryManager },
+    },
   } = useDataVisualizerKibana();
 
   useExecutionContext(executionContext, {
@@ -50,26 +62,95 @@ export const useData = (
     autoRefreshSelector: true,
   });
 
-  const docCountRequestParams: DocumentStatsSearchStrategyParams | undefined = useMemo(() => {
-    const timefilterActiveBounds = timeRange ?? timefilter.getActiveBounds();
-    if (timefilterActiveBounds !== undefined) {
-      _timeBuckets.setInterval('auto');
-      _timeBuckets.setBounds(timefilterActiveBounds);
-      _timeBuckets.setBarTarget(barTarget);
-      return {
-        earliest: timefilterActiveBounds.min?.valueOf(),
-        latest: timefilterActiveBounds.max?.valueOf(),
-        intervalMs: _timeBuckets.getInterval()?.asMilliseconds(),
-        index: selectedDataView.getIndexPattern(),
-        searchQuery,
-        timeFieldName: selectedDataView.timeFieldName,
-        runtimeFieldMap: selectedDataView.getRuntimeMappings(),
-      };
-    }
+  const { reference: referenceStateManager, comparison: comparisonStateManager } =
+    useDataDriftStateManagerContext();
+
+  const docCountRequestParams:
+    | {
+        reference: DocumentStatsSearchStrategyParams | undefined;
+        comparison: DocumentStatsSearchStrategyParams | undefined;
+      }
+    | undefined = useMemo(
+    () => {
+      const searchQuery =
+        searchString !== undefined && searchQueryLanguage !== undefined
+          ? { query: searchString, language: searchQueryLanguage }
+          : undefined;
+
+      const timefilterActiveBounds = timeRange ?? timefilter.getActiveBounds();
+      if (timefilterActiveBounds !== undefined) {
+        _timeBuckets.setInterval('auto');
+        _timeBuckets.setBounds(timefilterActiveBounds);
+        _timeBuckets.setBarTarget(barTarget);
+        const query = {
+          earliest: timefilterActiveBounds.min?.valueOf(),
+          latest: timefilterActiveBounds.max?.valueOf(),
+          intervalMs: _timeBuckets.getInterval()?.asMilliseconds(),
+          timeFieldName: selectedDataView.timeFieldName,
+          runtimeFieldMap: selectedDataView.getRuntimeMappings(),
+        };
+
+        const refQuery = createMergedEsQuery(
+          searchQuery,
+          mapAndFlattenFilters([
+            ...queryManager.filterManager.getFilters(),
+            ...(referenceStateManager.filters ?? []),
+          ]),
+          selectedDataView,
+          uiSettings
+        );
+
+        const compQuery = createMergedEsQuery(
+          searchQuery,
+          mapAndFlattenFilters([
+            ...queryManager.filterManager.getFilters(),
+            ...(comparisonStateManager.filters ?? []),
+          ]),
+          selectedDataView,
+          uiSettings
+        );
+
+        return {
+          reference: {
+            ...query,
+            searchQuery: refQuery,
+            index: initialSettings ? initialSettings.reference : selectedDataView.getIndexPattern(),
+          },
+          comparison: {
+            ...query,
+            searchQuery: compQuery,
+            index: initialSettings
+              ? initialSettings.comparison
+              : selectedDataView.getIndexPattern(),
+          },
+        };
+      }
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastRefresh, JSON.stringify({ searchQuery, timeRange })]);
+    [
+      lastRefresh,
+      searchString,
+      searchQueryLanguage,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify({
+        timeRange,
+        globalFilters: queryManager.filterManager.getFilters(),
+        compFilters: comparisonStateManager?.filters,
+        refFilters: referenceStateManager?.filters,
+      }),
+    ]
+  );
 
-  const documentStats = useDocumentCountStats(docCountRequestParams, lastRefresh, randomSampler);
+  const documentStats = useDocumentCountStats(
+    docCountRequestParams?.reference,
+    lastRefresh,
+    randomSampler
+  );
+  const documentStatsProd = useDocumentCountStats(
+    docCountRequestParams?.comparison,
+    lastRefresh,
+    randomSamplerProd
+  );
 
   useEffect(() => {
     const timefilterUpdateSubscription = merge(
@@ -102,12 +183,19 @@ export const useData = (
 
   return {
     documentStats,
+    documentStatsProd,
     timefilter,
     /** Start timestamp filter */
-    earliest: docCountRequestParams?.earliest,
+    earliest: Math.min(
+      docCountRequestParams?.reference?.earliest ?? 0,
+      docCountRequestParams?.comparison?.earliest ?? 0
+    ),
     /** End timestamp filter */
-    latest: docCountRequestParams?.latest,
-    intervalMs: docCountRequestParams?.intervalMs,
+    latest: Math.max(
+      docCountRequestParams?.reference?.latest ?? 0,
+      docCountRequestParams?.comparison?.latest ?? 0
+    ),
+    intervalMs: docCountRequestParams?.reference?.intervalMs,
     forceRefresh: () => setLastRefresh(Date.now()),
   };
 };
diff --git a/x-pack/plugins/data_visualizer/public/application/common/hooks/use_document_count_stats.ts b/x-pack/plugins/data_visualizer/public/application/common/hooks/use_document_count_stats.ts
index 6514b1f98a29..87a9a37d4d2c 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/hooks/use_document_count_stats.ts
+++ b/x-pack/plugins/data_visualizer/public/application/common/hooks/use_document_count_stats.ts
@@ -236,6 +236,7 @@ export function useDocumentCountStats<TParams extends DocumentStatsSearchStrateg
             totalNumDocs: totalCount,
             seed: RANDOM_SAMPLER_SEED,
           });
+
       const resp = await lastValueFrom(
         data.search.search(
           {
diff --git a/x-pack/plugins/data_visualizer/public/application/common/hooks/use_search.ts b/x-pack/plugins/data_visualizer/public/application/common/hooks/use_search.ts
index 0dc825dd295f..e8e0200e368d 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/hooks/use_search.ts
+++ b/x-pack/plugins/data_visualizer/public/application/common/hooks/use_search.ts
@@ -10,9 +10,9 @@ import type { SavedSearch } from '@kbn/saved-search-plugin/public';
 
 import { useEffect } from 'react';
 import { FilterStateStore } from '@kbn/es-query';
+import type { BasicAppState } from '../../data_drift/types';
 import { getEsQueryFromSavedSearch } from '../../index_data_visualizer/utils/saved_search_utils';
 import { useDataVisualizerKibana } from '../../kibana_context';
-import type { BasicAppState } from '../../data_comparison/types';
 
 export const useSearch = (
   { dataView, savedSearch }: { dataView: DataView; savedSearch: SavedSearch | null | undefined },
diff --git a/x-pack/plugins/data_visualizer/public/application/common/util/get_data_test_subject.ts b/x-pack/plugins/data_visualizer/public/application/common/util/get_data_test_subject.ts
new file mode 100644
index 000000000000..1080127900ba
--- /dev/null
+++ b/x-pack/plugins/data_visualizer/public/application/common/util/get_data_test_subject.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const getDataTestSubject = (testSubject: string, id?: string) => {
+  if (!id) return testSubject;
+  return `${testSubject}-${id}`;
+};
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/data_comparison_distribution_chart.tsx b/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/data_comparison_distribution_chart.tsx
deleted file mode 100644
index 96a4876d5df1..000000000000
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/data_comparison_distribution_chart.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { Axis, BarSeries, Chart, Position, ScaleType, Settings, Tooltip } from '@elastic/charts';
-import React from 'react';
-import { NoChartsData } from './no_charts_data';
-import { ComparisonHistogram } from '../types';
-import { DataComparisonChartTooltipBody } from '../data_comparison_chart_tooltip_body';
-import { COMPARISON_LABEL, DATA_COMPARISON_TYPE } from '../constants';
-
-export const DataComparisonDistributionChart = ({
-  featureName,
-  fieldType,
-  data,
-  colors,
-}: {
-  featureName: string;
-  fieldType: string;
-  data: ComparisonHistogram[];
-  colors: { referenceColor: string; productionColor: string };
-}) => {
-  if (data.length === 0) return <NoChartsData />;
-  return (
-    <Chart>
-      <Tooltip body={DataComparisonChartTooltipBody} />
-      <Settings />
-      <Axis id="bottom" position={Position.Bottom} />
-      <Axis id="left2" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
-      <BarSeries
-        id="data-drift-viz"
-        name={featureName}
-        xScaleType={
-          fieldType === DATA_COMPARISON_TYPE.NUMERIC ? ScaleType.Linear : ScaleType.Ordinal
-        }
-        yScaleType={ScaleType.Linear}
-        xAccessor="key"
-        yAccessors={['percentage']}
-        splitSeriesAccessors={['g']}
-        data={data}
-        color={(identifier) => {
-          const key = identifier.seriesKeys[0];
-          return key === COMPARISON_LABEL ? colors.productionColor : colors.referenceColor;
-        }}
-      />
-    </Chart>
-  );
-};
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/overlap_distribution_chart.tsx b/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/overlap_distribution_chart.tsx
deleted file mode 100644
index 34f6a797831c..000000000000
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/overlap_distribution_chart.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { AreaSeries, Chart, CurveType, ScaleType, Settings, Tooltip } from '@elastic/charts';
-import { i18n } from '@kbn/i18n';
-import React from 'react';
-import { NoChartsData } from './no_charts_data';
-import type { ComparisonHistogram, DataComparisonField } from '../types';
-import { DataComparisonChartTooltipBody } from '../data_comparison_chart_tooltip_body';
-import { COMPARISON_LABEL, DATA_COMPARISON_TYPE, REFERENCE_LABEL } from '../constants';
-
-export const OverlapDistributionComparison = ({
-  data,
-  colors,
-  fieldType,
-  fieldName,
-}: {
-  data: ComparisonHistogram[];
-  colors: { referenceColor: string; productionColor: string };
-  fieldType?: DataComparisonField['type'];
-  fieldName?: DataComparisonField['field'];
-}) => {
-  if (data.length === 0) return <NoChartsData textAlign="left" />;
-
-  return (
-    <Chart>
-      <Tooltip body={DataComparisonChartTooltipBody} />
-
-      <Settings showLegend={false} />
-      <AreaSeries
-        id="dataVisualizer.overlapDistributionComparisonChart"
-        name={i18n.translate(
-          'xpack.dataVisualizer.dataComparison.distributionComparisonChartName',
-          {
-            defaultMessage:
-              'Distribution comparison of {referenceLabel} and {comparisonLabel} data for {fieldName}',
-            values: {
-              referenceLabel: REFERENCE_LABEL.toLowerCase(),
-              comparisonLabel: COMPARISON_LABEL.toLowerCase(),
-              fieldName,
-            },
-          }
-        )}
-        xScaleType={
-          fieldType === DATA_COMPARISON_TYPE.NUMERIC ? ScaleType.Linear : ScaleType.Ordinal
-        }
-        yScaleType={ScaleType.Linear}
-        xAccessor="key"
-        yAccessors={['percentage']}
-        splitSeriesAccessors={['g']}
-        data={data}
-        curve={CurveType.CURVE_STEP}
-        color={(identifier) => {
-          const key = identifier.seriesKeys[0];
-          return key === COMPARISON_LABEL ? colors.productionColor : colors.referenceColor;
-        }}
-      />
-    </Chart>
-  );
-};
diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx
new file mode 100644
index 000000000000..1a777ceda0f0
--- /dev/null
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/data_drift_distribution_chart.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Axis, BarSeries, Chart, Tooltip, Position, ScaleType, Settings } from '@elastic/charts';
+import React from 'react';
+import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { NoChartsData } from './no_charts_data';
+import type { Feature } from '../types';
+import { COMPARISON_LABEL, DATA_COMPARISON_TYPE } from '../constants';
+import { DataComparisonChartTooltipBody } from '../data_drift_chart_tooltip_body';
+import { getFieldFormatType, useFieldFormatter } from './default_value_formatter';
+
+const CHART_HEIGHT = 200;
+
+export const DataDriftDistributionChart = ({
+  item,
+  colors,
+  secondaryType,
+}: {
+  item: Feature | undefined;
+  colors: { referenceColor: string; comparisonColor: string };
+  secondaryType: string;
+  domain?: Feature['domain'];
+}) => {
+  const xAxisFormatter = useFieldFormatter(getFieldFormatType(secondaryType));
+  const yAxisFormatter = useFieldFormatter(FIELD_FORMAT_IDS.NUMBER);
+
+  if (!item || item.comparisonDistribution.length === 0) return <NoChartsData />;
+  const { featureName, fieldType, comparisonDistribution: data } = item;
+
+  return (
+    <div css={{ width: '100%', height: CHART_HEIGHT }}>
+      <Chart>
+        <Tooltip body={DataComparisonChartTooltipBody} />
+        <Settings />
+        <Axis
+          id="bottom"
+          position={Position.Bottom}
+          tickFormat={xAxisFormatter}
+          labelFormat={xAxisFormatter}
+        />
+        <Axis
+          id="vertical"
+          position={Position.Left}
+          tickFormat={yAxisFormatter}
+          domain={{ min: 0, max: 1 }}
+        />
+        <BarSeries
+          id="data-drift-viz"
+          name={featureName}
+          xScaleType={
+            fieldType === DATA_COMPARISON_TYPE.NUMERIC ? ScaleType.Linear : ScaleType.Ordinal
+          }
+          yScaleType={ScaleType.Linear}
+          xAccessor="key"
+          yAccessors={['percentage']}
+          splitSeriesAccessors={['g']}
+          data={data}
+          color={(identifier) => {
+            const key = identifier.seriesKeys[0];
+            return key === COMPARISON_LABEL ? colors.comparisonColor : colors.referenceColor;
+          }}
+        />
+      </Chart>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/charts/default_value_formatter.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/default_value_formatter.ts
new file mode 100644
index 000000000000..c97e5f371bb6
--- /dev/null
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/default_value_formatter.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { useMemo, useCallback } from 'react';
+import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { useDataVisualizerKibana } from '../../kibana_context';
+
+export const getFieldFormatType = (type: string) => {
+  switch (type) {
+    case 'number':
+      return FIELD_FORMAT_IDS.NUMBER;
+    case 'boolean':
+      return FIELD_FORMAT_IDS.BOOLEAN;
+    default:
+      return FIELD_FORMAT_IDS.STRING;
+  }
+};
+export const useFieldFormatter = (fieldType: FIELD_FORMAT_IDS) => {
+  const {
+    services: {
+      data: { fieldFormats },
+    },
+  } = useDataVisualizerKibana();
+
+  const fieldFormatter = useMemo(() => {
+    return fieldFormats.deserialize({
+      id: fieldType,
+    });
+  }, [fieldFormats, fieldType]);
+
+  return useCallback(
+    (v: unknown) => {
+      const func = fieldFormatter.convert.bind(fieldFormatter);
+      return func(v);
+    },
+    [fieldFormatter]
+  );
+};
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/no_charts_data.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/no_charts_data.tsx
similarity index 100%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/charts/no_charts_data.tsx
rename to x-pack/plugins/data_visualizer/public/application/data_drift/charts/no_charts_data.tsx
diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/charts/overlap_distribution_chart.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/overlap_distribution_chart.tsx
new file mode 100644
index 000000000000..5913d9e81388
--- /dev/null
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/overlap_distribution_chart.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  AreaSeries,
+  Axis,
+  Chart,
+  CurveType,
+  Position,
+  ScaleType,
+  Settings,
+  Tooltip,
+} from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { NoChartsData } from './no_charts_data';
+import type { ComparisonHistogram, DataDriftField } from '../types';
+import { DataComparisonChartTooltipBody } from '../data_drift_chart_tooltip_body';
+import { COMPARISON_LABEL, DATA_COMPARISON_TYPE, REFERENCE_LABEL } from '../constants';
+import { getFieldFormatType, useFieldFormatter } from './default_value_formatter';
+
+export const OverlapDistributionComparison = ({
+  data,
+  colors,
+  fieldType,
+  fieldName,
+  secondaryType,
+}: {
+  data: ComparisonHistogram[];
+  colors: { referenceColor: string; comparisonColor: string };
+  secondaryType: string;
+  fieldType?: DataDriftField['type'];
+  fieldName?: DataDriftField['field'];
+}) => {
+  const xAxisFormatter = useFieldFormatter(getFieldFormatType(secondaryType));
+  const yAxisFormatter = useFieldFormatter(FIELD_FORMAT_IDS.NUMBER);
+  if (data.length === 0) return <NoChartsData textAlign="left" />;
+
+  return (
+    <Chart>
+      <Tooltip body={DataComparisonChartTooltipBody} />
+      <Axis
+        id="vertical"
+        position={Position.Left}
+        tickFormat={yAxisFormatter}
+        domain={{ min: 0, max: 1 }}
+        hide={true}
+      />
+      <Axis
+        id="bottom"
+        position={Position.Bottom}
+        tickFormat={xAxisFormatter}
+        labelFormat={xAxisFormatter}
+        hide={true}
+      />
+
+      <Settings showLegend={false} />
+      <AreaSeries
+        id="dataVisualizer.overlapDistributionComparisonChart"
+        name={i18n.translate('xpack.dataVisualizer.dataDrift.distributionComparisonChartName', {
+          defaultMessage:
+            'Distribution comparison of {referenceLabel} and {comparisonLabel} data for {fieldName}',
+          values: {
+            referenceLabel: REFERENCE_LABEL.toLowerCase(),
+            comparisonLabel: COMPARISON_LABEL.toLowerCase(),
+            fieldName,
+          },
+        })}
+        xScaleType={
+          fieldType === DATA_COMPARISON_TYPE.NUMERIC ? ScaleType.Linear : ScaleType.Ordinal
+        }
+        yScaleType={ScaleType.Linear}
+        xAccessor="key"
+        yAccessors={['percentage']}
+        splitSeriesAccessors={['g']}
+        data={data}
+        curve={CurveType.CURVE_STEP}
+        color={(identifier) => {
+          const key = identifier.seriesKeys[0];
+          return key === COMPARISON_LABEL ? colors.comparisonColor : colors.referenceColor;
+        }}
+      />
+    </Chart>
+  );
+};
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/single_distribution_chart.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/single_distribution_chart.tsx
similarity index 51%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/charts/single_distribution_chart.tsx
rename to x-pack/plugins/data_visualizer/public/application/data_drift/charts/single_distribution_chart.tsx
index 22796f371cb5..a8232a2ea7e1 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/charts/single_distribution_chart.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/charts/single_distribution_chart.tsx
@@ -6,28 +6,55 @@
  */
 
 import { SeriesColorAccessor } from '@elastic/charts/dist/chart_types/xy_chart/utils/specs';
-import { BarSeries, Chart, ScaleType, Settings } from '@elastic/charts';
+import { Axis, BarSeries, Chart, Position, ScaleType, Settings, Tooltip } from '@elastic/charts';
 import React from 'react';
+import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { getFieldFormatType, useFieldFormatter } from './default_value_formatter';
+import { DataComparisonChartTooltipBody } from '../data_drift_chart_tooltip_body';
 import { NoChartsData } from './no_charts_data';
 import { DATA_COMPARISON_TYPE } from '../constants';
-import { DataComparisonField, Histogram } from '../types';
+import { DataDriftField, Feature, Histogram } from '../types';
 
 export const SingleDistributionChart = ({
   data,
   color,
   fieldType,
+  secondaryType,
   name,
 }: {
   data: Histogram[];
   name: string;
+  secondaryType: string;
   color?: SeriesColorAccessor;
-  fieldType?: DataComparisonField['type'];
+  fieldType?: DataDriftField['type'];
+  domain?: Feature['domain'];
 }) => {
+  const xAxisFormatter = useFieldFormatter(getFieldFormatType(secondaryType));
+  const yAxisFormatter = useFieldFormatter(FIELD_FORMAT_IDS.NUMBER);
+
   if (data.length === 0) return <NoChartsData textAlign="left" />;
 
   return (
     <Chart>
+      <Tooltip body={DataComparisonChartTooltipBody} />
+
       <Settings />
+      <Axis
+        id="vertical"
+        position={Position.Left}
+        tickFormat={yAxisFormatter}
+        domain={{ min: 0, max: 1 }}
+        hide={true}
+      />
+
+      <Axis
+        id="bottom"
+        position={Position.Bottom}
+        tickFormat={xAxisFormatter}
+        labelFormat={xAxisFormatter}
+        hide={true}
+      />
+
       <BarSeries
         id={`${name}-distr-viz`}
         name={name}
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/constants.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/constants.ts
similarity index 99%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/constants.ts
rename to x-pack/plugins/data_visualizer/public/application/data_drift/constants.ts
index e64e19cc736f..ed5313df8062 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/constants.ts
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/constants.ts
@@ -13,39 +13,27 @@ export const DATA_COMPARISON_TYPE = {
   UNSUPPORTED: 'unsupported',
 } as const;
 
-export const NUMERIC_TYPE_LABEL = i18n.translate(
-  'xpack.dataVisualizer.dataComparison.numericLabel',
-  {
-    defaultMessage: 'Numeric',
-  }
-);
+export const NUMERIC_TYPE_LABEL = i18n.translate('xpack.dataVisualizer.dataDrift.numericLabel', {
+  defaultMessage: 'Numeric',
+});
 export const CATEGORICAL_TYPE_LABEL = i18n.translate(
-  'xpack.dataVisualizer.dataComparison.categoricalLabel',
+  'xpack.dataVisualizer.dataDrift.categoricalLabel',
   {
     defaultMessage: 'Categorical',
   }
 );
 
-export const UNSUPPORTED_LABEL = i18n.translate(
-  'xpack.dataVisualizer.dataComparison.UnsupportedLabel',
-  {
-    defaultMessage: 'Unsupported',
-  }
-);
+export const UNSUPPORTED_LABEL = i18n.translate('xpack.dataVisualizer.dataDrift.UnsupportedLabel', {
+  defaultMessage: 'Unsupported',
+});
 
-export const REFERENCE_LABEL = i18n.translate(
-  'xpack.dataVisualizer.dataComparison.referenceLabel',
-  {
-    defaultMessage: 'Reference',
-  }
-);
+export const REFERENCE_LABEL = i18n.translate('xpack.dataVisualizer.dataDrift.referenceLabel', {
+  defaultMessage: 'Reference',
+});
 
-export const COMPARISON_LABEL = i18n.translate(
-  'xpack.dataVisualizer.dataComparison.productionLabel',
-  {
-    defaultMessage: 'Comparison',
-  }
-);
+export const COMPARISON_LABEL = i18n.translate('xpack.dataVisualizer.dataDrift.comparisonLabel', {
+  defaultMessage: 'Comparison',
+});
 
 export const DATA_COMPARISON_TYPE_LABEL = {
   [DATA_COMPARISON_TYPE.NUMERIC]: NUMERIC_TYPE_LABEL,
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_app_state.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_app_state.tsx
similarity index 52%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_app_state.tsx
rename to x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_app_state.tsx
index 8844a2b9a20a..7e774336dd11 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_app_state.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_app_state.tsx
@@ -17,23 +17,42 @@ import { DatePickerContextProvider } from '@kbn/ml-date-picker';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
 import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 
+import { useLocation } from 'react-router-dom';
+import { parse } from 'query-string';
+import { SEARCH_QUERY_LANGUAGE } from '@kbn/ml-query-utils';
+import type { InitialSettings } from './use_data_drift_result';
+import {
+  DataDriftStateManagerContext,
+  defaultSearchQuery,
+  useDataDriftStateManager,
+} from './use_state_manager';
 import { DV_STORAGE_KEYS } from '../index_data_visualizer/types/storage';
 import { getCoreStart, getPluginsStart } from '../../kibana_services';
-import { DataComparisonPage } from './data_comparison_page';
+import { DataDriftPage } from './data_drift_page';
 import { DataSourceContext } from '../common/hooks/data_source_context';
 
 const localStorage = new Storage(window.localStorage);
 
-export interface DataComparisonDetectionAppStateProps {
+export interface DataDriftDetectionAppStateProps {
   /** The data view to analyze. */
   dataView: DataView;
   /** The saved search to analyze. */
   savedSearch: SavedSearch | null;
 }
 
-export type DataComparisonSpec = typeof DataComparisonDetectionAppState;
+export type DataDriftSpec = typeof DataDriftDetectionAppState;
 
-export const DataComparisonDetectionAppState: FC<DataComparisonDetectionAppStateProps> = ({
+const getStr = (arg: string | string[] | null, fallbackStr?: string): string => {
+  if (arg === undefined || arg == null) return fallbackStr ?? '';
+
+  if (typeof arg === 'string') return arg.replaceAll(`'`, '');
+
+  if (Array.isArray(arg)) return arg.join(',');
+
+  return '';
+};
+
+export const DataDriftDetectionAppState: FC<DataDriftDetectionAppStateProps> = ({
   dataView,
   savedSearch,
 }) => {
@@ -75,6 +94,37 @@ export const DataComparisonDetectionAppState: FC<DataComparisonDetectionAppState
     ...pick(services, ['data', 'http', 'notifications', 'theme', 'uiSettings', 'i18n']),
     uiSettingsKeys: UI_SETTINGS,
   };
+  const location = useLocation();
+
+  const params = parse(location.search, {
+    sort: false,
+  });
+
+  const initialSettings: InitialSettings = {
+    index: getStr(params.index, dataView.id),
+    comparison: getStr(params.comparison, dataView.getIndexPattern()),
+    reference: getStr(params.reference, dataView.getIndexPattern()),
+    timeField: getStr(params.timeField, dataView.getTimeField()?.name),
+  };
+
+  const referenceStateManager = useDataDriftStateManager({
+    id: 'referenceDataDriftData',
+    indexPattern: getStr(params.reference) ?? dataView.getIndexPattern(),
+    searchString: '',
+    searchQuery: defaultSearchQuery,
+    searchQueryLanguage: SEARCH_QUERY_LANGUAGE.KUERY,
+    filters: [],
+    timeField: dataView.timeFieldName,
+  });
+  const comparisonStateManager = useDataDriftStateManager({
+    id: 'comparisonDataDriftData',
+    indexPattern: getStr(params.comparison) ?? dataView.getIndexPattern(),
+    searchString: '',
+    searchQuery: defaultSearchQuery,
+    searchQueryLanguage: SEARCH_QUERY_LANGUAGE.KUERY,
+    filters: [],
+    timeField: dataView.timeFieldName,
+  });
 
   return (
     <KibanaThemeProvider theme$={coreStart.theme.theme$}>
@@ -83,7 +133,15 @@ export const DataComparisonDetectionAppState: FC<DataComparisonDetectionAppState
           <DataSourceContext.Provider value={{ dataView, savedSearch }}>
             <StorageContextProvider storage={localStorage} storageKeys={DV_STORAGE_KEYS}>
               <DatePickerContextProvider {...datePickerDeps}>
-                <DataComparisonPage />
+                <DataDriftStateManagerContext.Provider
+                  value={{
+                    dataView,
+                    reference: referenceStateManager,
+                    comparison: comparisonStateManager,
+                  }}
+                >
+                  <DataDriftPage initialSettings={initialSettings} />
+                </DataDriftStateManagerContext.Provider>
               </DatePickerContextProvider>
             </StorageContextProvider>
           </DataSourceContext.Provider>
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_chart_tooltip_body.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_chart_tooltip_body.tsx
similarity index 80%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_chart_tooltip_body.tsx
rename to x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_chart_tooltip_body.tsx
index b867239884f7..fff45cf27a0c 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_chart_tooltip_body.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_chart_tooltip_body.tsx
@@ -17,9 +17,29 @@ import {
   TooltipTableRow,
 } from '@elastic/charts';
 import React from 'react';
+import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { useFieldFormatter } from './charts/default_value_formatter';
 
 const style: TooltipCellStyle = { textAlign: 'right' };
 export const DataComparisonChartTooltipBody: TooltipSpec['body'] = ({ items }) => {
+  const percentFormatter = useFieldFormatter(FIELD_FORMAT_IDS.PERCENT);
+
+  const footer =
+    items.length > 1 ? (
+      <TooltipTableFooter>
+        <TooltipTableRow>
+          {<TooltipTableColorCell />}
+          <TooltipTableCell style={style}>Diff</TooltipTableCell>
+
+          <TooltipTableCell style={style}>
+            {items[1].datum.doc_count - items[0].datum.doc_count}
+          </TooltipTableCell>
+          <TooltipTableCell style={style}>
+            {percentFormatter(items[1].datum.percentage - items[0].datum.percentage)}
+          </TooltipTableCell>
+        </TooltipTableRow>
+      </TooltipTableFooter>
+    ) : null;
   return (
     <TooltipTable gridTemplateColumns={`repeat(${4}, auto)`} maxHeight={120}>
       <TooltipTableHeader>
@@ -36,25 +56,12 @@ export const DataComparisonChartTooltipBody: TooltipSpec['body'] = ({ items }) =
             {<TooltipTableColorCell color={color} />}
             <TooltipTableCell style={style}>{label}</TooltipTableCell>
             <TooltipTableCell style={style}>{datum.doc_count}</TooltipTableCell>
-            <TooltipTableCell style={style}>{`${(datum.percentage * 100).toFixed(
-              1
-            )}`}</TooltipTableCell>
+            <TooltipTableCell style={style}>{percentFormatter(datum.percentage)}</TooltipTableCell>
           </TooltipTableRow>
         ))}
       </TooltipTableBody>
-      <TooltipTableFooter>
-        <TooltipTableRow>
-          {<TooltipTableColorCell />}
-          <TooltipTableCell style={style}>Diff</TooltipTableCell>
 
-          <TooltipTableCell style={style}>
-            {items[1].datum.doc_count - items[0].datum.doc_count}
-          </TooltipTableCell>
-          <TooltipTableCell style={style}>
-            {`${((items[1].datum.percentage - items[0].datum.percentage) * 100).toFixed(1)}%`}
-          </TooltipTableCell>
-        </TooltipTableRow>
-      </TooltipTableFooter>
+      {footer}
     </TooltipTable>
   );
 };
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_overview_table.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_overview_table.tsx
similarity index 64%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_overview_table.tsx
rename to x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_overview_table.tsx
index 46cd0510443f..1c03e18f52e8 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_overview_table.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_overview_table.tsx
@@ -6,7 +6,7 @@
  */
 
 import type { UseTableState } from '@kbn/ml-in-memory-table';
-import React, { ReactNode, useMemo, useState } from 'react';
+import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiBasicTableColumn,
@@ -21,26 +21,23 @@ import { FieldTypeIcon } from '../common/components/field_type_icon';
 import { COLLAPSE_ROW, EXPAND_ROW } from '../../../common/i18n_constants';
 import { COMPARISON_LABEL, REFERENCE_LABEL } from './constants';
 import { useCurrentEuiTheme } from '../common/hooks/use_current_eui_theme';
-import { DataComparisonField, Feature, FETCH_STATUS } from './types';
-import { formatSignificanceLevel } from './data_comparison_utils';
+import { type DataDriftField, type Feature, FETCH_STATUS } from './types';
+import { formatSignificanceLevel } from './data_drift_utils';
 import { SingleDistributionChart } from './charts/single_distribution_chart';
 import { OverlapDistributionComparison } from './charts/overlap_distribution_chart';
-import { DataComparisonDistributionChart } from './charts/data_comparison_distribution_chart';
+import { DataDriftDistributionChart } from './charts/data_drift_distribution_chart';
 
-const dataComparisonYesLabel = i18n.translate(
-  'xpack.dataVisualizer.dataComparison.fieldTypeYesLabel',
-  {
-    defaultMessage: 'Yes',
-  }
-);
+const dataComparisonYesLabel = i18n.translate('xpack.dataVisualizer.dataDrift.fieldTypeYesLabel', {
+  defaultMessage: 'Yes',
+});
 const dataComparisonNoLabel = i18n.translate(
-  'xpack.dataVisualizer.dataComparison.driftDetectedNoLabel',
+  'xpack.dataVisualizer.dataDrift.driftDetectedNoLabel',
   {
     defaultMessage: 'No',
   }
 );
 
-export const DataComparisonOverviewTable = ({
+export const DataDriftOverviewTable = ({
   data,
   onTableChange,
   pagination,
@@ -51,29 +48,55 @@ export const DataComparisonOverviewTable = ({
   status: FETCH_STATUS;
 } & UseTableState<Feature>) => {
   const euiTheme = useCurrentEuiTheme();
-  const colors = {
-    referenceColor: euiTheme.euiColorVis2,
-    productionColor: euiTheme.euiColorVis1,
-  };
+
+  const colors = useMemo(
+    () => ({
+      referenceColor: euiTheme.euiColorVis2,
+      comparisonColor: euiTheme.euiColorVis1,
+    }),
+    [euiTheme]
+  );
   const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<Record<string, ReactNode>>(
     {}
   );
 
   const referenceDistributionLabel = i18n.translate(
-    'xpack.dataVisualizer.dataComparison.dataComparisonDistributionLabel',
+    'xpack.dataVisualizer.dataDrift.dataComparisonDistributionLabel',
     {
       defaultMessage: '{label} distribution',
       values: { label: REFERENCE_LABEL },
     }
   );
   const comparisonDistributionLabel = i18n.translate(
-    'xpack.dataVisualizer.dataComparison.dataComparisonDistributionLabel',
+    'xpack.dataVisualizer.dataDrift.dataComparisonDistributionLabel',
     {
       defaultMessage: '{label} distribution',
       values: { label: COMPARISON_LABEL },
     }
   );
 
+  useEffect(() => {
+    const updatedItemIdToExpandedRowMap = { ...itemIdToExpandedRowMap };
+    // Update expanded row in case data is stale
+    Object.keys(updatedItemIdToExpandedRowMap).forEach((itemId) => {
+      const item = data.find((d) => d.featureName === itemId);
+      if (item) {
+        const { featureName } = item;
+
+        updatedItemIdToExpandedRowMap[featureName] = (
+          <DataDriftDistributionChart
+            item={item}
+            colors={colors}
+            secondaryType={item.secondaryType}
+          />
+        );
+      }
+    });
+    setItemIdToExpandedRowMap(updatedItemIdToExpandedRowMap);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, colors]);
+
   const columns: Array<EuiBasicTableColumn<Feature>> = [
     {
       align: 'left',
@@ -99,31 +122,31 @@ export const DataComparisonOverviewTable = ({
 
     {
       field: 'featureName',
-      name: i18n.translate('xpack.dataVisualizer.dataComparison.fieldNameLabel', {
+      name: i18n.translate('xpack.dataVisualizer.dataDrift.fieldNameLabel', {
         defaultMessage: 'Name',
       }),
-      'data-test-subj': 'mlDataComparisonOverviewTableFeatureName',
+      'data-test-subj': 'mlDataDriftOverviewTableFeatureName',
       sortable: true,
       textOnly: true,
     },
     {
       field: 'secondaryType',
-      name: i18n.translate('xpack.dataVisualizer.dataComparison.fieldTypeLabel', {
+      name: i18n.translate('xpack.dataVisualizer.dataDrift.fieldTypeLabel', {
         defaultMessage: 'Type',
       }),
-      'data-test-subj': 'mlDataComparisonOverviewTableFeatureType',
+      'data-test-subj': 'mlDataDriftOverviewTableFeatureType',
       sortable: true,
       textOnly: true,
-      render: (secondaryType: DataComparisonField['secondaryType']) => {
+      render: (secondaryType: DataDriftField['secondaryType']) => {
         return <FieldTypeIcon type={secondaryType} tooltipEnabled={true} />;
       },
     },
     {
       field: 'driftDetected',
-      name: i18n.translate('xpack.dataVisualizer.dataComparison.driftDetectedLabel', {
+      name: i18n.translate('xpack.dataVisualizer.dataDrift.driftDetectedLabel', {
         defaultMessage: 'Drift detected',
       }),
-      'data-test-subj': 'mlDataComparisonOverviewTableDriftDetected',
+      'data-test-subj': 'mlDataDriftOverviewTableDriftDetected',
       sortable: true,
       textOnly: true,
       render: (driftDetected: boolean) => {
@@ -134,20 +157,20 @@ export const DataComparisonOverviewTable = ({
       field: 'similarityTestPValue',
       name: (
         <EuiToolTip
-          content={i18n.translate('xpack.dataVisualizer.dataComparison.pValueTooltip', {
+          content={i18n.translate('xpack.dataVisualizer.dataDrift.pValueTooltip', {
             defaultMessage:
               'Indicates how extreme the change is. Lower values indicate greater change.',
           })}
         >
           <span>
-            {i18n.translate('xpack.dataVisualizer.dataComparison.pValueLabel', {
+            {i18n.translate('xpack.dataVisualizer.dataDrift.pValueLabel', {
               defaultMessage: 'Similarity p-value',
             })}
             <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
           </span>
         </EuiToolTip>
       ),
-      'data-test-subj': 'mlDataComparisonOverviewTableSimilarityTestPValue',
+      'data-test-subj': 'mlDataDriftOverviewTableSimilarityTestPValue',
       sortable: true,
       textOnly: true,
       render: (similarityTestPValue: number) => {
@@ -157,7 +180,7 @@ export const DataComparisonOverviewTable = ({
     {
       field: 'referenceHistogram',
       name: referenceDistributionLabel,
-      'data-test-subj': 'mlDataComparisonOverviewTableReferenceDistribution',
+      'data-test-subj': 'mlDataDriftOverviewTableReferenceDistribution',
       sortable: false,
       render: (referenceHistogram: Feature['referenceHistogram'], item) => {
         return (
@@ -167,24 +190,26 @@ export const DataComparisonOverviewTable = ({
               data={referenceHistogram}
               color={colors.referenceColor}
               name={referenceDistributionLabel}
+              secondaryType={item.secondaryType}
             />
           </div>
         );
       },
     },
     {
-      field: 'productionHistogram',
+      field: 'comparisonHistogram',
       name: comparisonDistributionLabel,
-      'data-test-subj': 'mlDataComparisonOverviewTableDataComparisonDistributionChart',
+      'data-test-subj': 'mlDataDriftOverviewTableDataComparisonDistributionChart',
       sortable: false,
-      render: (productionDistribution: Feature['productionHistogram'], item) => {
+      render: (comparisonDistribution: Feature['comparisonHistogram'], item) => {
         return (
           <div css={{ width: 100, height: 40 }}>
             <SingleDistributionChart
               fieldType={item.fieldType}
-              data={productionDistribution}
-              color={colors.productionColor}
+              data={comparisonDistribution}
+              color={colors.comparisonColor}
               name={comparisonDistributionLabel}
+              secondaryType={item.secondaryType}
             />
           </div>
         );
@@ -193,7 +218,7 @@ export const DataComparisonOverviewTable = ({
     {
       field: 'comparisonDistribution',
       name: 'Comparison',
-      'data-test-subj': 'mlDataComparisonOverviewTableDataComparisonDistributionChart',
+      'data-test-subj': 'mlDataDriftOverviewTableDataComparisonDistributionChart',
       sortable: false,
       render: (comparisonDistribution: Feature['comparisonDistribution'], item) => {
         return (
@@ -203,6 +228,7 @@ export const DataComparisonOverviewTable = ({
               fieldType={item.fieldType}
               data={comparisonDistribution}
               colors={colors}
+              secondaryType={item.secondaryType}
             />
           </div>
         );
@@ -212,8 +238,8 @@ export const DataComparisonOverviewTable = ({
 
   const getRowProps = (item: Feature) => {
     return {
-      'data-test-subj': `mlDataComparisonOverviewTableRow row-${item.featureName}`,
-      className: 'mlDataComparisonOverviewTableRow',
+      'data-test-subj': `mlDataDriftOverviewTableRow row-${item.featureName}`,
+      className: 'mlDataDriftOverviewTableRow',
       onClick: () => {},
     };
   };
@@ -221,8 +247,7 @@ export const DataComparisonOverviewTable = ({
   const getCellProps = (item: Feature, column: EuiTableFieldDataColumnType<Feature>) => {
     const { field } = column;
     return {
-      className: 'mlDataComparisonOverviewTableCell',
-      'data-test-subj': `mlDataComparisonOverviewTableCell row-${item.featureName}-column-${String(
+      'data-test-subj': `mlDataDriftOverviewTableCell row-${item.featureName}-column-${String(
         field
       )}`,
       textOnly: true,
@@ -235,16 +260,12 @@ export const DataComparisonOverviewTable = ({
     if (itemIdToExpandedRowMapValues[item.featureName]) {
       delete itemIdToExpandedRowMapValues[item.featureName];
     } else {
-      const { featureName, comparisonDistribution } = item;
       itemIdToExpandedRowMapValues[item.featureName] = (
-        <div css={{ width: '100%', height: 200 }}>
-          <DataComparisonDistributionChart
-            featureName={featureName}
-            fieldType={item.fieldType}
-            data={comparisonDistribution}
-            colors={colors}
-          />
-        </div>
+        <DataDriftDistributionChart
+          item={item}
+          colors={colors}
+          secondaryType={item.secondaryType}
+        />
       );
     }
     setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
@@ -253,11 +274,11 @@ export const DataComparisonOverviewTable = ({
   const tableMessage = useMemo(() => {
     switch (status) {
       case FETCH_STATUS.NOT_INITIATED:
-        return i18n.translate('xpack.dataVisualizer.dataComparison.dataComparisonRunAnalysisMsg', {
+        return i18n.translate('xpack.dataVisualizer.dataDrift.dataComparisonRunAnalysisMsg', {
           defaultMessage: 'Run analysis to compare reference and comparison data',
         });
       case FETCH_STATUS.LOADING:
-        return i18n.translate('xpack.dataVisualizer.dataComparison.dataComparisonLoadingMsg', {
+        return i18n.translate('xpack.dataVisualizer.dataDrift.dataComparisonLoadingMsg', {
           defaultMessage: 'Analyzing',
         });
       default:
@@ -267,12 +288,10 @@ export const DataComparisonOverviewTable = ({
 
   return (
     <EuiInMemoryTable<Feature>
-      tableCaption={i18n.translate(
-        'xpack.dataVisualizer.dataComparison.dataComparisonTableCaption',
-        {
-          defaultMessage: 'Data comparison overview',
-        }
-      )}
+      data-test-subj="mlDataDriftTable"
+      tableCaption={i18n.translate('xpack.dataVisualizer.dataDrift.dataDriftTableCaption', {
+        defaultMessage: 'Data drift overview',
+      })}
       items={data}
       rowHeader="featureName"
       columns={columns}
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_page.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
similarity index 60%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_page.tsx
rename to x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
index 801e3c1da7a4..86ddff5c25e3 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_page.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
@@ -16,7 +16,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiPageHeader,
-  EuiCallOut,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 
 import type { WindowParameters } from '@kbn/aiops-utils';
@@ -35,13 +35,11 @@ import moment from 'moment';
 import { css } from '@emotion/react';
 import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
 import { i18n } from '@kbn/i18n';
-import { RANDOM_SAMPLER_OPTION, RandomSampler } from '@kbn/ml-random-sampler-utils';
-import { MIN_SAMPLER_PROBABILITY } from '../index_data_visualizer/constants/random_sampler';
+import type { InitialSettings } from './use_data_drift_result';
+import { useDataDriftStateManagerContext } from './use_state_manager';
 import { useData } from '../common/hooks/use_data';
 import {
   DV_FROZEN_TIER_PREFERENCE,
-  DV_RANDOM_SAMPLER_P_VALUE,
-  DV_RANDOM_SAMPLER_PREFERENCE,
   DVKey,
   DVStorageMapped,
 } from '../index_data_visualizer/types/storage';
@@ -49,7 +47,7 @@ import { useCurrentEuiTheme } from '../common/hooks/use_current_eui_theme';
 import { DataComparisonFullAppState, getDefaultDataComparisonState } from './types';
 import { useDataSource } from '../common/hooks/data_source_context';
 import { useDataVisualizerKibana } from '../kibana_context';
-import { DataComparisonView } from './data_comparison_view';
+import { DataDriftView } from './data_drift_view';
 import { COMPARISON_LABEL, REFERENCE_LABEL } from './constants';
 import { SearchPanelContent } from '../index_data_visualizer/components/search_panel/search_bar';
 import { useSearch } from '../common/hooks/use_search';
@@ -124,40 +122,39 @@ export const PageHeader: FC = () => {
   );
 };
 
-export const DataComparisonPage: FC = () => {
+const getDataDriftDataLabel = (label: string, indexPattern?: string) =>
+  i18n.translate('xpack.dataVisualizer.dataDrift.dataLabel', {
+    defaultMessage: '{label} data',
+    values: { label },
+  }) + (indexPattern ? `: ${indexPattern}` : '');
+
+interface Props {
+  initialSettings: InitialSettings;
+}
+
+export const DataDriftPage: FC<Props> = ({ initialSettings }) => {
   const {
     services: { data: dataService },
   } = useDataVisualizerKibana();
   const { dataView, savedSearch } = useDataSource();
 
-  const [dataComparisonListState, setAiopsListState] = usePageUrlState<{
-    pageKey: 'DV_DATA_COMP';
-    pageUrlState: DataComparisonFullAppState;
-  }>('DV_DATA_COMP', getDefaultDataComparisonState());
+  const { reference: referenceStateManager, comparison: comparisonStateManager } =
+    useDataDriftStateManagerContext();
 
-  const [randomSamplerMode, setRandomSamplerMode] = useStorage<
-    DVKey,
-    DVStorageMapped<typeof DV_RANDOM_SAMPLER_PREFERENCE>
-  >(DV_RANDOM_SAMPLER_PREFERENCE, RANDOM_SAMPLER_OPTION.ON_AUTOMATIC);
+  const [dataComparisonListState, setDataComparisonListState] = usePageUrlState<{
+    pageKey: 'DV_DATA_DRIFT';
+    pageUrlState: DataComparisonFullAppState;
+  }>('DV_DATA_DRIFT', getDefaultDataComparisonState());
 
-  const [randomSamplerProbability, setRandomSamplerProbability] = useStorage<
-    DVKey,
-    DVStorageMapped<typeof DV_RANDOM_SAMPLER_P_VALUE>
-  >(DV_RANDOM_SAMPLER_P_VALUE, MIN_SAMPLER_PROBABILITY);
   const [lastRefresh, setLastRefresh] = useState(0);
 
   const forceRefresh = useCallback(() => setLastRefresh(Date.now()), [setLastRefresh]);
 
-  const randomSampler = useMemo(
-    () =>
-      new RandomSampler(
-        randomSamplerMode,
-        setRandomSamplerMode,
-        randomSamplerProbability,
-        setRandomSamplerProbability
-      ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+  const randomSampler = useMemo(() => referenceStateManager.randomSampler, [referenceStateManager]);
+
+  const randomSamplerProd = useMemo(
+    () => comparisonStateManager.randomSampler,
+    [comparisonStateManager]
   );
 
   const [globalState, setGlobalState] = useUrlState('_g');
@@ -183,7 +180,7 @@ export const DataComparisonPage: FC = () => {
         setSelectedSavedSearch(null);
       }
 
-      setAiopsListState({
+      setDataComparisonListState({
         ...dataComparisonListState,
         searchQuery: searchParams.searchQuery,
         searchString: searchParams.searchString,
@@ -191,7 +188,7 @@ export const DataComparisonPage: FC = () => {
         filters: searchParams.filters,
       });
     },
-    [selectedSavedSearch, dataComparisonListState, setAiopsListState]
+    [selectedSavedSearch, dataComparisonListState, setDataComparisonListState]
   );
 
   const { searchQueryLanguage, searchString, searchQuery } = useSearch(
@@ -199,11 +196,14 @@ export const DataComparisonPage: FC = () => {
     dataComparisonListState
   );
 
-  const { documentStats, timefilter } = useData(
+  const { documentStats, documentStatsProd, timefilter } = useData(
+    initialSettings,
     dataView,
     'data_drift',
-    searchQuery,
+    searchString,
+    searchQueryLanguage,
     randomSampler,
+    randomSamplerProd,
     setGlobalState,
     undefined
   );
@@ -243,7 +243,7 @@ export const DataComparisonPage: FC = () => {
   const euiTheme = useCurrentEuiTheme();
   const colors = {
     referenceColor: euiTheme.euiColorVis2,
-    productionColor: euiTheme.euiColorVis1,
+    comparisonColor: euiTheme.euiColorVis1,
   };
 
   const [windowParameters, setWindowParameters] = useState<WindowParameters | undefined>();
@@ -280,7 +280,7 @@ export const DataComparisonPage: FC = () => {
         return colors.referenceColor;
       }
       if (start >= windowParameters.deviationMin && end <= windowParameters.deviationMax) {
-        return colors.productionColor;
+        return colors.comparisonColor;
       }
 
       return null;
@@ -289,12 +289,15 @@ export const DataComparisonPage: FC = () => {
     [JSON.stringify({ windowParameters, colors })]
   );
 
+  const referenceIndexPatternLabel = initialSettings?.reference
+    ? getDataDriftDataLabel(REFERENCE_LABEL, initialSettings.reference)
+    : getDataDriftDataLabel(REFERENCE_LABEL);
+  const comparisonIndexPatternLabel = initialSettings?.comparison
+    ? getDataDriftDataLabel(COMPARISON_LABEL, initialSettings?.comparison)
+    : getDataDriftDataLabel(COMPARISON_LABEL);
+
   return (
-    <EuiPageBody
-      data-test-subj="dataComparisonDataComparisonPage"
-      paddingSize="none"
-      panelled={false}
-    >
+    <EuiPageBody data-test-subj="dataComparisonDataDriftPage" paddingSize="none" panelled={false}>
       <PageHeader />
       <EuiSpacer size="m" />
       <EuiPageSection paddingSize="none">
@@ -308,84 +311,97 @@ export const DataComparisonPage: FC = () => {
               setSearchParams={setSearchParams}
             />
           </EuiFlexItem>
-          {documentCountStats !== undefined && (
-            <EuiFlexItem>
-              <EuiPanel paddingSize="m">
-                <DocumentCountWithDualBrush
-                  randomSampler={randomSampler}
-                  reload={forceRefresh}
-                  brushSelectionUpdateHandler={brushSelectionUpdate}
-                  documentCountStats={documentCountStats}
-                  documentCountStatsSplit={documentCountStatsCompare}
-                  isBrushCleared={isBrushCleared}
-                  totalCount={totalCount}
-                  approximate={sampleProbability < 1}
-                  sampleProbability={sampleProbability}
-                  initialAnalysisStart={initialAnalysisStart}
-                  barStyleAccessor={barStyleAccessor}
-                  baselineBrush={{
-                    label: REFERENCE_LABEL,
-                    annotationStyle: {
-                      strokeWidth: 0,
-                      stroke: colors.referenceColor,
-                      fill: colors.referenceColor,
-                      opacity: 0.5,
-                    },
-                    badgeWidth: 80,
-                  }}
-                  deviationBrush={{
-                    label: COMPARISON_LABEL,
-                    annotationStyle: {
-                      strokeWidth: 0,
-                      stroke: colors.productionColor,
-                      fill: colors.productionColor,
-                      opacity: 0.5,
-                    },
-                    badgeWidth: 90,
-                  }}
-                />
-              </EuiPanel>
-            </EuiFlexItem>
-          )}
+          <EuiFlexItem>
+            <EuiPanel paddingSize="m">
+              <DocumentCountWithDualBrush
+                id={REFERENCE_LABEL}
+                label={referenceIndexPatternLabel}
+                randomSampler={randomSampler}
+                reload={forceRefresh}
+                brushSelectionUpdateHandler={brushSelectionUpdate}
+                documentCountStats={documentCountStats}
+                documentCountStatsSplit={documentCountStatsCompare}
+                isBrushCleared={isBrushCleared}
+                totalCount={totalCount}
+                approximate={sampleProbability < 1}
+                sampleProbability={sampleProbability}
+                initialAnalysisStart={initialAnalysisStart}
+                barStyleAccessor={barStyleAccessor}
+                baselineBrush={{
+                  label: REFERENCE_LABEL,
+                  annotationStyle: {
+                    strokeWidth: 0,
+                    stroke: colors.referenceColor,
+                    fill: colors.referenceColor,
+                    opacity: 0.5,
+                  },
+                  badgeWidth: 80,
+                }}
+                deviationBrush={{
+                  label: COMPARISON_LABEL,
+                  annotationStyle: {
+                    strokeWidth: 0,
+                    stroke: colors.comparisonColor,
+                    fill: colors.comparisonColor,
+                    opacity: 0.5,
+                  },
+                  badgeWidth: 90,
+                }}
+                stateManager={referenceStateManager}
+              />
+              <EuiHorizontalRule />
+              <DocumentCountWithDualBrush
+                id={COMPARISON_LABEL}
+                label={comparisonIndexPatternLabel}
+                randomSampler={randomSamplerProd}
+                reload={forceRefresh}
+                brushSelectionUpdateHandler={brushSelectionUpdate}
+                documentCountStats={documentStatsProd.documentCountStats}
+                documentCountStatsSplit={documentStatsProd.documentCountStatsCompare}
+                isBrushCleared={isBrushCleared}
+                totalCount={documentStatsProd.totalCount}
+                approximate={documentStatsProd.sampleProbability < 1}
+                sampleProbability={documentStatsProd.sampleProbability}
+                initialAnalysisStart={initialAnalysisStart}
+                barStyleAccessor={barStyleAccessor}
+                baselineBrush={{
+                  label: REFERENCE_LABEL,
+                  annotationStyle: {
+                    strokeWidth: 0,
+                    stroke: colors.referenceColor,
+                    fill: colors.referenceColor,
+                    opacity: 0.5,
+                  },
+                  badgeWidth: 80,
+                }}
+                deviationBrush={{
+                  label: COMPARISON_LABEL,
+                  annotationStyle: {
+                    strokeWidth: 0,
+                    stroke: colors.comparisonColor,
+                    fill: colors.comparisonColor,
+                    opacity: 0.5,
+                  },
+                  badgeWidth: 90,
+                }}
+                stateManager={comparisonStateManager}
+              />
+            </EuiPanel>
+          </EuiFlexItem>
 
           <EuiFlexItem>
             <EuiPanel paddingSize="m">
-              {!dataView?.isTimeBased() ? (
-                <EuiCallOut
-                  title={i18n.translate(
-                    'xpack.dataVisualizer.dataViewNotBasedOnTimeSeriesWarning.title',
-                    {
-                      defaultMessage:
-                        'The data view "{dataViewTitle}" is not based on a time series.',
-                      values: { dataViewTitle: dataView.getName() },
-                    }
-                  )}
-                  color="danger"
-                  iconType="warning"
-                >
-                  <p>
-                    {i18n.translate(
-                      'xpack.dataVisualizer.dataComparisonTimeSeriesWarning.description',
-                      {
-                        defaultMessage: 'Data comparison only runs over time-based indices.',
-                      }
-                    )}
-                  </p>
-                </EuiCallOut>
-              ) : (
-                <DataComparisonView
-                  isBrushCleared={isBrushCleared}
-                  onReset={clearSelection}
-                  windowParameters={windowParameters}
-                  dataView={dataView}
-                  searchString={searchString ?? ''}
-                  searchQuery={searchQuery}
-                  searchQueryLanguage={searchQueryLanguage}
-                  lastRefresh={lastRefresh}
-                  randomSampler={randomSampler}
-                  forceRefresh={forceRefresh}
-                />
-              )}
+              <DataDriftView
+                initialSettings={initialSettings}
+                isBrushCleared={isBrushCleared}
+                onReset={clearSelection}
+                windowParameters={windowParameters}
+                dataView={dataView}
+                searchString={searchString ?? ''}
+                searchQueryLanguage={searchQueryLanguage}
+                lastRefresh={lastRefresh}
+                onRefresh={forceRefresh}
+              />
             </EuiPanel>
           </EuiFlexItem>
         </EuiFlexGroup>
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_utils.test.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_utils.test.ts
similarity index 87%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_utils.test.ts
rename to x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_utils.test.ts
index 08f0305e4126..66dd69f66fb0 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_utils.test.ts
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_utils.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { computeChi2PValue } from './data_comparison_utils';
+import { computeChi2PValue } from './data_drift_utils';
 import { Histogram } from './types';
 
 describe('computeChi2PValue()', () => {
@@ -32,7 +32,7 @@ describe('computeChi2PValue()', () => {
         percentage: 0.5422117647058824,
       },
     ];
-    const productionTerms: Histogram[] = [
+    const comparisonTerms: Histogram[] = [
       {
         key: 'ap-northwest-1',
         doc_count: 40320,
@@ -55,7 +55,7 @@ describe('computeChi2PValue()', () => {
       },
     ];
     expect(computeChi2PValue([], [])).toStrictEqual(1);
-    expect(computeChi2PValue(referenceTerms, productionTerms)).toStrictEqual(0.99);
+    expect(computeChi2PValue(referenceTerms, comparisonTerms)).toStrictEqual(0.99);
   });
 
   test('should return close to 0 if datasets differ', () => {
@@ -71,7 +71,7 @@ describe('computeChi2PValue()', () => {
         percentage: 0,
       },
     ];
-    const productionTerms: Histogram[] = [
+    const comparisonTerms: Histogram[] = [
       {
         key: 'jackson',
         doc_count: 0,
@@ -83,6 +83,6 @@ describe('computeChi2PValue()', () => {
         percentage: 1,
       },
     ];
-    expect(computeChi2PValue(referenceTerms, productionTerms)).toStrictEqual(0);
+    expect(computeChi2PValue(referenceTerms, comparisonTerms)).toStrictEqual(0);
   });
 });
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_utils.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_utils.ts
similarity index 100%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_utils.ts
rename to x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_utils.ts
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_view.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx
similarity index 78%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_view.tsx
rename to x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx
index 31134832ec56..dc4193fe8a33 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/data_comparison_view.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx
@@ -16,44 +16,44 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiSwitchEvent } from '@elastic/eui/src/components/form/switch/switch';
 import { useTableState } from '@kbn/ml-in-memory-table';
 import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
-import { RandomSampler } from '@kbn/ml-random-sampler-utils';
-import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
 import { kbnTypeToSupportedType } from '../common/util/field_types_utils';
-import { getDataComparisonType, useFetchDataComparisonResult } from './use_data_drift_result';
-import type { DataComparisonField, Feature, TimeRange } from './types';
-import { DataComparisonOverviewTable } from './data_comparison_overview_table';
+import {
+  getDataComparisonType,
+  type InitialSettings,
+  useFetchDataComparisonResult,
+} from './use_data_drift_result';
+import type { DataDriftField, Feature, TimeRange } from './types';
+import { DataDriftOverviewTable } from './data_drift_overview_table';
 
 const showOnlyDriftedFieldsOptionLabel = i18n.translate(
-  'xpack.dataVisualizer.dataComparison.showOnlyDriftedFieldsOptionLabel',
+  'xpack.dataVisualizer.dataDrift.showOnlyDriftedFieldsOptionLabel',
   { defaultMessage: 'Show only fields with drifted data' }
 );
 
-interface DataComparisonViewProps {
+interface DataDriftViewProps {
   windowParameters?: WindowParameters;
   dataView: DataView;
   searchString: Query['query'];
-  searchQuery: QueryDslQueryContainer;
   searchQueryLanguage: SearchQueryLanguage;
   isBrushCleared: boolean;
   runAnalysisDisabled?: boolean;
   onReset: () => void;
   lastRefresh: number;
-  forceRefresh: () => void;
-  randomSampler: RandomSampler;
+  onRefresh: () => void;
+  initialSettings: InitialSettings;
 }
 // Data drift view
-export const DataComparisonView = ({
+export const DataDriftView = ({
   windowParameters,
   dataView,
   searchString,
-  searchQuery,
   searchQueryLanguage,
   onReset,
   isBrushCleared,
   lastRefresh,
-  forceRefresh,
-  randomSampler,
-}: DataComparisonViewProps) => {
+  onRefresh,
+  initialSettings,
+}: DataDriftViewProps) => {
   const [showDataComparisonOnly, setShowDataComparisonOnly] = useState(false);
 
   const [currentAnalysisWindowParameters, setCurrentAnalysisWindowParameters] = useState<
@@ -62,16 +62,16 @@ export const DataComparisonView = ({
 
   const [fetchInfo, setFetchIno] = useState<
     | {
-        fields: DataComparisonField[];
+        fields: DataDriftField[];
         currentDataView: DataView;
-        timeRanges?: { reference: TimeRange; production: TimeRange };
+        timeRanges?: { reference: TimeRange; comparison: TimeRange };
       }
     | undefined
   >();
 
-  const onRefresh = useCallback(() => {
+  const refresh = useCallback(() => {
     setCurrentAnalysisWindowParameters(windowParameters);
-    const mergedFields: DataComparisonField[] = [];
+    const mergedFields: DataDriftField[] = [];
     if (dataView) {
       mergedFields.push(
         ...dataView.fields
@@ -101,7 +101,7 @@ export const DataComparisonView = ({
                 start: windowParameters.baselineMin,
                 end: windowParameters.baselineMax,
               },
-              production: {
+              comparison: {
                 start: windowParameters.deviationMin,
                 end: windowParameters.deviationMax,
               },
@@ -109,18 +109,17 @@ export const DataComparisonView = ({
           }
         : {}),
     });
-    if (forceRefresh) {
-      forceRefresh();
+    if (onRefresh) {
+      onRefresh();
     }
-  }, [dataView, windowParameters, forceRefresh]);
+  }, [dataView, windowParameters, onRefresh]);
 
   const { result, cancelRequest } = useFetchDataComparisonResult({
     ...fetchInfo,
+    initialSettings,
     lastRefresh,
-    randomSampler,
     searchString,
     searchQueryLanguage,
-    searchQuery,
   });
 
   const filteredData = useMemo(() => {
@@ -152,7 +151,9 @@ export const DataComparisonView = ({
     setPageIndex(0);
   };
 
-  return windowParameters === undefined ? (
+  const requiresWindowParameters = dataView?.isTimeBased() && windowParameters === undefined;
+
+  return requiresWindowParameters ? (
     <EuiEmptyPrompt
       color="subdued"
       hasShadow={false}
@@ -161,7 +162,7 @@ export const DataComparisonView = ({
       title={
         <h2>
           <FormattedMessage
-            id="xpack.dataVisualizer.dataComparison.emptyPromptTitle"
+            id="xpack.dataVisualizer.dataDrift.emptyPromptTitle"
             defaultMessage="Select a time range for reference and comparison data in the histogram chart to compare data distribution."
           />
         </h2>
@@ -170,13 +171,12 @@ export const DataComparisonView = ({
       body={
         <p>
           <FormattedMessage
-            id="xpack.dataVisualizer.dataComparison.emptyPromptBody"
-            defaultMessage="The Data Comparison View compares the statistical properties of features in the 'reference' and 'comparison' data sets.
-"
+            id="xpack.dataVisualizer.dataDrift.emptyPromptBody"
+            defaultMessage="The Data Drift Viewer visualizes changes in the model input data, which can lead to model performance degradation over time. Detecting data drifts enables you to identify potential performance issues."
           />
         </p>
       }
-      data-test-subj="dataVisualizerNoWindowParametersEmptyPrompt"
+      data-test-subj="dataDriftNoWindowParametersEmptyPrompt"
     />
   ) : (
     <div>
@@ -186,10 +186,10 @@ export const DataComparisonView = ({
         progress={result.loaded}
         progressMessage={result.progressMessage ?? ''}
         isRunning={result.loaded > 0 && result.loaded < 1}
-        onRefresh={onRefresh}
+        onRefresh={refresh}
         onCancel={cancelRequest}
         shouldRerunAnalysis={shouldRerunAnalysis}
-        runAnalysisDisabled={!dataView || !windowParameters}
+        runAnalysisDisabled={!dataView || requiresWindowParameters}
       >
         <EuiFlexItem grow={false}>
           <EuiFormRow display="columnCompressedSwitch">
@@ -214,7 +214,7 @@ export const DataComparisonView = ({
           body={<span>{result.errorBody}</span>}
         />
       ) : (
-        <DataComparisonOverviewTable
+        <DataDriftOverviewTable
           data={filteredData}
           onTableChange={onTableChange}
           pagination={pagination}
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/document_count_with_dual_brush.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_with_dual_brush.tsx
similarity index 58%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/document_count_with_dual_brush.tsx
rename to x-pack/plugins/data_visualizer/public/application/data_drift/document_count_with_dual_brush.tsx
index 159a1a52597c..63d717cec039 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/document_count_with_dual_brush.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_with_dual_brush.tsx
@@ -8,14 +8,20 @@
 import type { WindowParameters, LogRateHistogramItem } from '@kbn/aiops-utils';
 import React, { FC } from 'react';
 import { DocumentCountChart } from '@kbn/aiops-components';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import type { BrushSelectionUpdateHandler, DocumentCountChartProps } from '@kbn/aiops-components';
 import { RandomSampler } from '@kbn/ml-random-sampler-utils';
+import type { Filter } from '@kbn/es-query';
+import useObservable from 'react-use/lib/useObservable';
+import { map } from 'rxjs/operators';
+
+import { isDefined } from '@kbn/ml-is-defined';
+import { type DataDriftStateManager, useDataDriftStateManagerContext } from './use_state_manager';
 import { useDataVisualizerKibana } from '../kibana_context';
-import { DocumentCountStats } from '../../../common/types/field_stats';
+import { type DocumentCountStats } from '../../../common/types/field_stats';
 import { TotalCountHeader } from '../common/components/document_count_content/total_count_header';
 import { SamplingMenu } from '../common/components/random_sampling_menu/random_sampling_menu';
-
+import { getDataTestSubject } from '../common/util/get_data_test_subject';
 export interface DocumentCountContentProps
   extends Omit<
     DocumentCountChartProps,
@@ -43,9 +49,13 @@ export interface DocumentCountContentProps
   randomSampler: RandomSampler;
   reload: () => void;
   approximate: boolean;
+  stateManager: DataDriftStateManager;
+  label?: string;
+  id?: string;
 }
 
 export const DocumentCountWithDualBrush: FC<DocumentCountContentProps> = ({
+  id,
   randomSampler,
   reload,
   brushSelectionUpdateHandler,
@@ -60,13 +70,35 @@ export const DocumentCountWithDualBrush: FC<DocumentCountContentProps> = ({
   barHighlightColorOverride,
   windowParameters,
   incomingInitialAnalysisStart,
-  approximate,
+  stateManager,
+  label,
   ...docCountChartProps
 }) => {
   const {
-    services: { data, uiSettings, fieldFormats, charts },
+    services: {
+      data,
+      uiSettings,
+      fieldFormats,
+      charts,
+      unifiedSearch: {
+        ui: { SearchBar },
+      },
+    },
   } = useDataVisualizerKibana();
 
+  const { dataView } = useDataDriftStateManagerContext();
+
+  const approximate = useObservable(
+    randomSampler
+      .getProbability$()
+      .pipe(
+        map((samplingProbability) =>
+          isDefined(samplingProbability) ? samplingProbability < 1 : false
+        )
+      ),
+    false
+  );
+
   const bucketTimestamps = Object.keys(documentCountStats?.buckets ?? {}).map((time) => +time);
   const splitBucketTimestamps = Object.keys(documentCountStatsSplit?.buckets ?? {}).map(
     (time) => +time
@@ -74,6 +106,35 @@ export const DocumentCountWithDualBrush: FC<DocumentCountContentProps> = ({
   const timeRangeEarliest = Math.min(...[...bucketTimestamps, ...splitBucketTimestamps]);
   const timeRangeLatest = Math.max(...[...bucketTimestamps, ...splitBucketTimestamps]);
 
+  if (dataView.getTimeField() === undefined) {
+    return (
+      <EuiFlexGroup gutterSize="m" direction="column">
+        <EuiTitle size="xxs">
+          <h3>{label}</h3>
+        </EuiTitle>
+        <EuiFlexGroup gutterSize="m" direction="row" alignItems="center">
+          <EuiFlexItem>
+            <SearchBar
+              key={`dataDrift-${stateManager.id}`}
+              dataTestSubj="dataVisualizerQueryInput"
+              appName={'dataVisualizer'}
+              showFilterBar={true}
+              showDatePicker={false}
+              showQueryInput={false}
+              filters={stateManager.filters}
+              onFiltersUpdated={(filters: Filter[]) => stateManager.setFilters(filters)}
+              indexPatterns={[dataView]}
+              displayStyle={'inPage'}
+              isClearable={true}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <SamplingMenu randomSampler={randomSampler} reload={reload} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexGroup>
+    );
+  }
   if (
     documentCountStats === undefined ||
     documentCountStats.buckets === undefined ||
@@ -99,13 +160,35 @@ export const DocumentCountWithDualBrush: FC<DocumentCountContentProps> = ({
   }
 
   return (
-    <EuiFlexGroup gutterSize="m" direction="column">
-      <EuiFlexGroup gutterSize="m" direction="row">
+    <EuiFlexGroup
+      gutterSize="m"
+      direction="column"
+      data-test-subj={getDataTestSubject('dataDriftTotalDocCountHeader', id)}
+    >
+      <EuiFlexItem>
+        <TotalCountHeader totalCount={totalCount} approximate={approximate} label={label} />
+      </EuiFlexItem>
+
+      <EuiFlexGroup gutterSize="m" direction="row" alignItems="center">
         <EuiFlexItem>
-          <TotalCountHeader totalCount={totalCount} approximate={approximate} />
+          <SearchBar
+            key={`dataDrift-${stateManager.id}`}
+            dataTestSubj="dataVisualizerQueryInput"
+            appName={'dataVisualizer'}
+            showFilterBar={true}
+            showDatePicker={false}
+            showQueryInput={false}
+            filters={stateManager.filters}
+            onFiltersUpdated={(filters: Filter[]) => stateManager.setFilters(filters)}
+            indexPatterns={[dataView]}
+            displayStyle={'inPage'}
+            isClearable={true}
+            customSubmitButton={<div />}
+          />
         </EuiFlexItem>
+
         <EuiFlexItem grow={false}>
-          <SamplingMenu randomSampler={randomSampler} reload={reload} />
+          <SamplingMenu randomSampler={randomSampler} reload={reload} id={id} />
         </EuiFlexItem>
       </EuiFlexGroup>
 
@@ -125,6 +208,8 @@ export const DocumentCountWithDualBrush: FC<DocumentCountContentProps> = ({
             barColorOverride={barColorOverride}
             barHighlightColorOverride={barHighlightColorOverride}
             {...docCountChartProps}
+            height={60}
+            dataTestSubj={getDataTestSubject('dataDriftDocCountChart', id)}
           />
         </EuiFlexItem>
       )}
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/index.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/index.ts
similarity index 64%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/index.ts
rename to x-pack/plugins/data_visualizer/public/application/data_drift/index.ts
index 887f640da0d1..9d0507e9d404 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/index.ts
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/index.ts
@@ -5,11 +5,8 @@
  * 2.0.
  */
 
-import {
-  DataComparisonDetectionAppState,
-  type DataComparisonSpec,
-} from './data_comparison_app_state';
-export { type DataComparisonSpec };
+import { DataDriftDetectionAppState, type DataDriftSpec } from './data_drift_app_state';
+export { type DataDriftSpec };
 // required for dynamic import using React.lazy()
 // eslint-disable-next-line import/no-default-export
-export default DataComparisonDetectionAppState;
+export default DataDriftDetectionAppState;
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/types.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/types.ts
similarity index 76%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/types.ts
rename to x-pack/plugins/data_visualizer/public/application/data_drift/types.ts
index 46272c045d51..55da47f44d01 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/types.ts
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/types.ts
@@ -6,18 +6,23 @@
  */
 
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
-import { Filter, Query } from '@kbn/es-query';
+import type { Filter, Query } from '@kbn/es-query';
 import * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { SEARCH_QUERY_LANGUAGE, SearchQueryLanguage } from '@kbn/ml-query-utils';
 import { DATA_COMPARISON_TYPE } from './constants';
 
-export interface DataComparisonAppState {
+export interface DataComparisonQueryState {
   searchString?: Query['query'];
   searchQuery?: estypes.QueryDslQueryContainer;
   searchQueryLanguage: SearchQueryLanguage;
   filters?: Filter[];
 }
 
+export interface DataComparisonAppState extends DataComparisonQueryState {
+  reference: DataComparisonQueryState;
+  comparison: DataComparisonQueryState;
+}
+
 export type DataComparisonFullAppState = Required<DataComparisonAppState>;
 export type BasicAppState = DataComparisonFullAppState;
 
@@ -32,6 +37,18 @@ export const getDefaultDataComparisonState = (
   searchQuery: defaultSearchQuery,
   searchQueryLanguage: SEARCH_QUERY_LANGUAGE.KUERY,
   filters: [],
+  reference: {
+    searchString: '',
+    searchQuery: defaultSearchQuery,
+    searchQueryLanguage: SEARCH_QUERY_LANGUAGE.KUERY,
+    filters: [],
+  },
+  comparison: {
+    searchString: '',
+    searchQuery: defaultSearchQuery,
+    searchQueryLanguage: SEARCH_QUERY_LANGUAGE.KUERY,
+    filters: [],
+  },
   ...overrides,
 });
 
@@ -45,18 +62,28 @@ export interface ComparisonHistogram extends Histogram {
   g: string;
 }
 
+interface Domain {
+  min: number;
+  max: number;
+}
 // Show the overview table
 export interface Feature {
   featureName: string;
-  fieldType: DataComparisonField['type'];
+  fieldType: DataDriftField['type'];
+  secondaryType: DataDriftField['secondaryType'];
   driftDetected: boolean;
   similarityTestPValue: number;
-  productionHistogram: Histogram[];
+  comparisonHistogram: Histogram[];
   referenceHistogram: Histogram[];
   comparisonDistribution: ComparisonHistogram[];
+  domain?: {
+    doc_count: Domain;
+    percentage: Domain;
+    x: Domain;
+  };
 }
 
-export interface DataComparisonField {
+export interface DataDriftField {
   field: string;
   type: DataComparisonType;
   secondaryType: string;
@@ -92,7 +119,7 @@ export interface NumericDriftData {
   pValue: number;
   range?: Range;
   referenceHistogram: Histogram[];
-  productionHistogram: Histogram[];
+  comparisonHistogram: Histogram[];
   secondaryType: string;
 }
 export interface CategoricalDriftData {
diff --git a/x-pack/plugins/data_visualizer/public/application/data_comparison/use_data_drift_result.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/use_data_drift_result.ts
similarity index 78%
rename from x-pack/plugins/data_visualizer/public/application/data_comparison/use_data_drift_result.ts
rename to x-pack/plugins/data_visualizer/public/application/data_drift/use_data_drift_result.ts
index a8e145c3fee1..7707f23afd3e 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_comparison/use_data_drift_result.ts
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/use_data_drift_result.ts
@@ -17,11 +17,14 @@ import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/typesW
 import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
 import { getDefaultDSLQuery } from '@kbn/ml-query-utils';
 import { i18n } from '@kbn/i18n';
-import { RandomSampler, RandomSamplerWrapper } from '@kbn/ml-random-sampler-utils';
+import { RandomSamplerWrapper } from '@kbn/ml-random-sampler-utils';
 import { extractErrorMessage } from '@kbn/ml-error-utils';
 import { AggregationsAggregate } from '@elastic/elasticsearch/lib/api/types';
 import { QueryDslBoolQuery } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { isDefined } from '@kbn/ml-is-defined';
+import { mapAndFlattenFilters } from '@kbn/data-plugin/public';
+import { createMergedEsQuery } from '../index_data_visualizer/utils/saved_search_utils';
+import { useDataDriftStateManagerContext } from './use_state_manager';
 import { useDataVisualizerKibana } from '../kibana_context';
 import {
   REFERENCE_LABEL,
@@ -39,12 +42,13 @@ import {
   Result,
   isNumericDriftData,
   Feature,
-  DataComparisonField,
+  DataDriftField,
   TimeRange,
+  ComparisonHistogram,
 } from './types';
-import { computeChi2PValue } from './data_comparison_utils';
+import { computeChi2PValue } from './data_drift_utils';
 
-export const getDataComparisonType = (kibanaType: string): DataComparisonField['type'] => {
+export const getDataComparisonType = (kibanaType: string): DataDriftField['type'] => {
   switch (kibanaType) {
     case 'number':
       return DATA_COMPARISON_TYPE.NUMERIC;
@@ -58,6 +62,41 @@ export const getDataComparisonType = (kibanaType: string): DataComparisonField['
 
 type UseDataSearch = ReturnType<typeof useDataSearch>;
 
+const computeDomain = (comparisonDistribution: Histogram[] | ComparisonHistogram[]) => {
+  const domain: NonNullable<Feature['domain']> = {
+    x: { min: 0, max: 0 },
+    percentage: { min: 0, max: 0 },
+    doc_count: { min: 0, max: 0 },
+  };
+
+  comparisonDistribution.forEach((dist) => {
+    if (isDefined<number>(dist.percentage)) {
+      if (dist.percentage >= domain.percentage.max) {
+        domain.percentage.max = dist.percentage;
+      } else {
+        domain.percentage.min = dist.percentage;
+      }
+    }
+
+    if (isDefined<number>(dist.doc_count)) {
+      if (dist.doc_count >= domain.doc_count.max) {
+        domain.doc_count.max = dist.doc_count;
+      } else {
+        domain.doc_count.min = dist.doc_count;
+      }
+    }
+
+    const parsedKey = typeof dist.key === 'number' ? dist.key : parseFloat(dist.key);
+    if (!isNaN(parsedKey)) {
+      if (parsedKey >= domain.x.max) {
+        domain.x.max = parsedKey;
+      } else {
+        domain.x.min = parsedKey;
+      }
+    }
+  });
+  return domain;
+};
 export const useDataSearch = <T>() => {
   const { data } = useDataVisualizerKibana().services;
 
@@ -130,10 +169,16 @@ const processDataComparisonResult = (
 ): Feature[] => {
   return Object.entries(result).map(([featureName, data]) => {
     if (isNumericDriftData(data)) {
-      // normalize data.referenceHistogram and data.productionHistogram to use frequencies instead of counts
+      // normalize data.referenceHistogram and data.comparisonHistogram to use frequencies instead of counts
       const referenceHistogram: Histogram[] = normalizeHistogram(data.referenceHistogram);
-      const productionHistogram: Histogram[] = normalizeHistogram(data.productionHistogram);
+      const comparisonHistogram: Histogram[] = normalizeHistogram(data.comparisonHistogram);
 
+      const comparisonDistribution: ComparisonHistogram[] = [
+        ...referenceHistogram.map((h) => ({ ...h, g: REFERENCE_LABEL })),
+        ...comparisonHistogram.map((h) => ({ ...h, g: COMPARISON_LABEL })),
+      ];
+
+      const domain = computeDomain(comparisonHistogram);
       return {
         featureName,
         secondaryType: data.secondaryType,
@@ -141,11 +186,9 @@ const processDataComparisonResult = (
         driftDetected: data.pValue < DRIFT_P_VALUE_THRESHOLD,
         similarityTestPValue: data.pValue,
         referenceHistogram: referenceHistogram ?? [],
-        productionHistogram: productionHistogram ?? [],
-        comparisonDistribution: [
-          ...referenceHistogram.map((h) => ({ ...h, g: REFERENCE_LABEL })),
-          ...productionHistogram.map((h) => ({ ...h, g: COMPARISON_LABEL })),
-        ],
+        comparisonHistogram: comparisonHistogram ?? [],
+        comparisonDistribution,
+        domain,
       };
     }
 
@@ -163,12 +206,12 @@ const processDataComparisonResult = (
       (acc, term) => acc + term.doc_count,
       data.baselineSumOtherDocCount
     );
-    const productionTotalDocCount: number = data.driftedTerms.reduce(
+    const comparisonTotalDocCount: number = data.driftedTerms.reduce(
       (acc, term) => acc + term.doc_count,
       data.driftedSumOtherDocCount
     );
 
-    // Sort the categories (allKeys) by the following metric: Math.abs(productionDocCount-referenceDocCount)/referenceDocCount
+    // Sort the categories (allKeys) by the following metric: Math.abs(comparisonDocCount-referenceDocCount)/referenceDocCount
     const sortedKeys = allKeys
       .map((k) => {
         const key = k.toString();
@@ -176,11 +219,11 @@ const processDataComparisonResult = (
         const driftedTerm = data.driftedTerms.find((t) => t.key === key);
         if (baselineTerm && driftedTerm) {
           const referencePercentage = baselineTerm.doc_count / referenceTotalDocCount;
-          const productionPercentage = driftedTerm.doc_count / productionTotalDocCount;
+          const comparisonPercentage = driftedTerm.doc_count / comparisonTotalDocCount;
           return {
             key,
             relative_drift:
-              Math.abs(productionPercentage - referencePercentage) / referencePercentage,
+              Math.abs(comparisonPercentage - referencePercentage) / referencePercentage,
           };
         }
         return {
@@ -199,10 +242,14 @@ const processDataComparisonResult = (
     const { normalizedTerms: normalizedDriftedTerms } = normalizeTerms(
       data.driftedTerms,
       sortedKeys,
-      productionTotalDocCount
+      comparisonTotalDocCount
     );
 
     const pValue: number = computeChi2PValue(normalizedBaselineTerms, normalizedDriftedTerms);
+    const comparisonDistribution = [
+      ...normalizedBaselineTerms.map((h) => ({ ...h, g: REFERENCE_LABEL })),
+      ...normalizedDriftedTerms.map((h) => ({ ...h, g: COMPARISON_LABEL })),
+    ];
     return {
       featureName,
       secondaryType: data.secondaryType,
@@ -210,11 +257,9 @@ const processDataComparisonResult = (
       driftDetected: pValue < DRIFT_P_VALUE_THRESHOLD,
       similarityTestPValue: pValue,
       referenceHistogram: normalizedBaselineTerms ?? [],
-      productionHistogram: normalizedDriftedTerms ?? [],
-      comparisonDistribution: [
-        ...normalizedBaselineTerms.map((h) => ({ ...h, g: REFERENCE_LABEL })),
-        ...normalizedDriftedTerms.map((h) => ({ ...h, g: COMPARISON_LABEL })),
-      ],
+      comparisonHistogram: normalizedDriftedTerms ?? [],
+      comparisonDistribution,
+      domain: computeDomain(comparisonDistribution),
     };
   });
 };
@@ -259,13 +304,13 @@ const getDataComparisonQuery = ({
     }
   }
 
-  const refDataQuery: NonNullable<estypes.SearchRequest['body']> = {
+  const queryAndRuntimeMappings: NonNullable<estypes.SearchRequest['body']> = {
     query,
   };
   if (runtimeFields) {
-    refDataQuery.runtime_mappings = runtimeFields;
+    queryAndRuntimeMappings.runtime_mappings = runtimeFields;
   }
-  return refDataQuery;
+  return queryAndRuntimeMappings;
 };
 
 const fetchReferenceBaselineData = async ({
@@ -277,7 +322,7 @@ const fetchReferenceBaselineData = async ({
 }: {
   baseRequest: EsRequestParams;
   dataSearch: UseDataSearch;
-  fields: DataComparisonField[];
+  fields: DataDriftField[];
   randomSamplerWrapper: RandomSamplerWrapper;
   signal: AbortSignal;
 }) => {
@@ -332,7 +377,7 @@ const fetchComparisonDriftedData = async ({
 }: {
   baseRequest: EsRequestParams;
   dataSearch: UseDataSearch;
-  fields: DataComparisonField[];
+  fields: DataDriftField[];
   randomSamplerWrapper: RandomSamplerWrapper;
   signal: AbortSignal;
   baselineResponseAggs: object;
@@ -411,7 +456,7 @@ const fetchHistogramData = async ({
 }: {
   baseRequest: EsRequestParams;
   dataSearch: UseDataSearch;
-  fields: DataComparisonField[];
+  fields: DataDriftField[];
   randomSamplerWrapper: RandomSamplerWrapper;
   signal: AbortSignal;
   baselineResponseAggs: Record<string, estypes.AggregationsStatsAggregate>;
@@ -504,14 +549,14 @@ export const fetchInParallelChunks = async <
   asyncFetchFn,
   errorMsg,
 }: {
-  fields: DataComparisonField[];
+  fields: DataDriftField[];
   randomSamplerWrapper: RandomSamplerWrapper;
-  asyncFetchFn: (chunkedFields: DataComparisonField[]) => Promise<ReturnedRespFromFetchFn>;
+  asyncFetchFn: (chunkedFields: DataDriftField[]) => Promise<ReturnedRespFromFetchFn>;
   errorMsg?: string;
 }): Promise<ReturnedRespFromFetchFn | ReturnedError> => {
   const { unwrap } = randomSamplerWrapper;
   const results = await Promise.allSettled(
-    chunk(fields, 30).map((chunkedFields: DataComparisonField[]) => asyncFetchFn(chunkedFields))
+    chunk(fields, 30).map((chunkedFields: DataDriftField[]) => asyncFetchFn(chunkedFields))
   );
 
   const mergedResults = results
@@ -532,7 +577,7 @@ export const fetchInParallelChunks = async <
       // eslint-disable-next-line no-console
       console.error(error);
       return {
-        error: errorMsg ?? 'An error occurred fetching data comparison data',
+        error: errorMsg ?? 'An error occurred fetching data drift data',
         errorBody: error.reason.message,
       };
     }
@@ -551,22 +596,29 @@ const initialState = {
   error: undefined,
   errorBody: undefined,
 };
+
+export interface InitialSettings {
+  index: string;
+  comparison: string;
+  reference: string;
+  timeField: string;
+}
+
 export const useFetchDataComparisonResult = (
   {
     fields,
+    initialSettings,
     currentDataView,
     timeRanges,
-    searchQuery,
     searchString,
+    searchQueryLanguage,
     lastRefresh,
-    randomSampler,
   }: {
     lastRefresh: number;
-    randomSampler?: RandomSampler;
-    fields?: DataComparisonField[];
+    initialSettings?: InitialSettings;
+    fields?: DataDriftField[];
     currentDataView?: DataView;
-    timeRanges?: { reference: TimeRange; production: TimeRange };
-    searchQuery?: estypes.QueryDslQueryContainer;
+    timeRanges?: { reference: TimeRange; comparison: TimeRange };
     searchString?: Query['query'];
     searchQueryLanguage?: SearchQueryLanguage;
   } = { lastRefresh: 0 }
@@ -576,6 +628,13 @@ export const useFetchDataComparisonResult = (
   const [loaded, setLoaded] = useState<number>(0);
   const [progressMessage, setProgressMessage] = useState<string | undefined>();
   const abortController = useRef(new AbortController());
+  const {
+    uiSettings,
+    data: { query: queryManager },
+  } = useDataVisualizerKibana().services;
+
+  const { reference: referenceStateManager, comparison: comparisonStateManager } =
+    useDataDriftStateManagerContext();
 
   const cancelRequest = useCallback(() => {
     abortController.current.abort();
@@ -588,9 +647,12 @@ export const useFetchDataComparisonResult = (
   useEffect(
     () => {
       const doFetchEsRequest = async function () {
-        if (!randomSampler) return;
+        const randomSampler = referenceStateManager.randomSampler;
+        const randomSamplerProd = comparisonStateManager.randomSampler;
+        if (!randomSampler || !randomSamplerProd) return;
 
         const randomSamplerWrapper = randomSampler.createRandomSamplerWrapper();
+        const prodRandomSamplerWrapper = randomSamplerProd.createRandomSamplerWrapper();
 
         setLoaded(0);
         setResult({
@@ -600,7 +662,7 @@ export const useFetchDataComparisonResult = (
         });
 
         setProgressMessage(
-          i18n.translate('xpack.dataVisualizer.dataComparison.progress.started', {
+          i18n.translate('xpack.dataVisualizer.dataDrift.progress.started', {
             defaultMessage: `Ready to fetch data for comparison.`,
           })
         );
@@ -611,19 +673,35 @@ export const useFetchDataComparisonResult = (
         setResult({ data: undefined, status: FETCH_STATUS.LOADING, error: undefined });
 
         // Place holder for when there might be difference data views in the future
-        const referenceIndex = currentDataView?.getIndexPattern();
-        const productionIndex = referenceIndex;
+        const referenceIndex = initialSettings
+          ? initialSettings.reference
+          : currentDataView?.getIndexPattern();
+        const comparisonIndex = initialSettings ? initialSettings.comparison : referenceIndex;
 
         const runtimeFields = currentDataView?.getRuntimeMappings();
 
         setProgressMessage(
-          i18n.translate('xpack.dataVisualizer.dataComparison.progress.loadedFields', {
+          i18n.translate('xpack.dataVisualizer.dataDrift.progress.loadedFields', {
             defaultMessage: `Loaded fields from index '{referenceIndex}' to analyze.`,
             values: { referenceIndex },
           })
         );
+
+        const kqlQuery =
+          searchString !== undefined && searchQueryLanguage !== undefined
+            ? { query: searchString, language: searchQueryLanguage }
+            : undefined;
+
         const refDataQuery = getDataComparisonQuery({
-          searchQuery,
+          searchQuery: createMergedEsQuery(
+            kqlQuery,
+            mapAndFlattenFilters([
+              ...queryManager.filterManager.getFilters(),
+              ...(referenceStateManager.filters ?? []),
+            ]),
+            currentDataView,
+            uiSettings
+          ),
           datetimeField: currentDataView?.timeFieldName,
           runtimeFields,
           timeRange: timeRanges?.reference,
@@ -633,7 +711,7 @@ export const useFetchDataComparisonResult = (
           const fieldsCount = fields.length;
 
           setProgressMessage(
-            i18n.translate('xpack.dataVisualizer.dataComparison.progress.loadingReference', {
+            i18n.translate('xpack.dataVisualizer.dataDrift.progress.loadingReference', {
               defaultMessage: `Loading reference data for {fieldsCount} fields.`,
               values: { fieldsCount },
             })
@@ -673,45 +751,54 @@ export const useFetchDataComparisonResult = (
           }
 
           setProgressMessage(
-            i18n.translate('xpack.dataVisualizer.dataComparison.progress.loadedReference', {
+            i18n.translate('xpack.dataVisualizer.dataDrift.progress.loadedReference', {
               defaultMessage: `Loaded reference data.`,
             })
           );
           setLoaded(0.25);
 
           const prodDataQuery = getDataComparisonQuery({
-            searchQuery,
+            searchQuery: createMergedEsQuery(
+              kqlQuery,
+              mapAndFlattenFilters([
+                ...queryManager.filterManager.getFilters(),
+                ...(comparisonStateManager.filters ?? []),
+              ]),
+              currentDataView,
+              uiSettings
+            ),
             datetimeField: currentDataView?.timeFieldName,
             runtimeFields,
-            timeRange: timeRanges?.production,
+            timeRange: timeRanges?.comparison,
           });
 
           setProgressMessage(
-            i18n.translate('xpack.dataVisualizer.dataComparison.progress.loadingComparison', {
+            i18n.translate('xpack.dataVisualizer.dataDrift.progress.loadingComparison', {
               defaultMessage: `Loading comparison data for {fieldsCount} fields.`,
               values: { fieldsCount },
             })
           );
 
           const driftedRequest: EsRequestParams = {
-            index: productionIndex,
+            index: comparisonIndex,
             body: {
               size: 0,
               aggs: {} as Record<string, estypes.AggregationsAggregationContainer>,
               ...prodDataQuery,
             },
           };
+
           const driftedRespAggs = await fetchInParallelChunks({
             fields,
-            randomSamplerWrapper,
+            randomSamplerWrapper: prodRandomSamplerWrapper,
 
-            asyncFetchFn: (chunkedFields: DataComparisonField[]) =>
+            asyncFetchFn: (chunkedFields: DataDriftField[]) =>
               fetchComparisonDriftedData({
                 dataSearch,
                 baseRequest: driftedRequest,
                 baselineResponseAggs,
                 fields: chunkedFields,
-                randomSamplerWrapper,
+                randomSamplerWrapper: prodRandomSamplerWrapper,
                 signal,
               }),
           });
@@ -727,7 +814,7 @@ export const useFetchDataComparisonResult = (
 
           setLoaded(0.5);
           setProgressMessage(
-            i18n.translate('xpack.dataVisualizer.dataComparison.progress.loadedComparison', {
+            i18n.translate('xpack.dataVisualizer.dataDrift.progress.loadedComparison', {
               defaultMessage: `Loaded comparison data. Now loading histogram data.`,
             })
           );
@@ -745,7 +832,7 @@ export const useFetchDataComparisonResult = (
             fields,
             randomSamplerWrapper,
 
-            asyncFetchFn: (chunkedFields: DataComparisonField[]) =>
+            asyncFetchFn: (chunkedFields: DataDriftField[]) =>
               fetchHistogramData({
                 dataSearch,
                 baseRequest: referenceHistogramRequest,
@@ -769,16 +856,13 @@ export const useFetchDataComparisonResult = (
 
           setLoaded(0.75);
           setProgressMessage(
-            i18n.translate(
-              'xpack.dataVisualizer.dataComparison.progress.loadedReferenceHistogram',
-              {
-                defaultMessage: `Loaded histogram data for reference data set.`,
-              }
-            )
+            i18n.translate('xpack.dataVisualizer.dataDrift.progress.loadedReferenceHistogram', {
+              defaultMessage: `Loaded histogram data for reference data set.`,
+            })
           );
 
-          const productionHistogramRequest: EsRequestParams = {
-            index: productionIndex,
+          const comparisonHistogramRequest: EsRequestParams = {
+            index: comparisonIndex,
             body: {
               size: 0,
               aggs: {} as Record<string, estypes.AggregationsAggregationContainer>,
@@ -786,14 +870,14 @@ export const useFetchDataComparisonResult = (
             },
           };
 
-          const productionHistogramRespAggs = await fetchInParallelChunks({
+          const comparisonHistogramRespAggs = await fetchInParallelChunks({
             fields,
             randomSamplerWrapper,
 
-            asyncFetchFn: (chunkedFields: DataComparisonField[]) =>
+            asyncFetchFn: (chunkedFields: DataDriftField[]) =>
               fetchHistogramData({
                 dataSearch,
-                baseRequest: productionHistogramRequest,
+                baseRequest: comparisonHistogramRequest,
                 baselineResponseAggs,
                 driftedRespAggs,
                 fields: chunkedFields,
@@ -802,12 +886,12 @@ export const useFetchDataComparisonResult = (
               }),
           });
 
-          if (isReturnedError(productionHistogramRespAggs)) {
+          if (isReturnedError(comparisonHistogramRespAggs)) {
             setResult({
               data: undefined,
               status: FETCH_STATUS.FAILURE,
-              error: productionHistogramRespAggs.error,
-              errorBody: productionHistogramRespAggs.errorBody,
+              error: comparisonHistogramRespAggs.error,
+              errorBody: comparisonHistogramRespAggs.errorBody,
             });
             return;
           }
@@ -818,14 +902,14 @@ export const useFetchDataComparisonResult = (
               type === DATA_COMPARISON_TYPE.NUMERIC &&
               driftedRespAggs[`${field}_ks_test`] &&
               referenceHistogramRespAggs[`${field}_histogram`] &&
-              productionHistogramRespAggs[`${field}_histogram`]
+              comparisonHistogramRespAggs[`${field}_histogram`]
             ) {
               data[field] = {
                 secondaryType,
                 type: DATA_COMPARISON_TYPE.NUMERIC,
                 pValue: driftedRespAggs[`${field}_ks_test`].two_sided,
                 referenceHistogram: referenceHistogramRespAggs[`${field}_histogram`].buckets,
-                productionHistogram: productionHistogramRespAggs[`${field}_histogram`].buckets,
+                comparisonHistogram: comparisonHistogramRespAggs[`${field}_histogram`].buckets,
               };
             }
             if (
@@ -846,7 +930,7 @@ export const useFetchDataComparisonResult = (
           }
 
           setProgressMessage(
-            i18n.translate('xpack.dataVisualizer.dataComparison.progress.loadedHistogramData', {
+            i18n.translate('xpack.dataVisualizer.dataDrift.progress.loadedHistogramData', {
               defaultMessage: `Loaded histogram data for comparison data set.`,
             })
           );
@@ -862,7 +946,7 @@ export const useFetchDataComparisonResult = (
           setResult({
             data: undefined,
             status: FETCH_STATUS.FAILURE,
-            error: 'An error occurred while fetching data comparison data',
+            error: 'An error occurred while fetching data drift data',
             errorBody: extractErrorMessage(e),
           });
         }
@@ -872,6 +956,8 @@ export const useFetchDataComparisonResult = (
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
+      referenceStateManager,
+      comparisonStateManager,
       dataSearch,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       JSON.stringify({
diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/use_state_manager.ts b/x-pack/plugins/data_visualizer/public/application/data_drift/use_state_manager.ts
new file mode 100644
index 000000000000..e6536e130e98
--- /dev/null
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/use_state_manager.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { createContext, useContext, useState } from 'react';
+import { DataView } from '@kbn/data-views-plugin/common';
+import type { Filter } from '@kbn/es-query';
+import * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
+import { RandomSampler } from '@kbn/ml-random-sampler-utils';
+
+export const defaultSearchQuery = {
+  match_all: {},
+};
+
+interface StateManagerInitialParams {
+  id: string;
+  indexPattern: string;
+  searchString: string;
+  searchQuery: estypes.QueryDslQueryContainer;
+  searchQueryLanguage: SearchQueryLanguage;
+  filters: Filter[];
+  timeField?: string;
+}
+
+export const DataDriftStateManagerContext = createContext<{
+  dataView: DataView;
+  reference: DataDriftStateManager;
+  comparison: DataDriftStateManager;
+}>({
+  get dataView(): never {
+    throw new Error('DataDriftStateManagerContext is not implemented');
+  },
+  get reference(): never {
+    throw new Error('reference is not implemented');
+  },
+  get comparison(): never {
+    throw new Error('comparison is not implemented');
+  },
+});
+
+export type DataDriftStateManager = ReturnType<typeof useDataDriftStateManager>;
+
+export const useDataDriftStateManager = ({
+  id,
+  indexPattern: initialIndexPattern,
+  searchString: initialSearchString,
+  searchQuery: initialSearchQuery,
+  searchQueryLanguage: initialSearchQueryLanguage,
+  filters: initialFilters,
+  timeField: initialTimeField,
+}: StateManagerInitialParams) => {
+  const [query, setQuery] = useState(initialSearchQuery);
+  const [indexPattern, setIndexPattern] = useState(initialIndexPattern);
+  const [searchString, setSearchString] = useState(initialSearchString);
+  const [searchQueryLanguage, setSearchQueryLanguage] = useState(initialSearchQueryLanguage);
+  const [filters, setFilters] = useState(initialFilters);
+  const [timeField, setTimeField] = useState(initialTimeField);
+  const [randomSampler] = useState(new RandomSampler());
+
+  return {
+    id,
+    query,
+    setQuery,
+    indexPattern,
+    setIndexPattern,
+    searchString,
+    setSearchString,
+    searchQueryLanguage,
+    setSearchQueryLanguage,
+    filters,
+    setFilters,
+    timeField,
+    setTimeField,
+    randomSampler,
+  };
+};
+
+export function useDataDriftStateManagerContext() {
+  return useContext(DataDriftStateManagerContext);
+}
diff --git a/x-pack/plugins/data_visualizer/public/application/index.ts b/x-pack/plugins/data_visualizer/public/application/index.ts
index 8a89702d5ea9..d2bf7ed6a8f0 100644
--- a/x-pack/plugins/data_visualizer/public/application/index.ts
+++ b/x-pack/plugins/data_visualizer/public/application/index.ts
@@ -12,4 +12,4 @@ export type {
   IndexDataVisualizerViewProps,
 } from './index_data_visualizer';
 export { IndexDataVisualizer } from './index_data_visualizer';
-export type { DataComparisonSpec } from './data_comparison';
+export type { DataDriftSpec } from './data_drift';
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
index 256d77fec965..d752cb4b166f 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
@@ -21,7 +21,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
-import { Filter, FilterStateStore, Query } from '@kbn/es-query';
+import { type Filter, FilterStateStore, type Query } from '@kbn/es-query';
 import { generateFilters } from '@kbn/data-plugin/public';
 import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import { usePageUrlState, useUrlState } from '@kbn/ml-url-state';
@@ -33,7 +33,7 @@ import {
 import { useStorage } from '@kbn/ml-local-storage';
 
 import type { SavedSearch } from '@kbn/saved-search-plugin/public';
-import { SEARCH_QUERY_LANGUAGE, SearchQueryLanguage } from '@kbn/ml-query-utils';
+import { SEARCH_QUERY_LANGUAGE, type SearchQueryLanguage } from '@kbn/ml-query-utils';
 import { kbnTypeToSupportedType } from '../../../common/util/field_types_utils';
 import { useCurrentEuiTheme } from '../../../common/hooks/use_current_eui_theme';
 import {
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_bar.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_bar.tsx
index 9819d3f9d9e9..3ad691bbe11c 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_bar.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_bar.tsx
@@ -5,12 +5,12 @@
  * 2.0.
  */
 
-import { Filter, Query, TimeRange } from '@kbn/es-query';
+import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState } from 'react';
 import { isDefined } from '@kbn/ml-is-defined';
 import { DataView } from '@kbn/data-views-plugin/common';
-import { SearchQueryLanguage } from '@kbn/ml-query-utils';
+import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
 import { createMergedEsQuery } from '../../utils/saved_search_utils';
 import { useDataVisualizerKibana } from '../../../kibana_context';
 
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/locator/locator.ts b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/locator/locator.ts
index 6d2fffd09ac3..ecba601a40a0 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/locator/locator.ts
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/locator/locator.ts
@@ -6,8 +6,8 @@
  */
 import { encode } from '@kbn/rison';
 import { stringify } from 'query-string';
-import { SerializableRecord } from '@kbn/utility-types';
-import { Filter, TimeRange } from '@kbn/es-query';
+import type { SerializableRecord } from '@kbn/utility-types';
+import type { Filter, TimeRange } from '@kbn/es-query';
 import type { RefreshInterval } from '@kbn/data-plugin/common';
 import { LocatorDefinition, LocatorPublic } from '@kbn/share-plugin/common';
 import { GlobalQueryStateFromUrl } from '@kbn/data-plugin/public';
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/utils/saved_search_utils.ts b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/utils/saved_search_utils.ts
index 6961c5d822a6..04bc52bf0805 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/utils/saved_search_utils.ts
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/utils/saved_search_utils.ts
@@ -100,6 +100,7 @@ export function createMergedEsQuery(
       uiSettings ? getEsQueryConfig(uiSettings) : undefined
     );
   }
+
   return combinedQuery;
 }
 
diff --git a/x-pack/plugins/data_visualizer/public/index.ts b/x-pack/plugins/data_visualizer/public/index.ts
index 1312419797bb..b17e0a434741 100644
--- a/x-pack/plugins/data_visualizer/public/index.ts
+++ b/x-pack/plugins/data_visualizer/public/index.ts
@@ -17,7 +17,7 @@ export type {
   FileDataVisualizerSpec,
   IndexDataVisualizerSpec,
   IndexDataVisualizerViewProps,
-  DataComparisonSpec,
+  DataDriftSpec,
 } from './application';
 export type {
   GetAdditionalLinksParams,
diff --git a/x-pack/plugins/data_visualizer/public/lazy_load_bundle/component_wrapper.tsx b/x-pack/plugins/data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
index cbd897ac2081..6902ef121b9b 100644
--- a/x-pack/plugins/data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
+++ b/x-pack/plugins/data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
@@ -7,7 +7,7 @@
 
 import React, { FC, Suspense } from 'react';
 import { EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
-import type { DataComparisonDetectionAppStateProps } from '../application/data_comparison/data_comparison_app_state';
+import type { DataDriftDetectionAppStateProps } from '../application/data_drift/data_drift_app_state';
 
 const LazyWrapper: FC = ({ children }) => (
   <EuiErrorBoundary>
@@ -27,14 +27,14 @@ export const FileDataVisualizerWrapper: FC = () => {
   );
 };
 
-const DataComparisonLazy = React.lazy(() => import('../application/data_comparison'));
+const DataDriftLazy = React.lazy(() => import('../application/data_drift'));
 
 /**
  * Lazy-wrapped ExplainLogRateSpikesAppState React component
- * @param {ExplainLogRateSpikesAppStateProps}  props - properties specifying the data on which to run the analysis.
+ * @param {DataDriftDetectionAppStateProps}  props - properties specifying the data on which to run the analysis.
  */
-export const DataComparison: FC<DataComparisonDetectionAppStateProps> = (props) => (
+export const DataDrift: FC<DataDriftDetectionAppStateProps> = (props) => (
   <LazyWrapper>
-    <DataComparisonLazy {...props} />
+    <DataDriftLazy {...props} />
   </LazyWrapper>
 );
diff --git a/x-pack/plugins/data_visualizer/public/lazy_load_bundle/index.ts b/x-pack/plugins/data_visualizer/public/lazy_load_bundle/index.ts
index ba7cb83f7840..4d0cee4447c1 100644
--- a/x-pack/plugins/data_visualizer/public/lazy_load_bundle/index.ts
+++ b/x-pack/plugins/data_visualizer/public/lazy_load_bundle/index.ts
@@ -7,7 +7,7 @@
 
 import { HttpSetup } from '@kbn/core/public';
 import type {
-  DataComparisonSpec,
+  DataDriftSpec,
   FileDataVisualizerSpec,
   IndexDataVisualizerSpec,
 } from '../application';
@@ -18,7 +18,7 @@ let loadModulesPromise: Promise<LazyLoadedModules>;
 interface LazyLoadedModules {
   FileDataVisualizer: FileDataVisualizerSpec;
   IndexDataVisualizer: IndexDataVisualizerSpec;
-  DataComparison: DataComparisonSpec;
+  DataDrift: DataDriftSpec;
   getHttp: () => HttpSetup;
 }
 
diff --git a/x-pack/plugins/data_visualizer/public/lazy_load_bundle/lazy/index.tsx b/x-pack/plugins/data_visualizer/public/lazy_load_bundle/lazy/index.tsx
index 181e15edc5fd..efb9b7ba1bae 100644
--- a/x-pack/plugins/data_visualizer/public/lazy_load_bundle/lazy/index.tsx
+++ b/x-pack/plugins/data_visualizer/public/lazy_load_bundle/lazy/index.tsx
@@ -7,4 +7,4 @@
 
 export type { FileDataVisualizerSpec, IndexDataVisualizerSpec } from '../../application';
 export { FileDataVisualizer, IndexDataVisualizer } from '../../application';
-export { DataComparison } from '../component_wrapper';
+export { DataDrift } from '../component_wrapper';
diff --git a/x-pack/plugins/data_visualizer/public/plugin.ts b/x-pack/plugins/data_visualizer/public/plugin.ts
index 05b06c484322..e2c259726ea4 100644
--- a/x-pack/plugins/data_visualizer/public/plugin.ts
+++ b/x-pack/plugins/data_visualizer/public/plugin.ts
@@ -25,7 +25,7 @@ import type { IndexPatternFieldEditorStart } from '@kbn/data-view-field-editor-p
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import {
-  getDataComparisonComponent,
+  getDataDriftComponent,
   getFileDataVisualizerComponent,
   getIndexDataVisualizerComponent,
 } from './api';
@@ -90,7 +90,7 @@ export class DataVisualizerPlugin
     return {
       getFileDataVisualizerComponent,
       getIndexDataVisualizerComponent,
-      getDataComparisonComponent,
+      getDataDriftComponent,
       getMaxBytesFormatted,
     };
   }
diff --git a/x-pack/plugins/ml/common/constants/locator.ts b/x-pack/plugins/ml/common/constants/locator.ts
index 8f3b0ac23ee2..92c89c5aedf9 100644
--- a/x-pack/plugins/ml/common/constants/locator.ts
+++ b/x-pack/plugins/ml/common/constants/locator.ts
@@ -15,8 +15,9 @@ export const ML_PAGES = {
   DATA_FRAME_ANALYTICS_SOURCE_SELECTION: 'data_frame_analytics/source_selection',
   DATA_FRAME_ANALYTICS_CREATE_JOB: 'data_frame_analytics/new_job',
   TRAINED_MODELS_MANAGE: 'trained_models',
-  DATA_COMPARISON_INDEX_SELECT: 'data_comparison_index_select',
-  DATA_COMPARISON: 'data_comparison',
+  DATA_DRIFT_INDEX_SELECT: 'data_drift_index_select',
+  DATA_DRIFT_CUSTOM: 'data_drift_custom',
+  DATA_DRIFT: 'data_drift',
   NODES: 'nodes',
   MEMORY_USAGE: 'memory_usage',
   DATA_FRAME_ANALYTICS_EXPLORATION: 'data_frame_analytics/exploration',
diff --git a/x-pack/plugins/ml/common/types/locator.ts b/x-pack/plugins/ml/common/types/locator.ts
index 31de127c5604..329ba59ba907 100644
--- a/x-pack/plugins/ml/common/types/locator.ts
+++ b/x-pack/plugins/ml/common/types/locator.ts
@@ -58,8 +58,9 @@ export type MlGenericUrlState = MLPageState<
   | typeof ML_PAGES.FILTER_LISTS_MANAGE
   | typeof ML_PAGES.FILTER_LISTS_NEW
   | typeof ML_PAGES.SETTINGS
-  | typeof ML_PAGES.DATA_COMPARISON
-  | typeof ML_PAGES.DATA_COMPARISON_INDEX_SELECT
+  | typeof ML_PAGES.DATA_DRIFT_CUSTOM
+  | typeof ML_PAGES.DATA_DRIFT_INDEX_SELECT
+  | typeof ML_PAGES.DATA_DRIFT
   | typeof ML_PAGES.DATA_VISUALIZER
   | typeof ML_PAGES.DATA_VISUALIZER_FILE
   | typeof ML_PAGES.DATA_VISUALIZER_INDEX_SELECT
diff --git a/x-pack/plugins/ml/common/types/trained_models.ts b/x-pack/plugins/ml/common/types/trained_models.ts
index 0b636b70071d..70f588712c35 100644
--- a/x-pack/plugins/ml/common/types/trained_models.ts
+++ b/x-pack/plugins/ml/common/types/trained_models.ts
@@ -11,6 +11,7 @@ import type {
   FeatureImportanceBaseline,
   TotalFeatureImportance,
 } from '@kbn/ml-data-frame-analytics-utils';
+import { IndexName, IndicesIndexState } from '@elastic/elasticsearch/lib/api/types';
 import type { XOR } from './common';
 import type { MlSavedObjectType } from './saved_objects';
 
@@ -110,6 +111,7 @@ export type TrainedModelConfigResponse = estypes.MlTrainedModelConfig & {
   tags: string[];
   version: string;
   inference_config?: Record<string, any>;
+  indices?: Array<Record<IndexName, IndicesIndexState | null>>;
 };
 
 export interface PipelineDefinition {
diff --git a/x-pack/plugins/ml/kibana.jsonc b/x-pack/plugins/ml/kibana.jsonc
index e2b327009f66..e3afdf35d0c4 100644
--- a/x-pack/plugins/ml/kibana.jsonc
+++ b/x-pack/plugins/ml/kibana.jsonc
@@ -13,6 +13,7 @@
       "charts",
       "cloud",
       "data",
+      "dataViewEditor",
       "dataViews",
       "dataVisualizer",
       "discover",
diff --git a/x-pack/plugins/ml/public/application/app.tsx b/x-pack/plugins/ml/public/application/app.tsx
index a5993f99e4a9..5acc519f242a 100644
--- a/x-pack/plugins/ml/public/application/app.tsx
+++ b/x-pack/plugins/ml/public/application/app.tsx
@@ -91,6 +91,7 @@ const App: FC<AppProps> = ({ coreStart, deps, appMountParams, isServerless }) =>
       embeddable: deps.embeddable,
       maps: deps.maps,
       triggersActionsUi: deps.triggersActionsUi,
+      dataViewEditor: deps.dataViewEditor,
       dataVisualizer: deps.dataVisualizer,
       usageCollection: deps.usageCollection,
       fieldFormats: deps.fieldFormats,
diff --git a/x-pack/plugins/ml/public/application/components/ml_page/side_nav.tsx b/x-pack/plugins/ml/public/application/components/ml_page/side_nav.tsx
index 94b58758135c..dda32fbaf8af 100644
--- a/x-pack/plugins/ml/public/application/components/ml_page/side_nav.tsx
+++ b/x-pack/plugins/ml/public/application/components/ml_page/side_nav.tsx
@@ -235,13 +235,13 @@ export function useSideNavItems(activeRoute: MlRoute | undefined) {
             testSubj: 'mlMainTab indexDataVisualizer',
           },
           {
-            id: 'data_comparison',
-            pathId: ML_PAGES.DATA_COMPARISON_INDEX_SELECT,
+            id: 'data_drift',
+            pathId: ML_PAGES.DATA_DRIFT_INDEX_SELECT,
             name: i18n.translate('xpack.ml.navMenu.dataComparisonText', {
-              defaultMessage: 'Data Comparison',
+              defaultMessage: 'Data Drift',
             }),
             disabled: disableLinks,
-            testSubj: 'mlMainTab dataComparison',
+            testSubj: 'mlMainTab dataDrift',
           },
         ],
       },
diff --git a/x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts b/x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts
index 852a8b869951..f9bd1fe2315b 100644
--- a/x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts
+++ b/x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts
@@ -29,11 +29,13 @@ import type { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-manag
 import type { ContentManagementPublicStart } from '@kbn/content-management-plugin/public';
 import type { SavedSearchPublicPluginStart } from '@kbn/saved-search-plugin/public';
 import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
+import { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import type { MlServicesContext } from '../../app';
 
 interface StartPlugins {
   data: DataPublicPluginStart;
   dataViews: DataViewsPublicPluginStart;
+  dataViewEditor: DataViewEditorStart;
   security?: SecurityPluginSetup;
   licenseManagement?: LicenseManagementUIPluginSetup;
   share: SharePluginStart;
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/controls.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/controls.tsx
index 74356242ae8a..1df5180934fc 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/controls.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/controls.tsx
@@ -171,6 +171,15 @@ export const Controls: FC<Props> = React.memo(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [share.url.locators, nodeLabel]);
 
+    const onAnalyzeDataDrift = useCallback(async () => {
+      closePopover();
+      const path = await mlLocator.getUrl({
+        page: ML_PAGES.DATA_DRIFT_CUSTOM,
+        pageState: { comparison: nodeLabel },
+      });
+      await navigateToPath(path);
+    }, [nodeLabel, navigateToPath, mlLocator]);
+
     const onCloneJobClick = useCallback(async () => {
       navigateToWizardWithClonedJob({ config: details[nodeId], stats: details[nodeId]?.stats });
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -263,6 +272,21 @@ export const Controls: FC<Props> = React.memo(
             </EuiContextMenuItem>,
           ]
         : []),
+      ...(nodeType === JOB_MAP_NODE_TYPES.INDEX
+        ? [
+            <EuiContextMenuItem
+              disabled={!canCreateDataFrameAnalytics}
+              key={`${nodeId}-drift-data`}
+              icon="visTagCloud"
+              onClick={onAnalyzeDataDrift}
+            >
+              <FormattedMessage
+                id="xpack.ml.dataframe.analyticsMap.flyout.analyzeDrift"
+                defaultMessage="Analyze data drift"
+              />
+            </EuiContextMenuItem>,
+          ]
+        : []),
       ...(nodeType === JOB_MAP_NODE_TYPES.INDEX
         ? [
             <EuiContextMenuItem
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_drift_index_patterns_editor.tsx b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_drift_index_patterns_editor.tsx
new file mode 100644
index 000000000000..76cf04142675
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_drift_index_patterns_editor.tsx
@@ -0,0 +1,436 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  EuiButton,
+  EuiCallOut,
+  EuiFlexItem,
+  EuiFieldText,
+  EuiFormRow,
+  EuiFlexGroup,
+  EuiComboBoxOptionOption,
+  EuiComboBox,
+  EuiSteps,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import useObservable from 'react-use/lib/useObservable';
+import { combineLatest, map, Observable } from 'rxjs';
+import { debounce, intersectionBy } from 'lodash';
+import { type DataViewEditorService } from '@kbn/data-view-editor-plugin/public';
+import { useToastNotificationService } from '../../services/toast_notification_service';
+import { ML_PAGES } from '../../../../common/constants/locator';
+import { useMlKibana, useMlLocator, useNavigateToPath } from '../../contexts/kibana';
+import { DataViewEditor } from './data_view_editor';
+
+export const matchedIndicesDefault = {
+  allIndices: [],
+  exactMatchedIndices: [],
+  partialMatchedIndices: [],
+  visibleIndices: [],
+};
+
+export interface TimestampOption {
+  display: string;
+  fieldName?: string;
+}
+
+export const canAppendWildcard = (keyPressed: string) => {
+  // If it's not a letter, number or is something longer, reject it
+  if (!keyPressed || !/[a-z0-9]/i.test(keyPressed) || keyPressed.length !== 1) {
+    return false;
+  }
+  return true;
+};
+
+type DataViewEditorServiceSpec = DataViewEditorService;
+const getDefaultIndexPattern = (referenceIndexPattern: string, comparisonIndexPattern: string) =>
+  referenceIndexPattern === comparisonIndexPattern
+    ? referenceIndexPattern
+    : `${referenceIndexPattern},${comparisonIndexPattern}`;
+
+export function DataDriftIndexPatternsEditor({
+  referenceDataViewEditorService,
+  comparisonDataViewEditorService,
+  initialReferenceIndexPattern,
+  initialComparisonIndexPattern,
+}: {
+  referenceDataViewEditorService: DataViewEditorServiceSpec;
+  comparisonDataViewEditorService: DataViewEditorServiceSpec;
+  initialReferenceIndexPattern?: string;
+  initialComparisonIndexPattern?: string;
+}) {
+  const {
+    services: {
+      dataViewEditor,
+      data: { dataViews },
+    },
+  } = useMlKibana();
+  const locator = useMlLocator()!;
+  const canEditDataView = dataViewEditor?.userPermissions.editDataView();
+  const [timeField, setTimeField] = useState<Array<EuiComboBoxOptionOption<string>>>([]);
+  const [dataViewName, setDataViewName] = useState<string>('');
+  const [dataViewMsg, setDataViewMsg] = useState<string | undefined>();
+  const [foundDataViewId, setFoundDataViewId] = useState<string | undefined>();
+  const [refError, setRefError] = useState<string | undefined>();
+  const [comparisonError, setComparisonError] = useState<string | undefined>();
+  const toastNotificationService = useToastNotificationService();
+
+  // For the purpose of data drift, the two datasets need to have the same common timestamp field if they exist
+  // In data view management, creating a data view provides union of all the timestamp fields
+  // Here, we need the intersection of two sets instead
+  const combinedTimeFieldOptions$: Observable<Array<EuiComboBoxOptionOption<string>>> =
+    useMemo(() => {
+      return combineLatest([
+        referenceDataViewEditorService?.timestampFieldOptions$,
+        comparisonDataViewEditorService?.timestampFieldOptions$,
+      ]).pipe(
+        map(([referenceTimeFieldOptions, productionTimeFieldOptions]) => {
+          const intersectedTimeFields = intersectionBy<TimestampOption, TimestampOption>(
+            referenceTimeFieldOptions,
+            productionTimeFieldOptions,
+            (d) => d.fieldName
+          ).map(({ display, fieldName }) => ({
+            label: display,
+            value: fieldName,
+          }));
+
+          return intersectedTimeFields;
+        })
+      );
+    }, [comparisonDataViewEditorService, referenceDataViewEditorService]);
+
+  const combinedTimeFieldOptions = useObservable(combinedTimeFieldOptions$, []);
+
+  const [referenceIndexPattern, setReferenceIndexPattern] = useState<string>(
+    initialReferenceIndexPattern ?? ''
+  );
+  const [comparisonIndexPattern, setComparisonIndexPattern] = useState<string>(
+    initialComparisonIndexPattern ?? ''
+  );
+
+  const navigateToPath = useNavigateToPath();
+  const abortCtrl = useRef(new AbortController());
+
+  useEffect(() => {
+    let unmounted = false;
+
+    if (
+      !unmounted &&
+      Array.isArray(combinedTimeFieldOptions) &&
+      combinedTimeFieldOptions.length > 0 &&
+      timeField.length === 0
+    ) {
+      setTimeField([combinedTimeFieldOptions[0]]);
+    }
+
+    return () => {
+      unmounted = true;
+    };
+  }, [combinedTimeFieldOptions, timeField]);
+
+  useEffect(
+    function validateMatchingDataViews() {
+      let unmounted = false;
+      const getMatchingDataView = async () => {
+        abortCtrl.current.abort();
+        abortCtrl.current = new AbortController();
+
+        setDataViewMsg(undefined);
+        setFoundDataViewId(undefined);
+        if (!unmounted && referenceIndexPattern && comparisonIndexPattern) {
+          const indicesName = getDefaultIndexPattern(referenceIndexPattern, comparisonIndexPattern);
+
+          const matchingDataViews = await dataViews.find(indicesName);
+
+          const timeFieldName =
+            Array.isArray(timeField) && timeField.length > 0 && timeField[0].value !== ''
+              ? timeField[0].value
+              : undefined;
+
+          if (Array.isArray(matchingDataViews) && matchingDataViews.length > 0) {
+            const foundDataView = matchingDataViews.find((d) => {
+              return d.timeFieldName === timeFieldName;
+            });
+
+            if (foundDataView) {
+              setFoundDataViewId(foundDataView.id);
+            } else {
+              setDataViewMsg(
+                i18n.translate(
+                  'xpack.ml.dataDrift.indexPatternsEditor.hasDataViewWithDifferentTimeField',
+                  {
+                    defaultMessage: `Found a data view matching pattern '{indexPattern}' but with a different time field. Creating a new data view to analyze data drift.`,
+                    values: { indexPattern: indicesName },
+                  }
+                )
+              );
+            }
+          }
+        }
+      };
+
+      getMatchingDataView();
+
+      return () => {
+        abortCtrl.current?.abort();
+        unmounted = true;
+      };
+    },
+    [referenceIndexPattern, comparisonIndexPattern, timeField, dataViews]
+  );
+  const createDataViewAndRedirectToDataDriftPage = debounce(async (createAdHocDV = false) => {
+    // Create adhoc data view
+    const indicesName = getDefaultIndexPattern(referenceIndexPattern, comparisonIndexPattern);
+
+    const timeFieldName =
+      Array.isArray(timeField) && timeField.length > 0 ? timeField[0].value : undefined;
+
+    let dataView;
+
+    try {
+      if (!foundDataViewId) {
+        const defaultDataViewName =
+          dataViewMsg === undefined
+            ? indicesName
+            : `${indicesName}${timeFieldName ? '-' + timeFieldName : ''}`;
+
+        const modifiedDataViewName = dataViewName === '' ? defaultDataViewName : dataViewName;
+        if (canEditDataView && createAdHocDV === false) {
+          dataView = await dataViews.createAndSave({
+            title: indicesName,
+            name: modifiedDataViewName,
+            timeFieldName,
+          });
+        } else {
+          dataView = await dataViews.create({
+            title: indicesName,
+            name: modifiedDataViewName,
+            timeFieldName,
+          });
+        }
+      }
+      const dataViewId = foundDataViewId ?? dataView?.id;
+      const url = await locator.getUrl({
+        page: ML_PAGES.DATA_DRIFT,
+        pageState: {
+          index: dataViewId,
+          reference: encodeURIComponent(referenceIndexPattern),
+          comparison: encodeURIComponent(comparisonIndexPattern),
+          timeFieldName,
+        },
+      });
+
+      await navigateToPath(url);
+    } catch (e) {
+      toastNotificationService.displayErrorToast(e);
+    }
+  }, 400);
+
+  const hasError =
+    refError !== undefined ||
+    comparisonError !== undefined ||
+    !comparisonIndexPattern ||
+    !referenceIndexPattern;
+
+  const firstSetOfSteps = [
+    {
+      title: i18n.translate('xpack.ml.dataDrift.indexPatternsEditor.enterReferenceDataTitle', {
+        defaultMessage: 'Enter index pattern for reference data',
+      }),
+      children: (
+        <EuiFlexItem grow={false}>
+          <DataViewEditor
+            key={'reference'}
+            label={
+              <FormattedMessage
+                id="xpack.ml.dataDrift.indexPatternsEditor.referenceData"
+                defaultMessage="Index pattern"
+              />
+            }
+            helpText={
+              <FormattedMessage
+                id="xpack.ml.dataDrift.indexPatternsEditor.requireSameTimeFieldHelpText"
+                defaultMessage="To view the changes in the data over time, reference and comparison data can have different index patterns, but they must have the same time field."
+              />
+            }
+            dataViewEditorService={referenceDataViewEditorService}
+            indexPattern={referenceIndexPattern}
+            setIndexPattern={setReferenceIndexPattern}
+            onError={setRefError}
+          />
+        </EuiFlexItem>
+      ),
+    },
+    {
+      title: i18n.translate('xpack.ml.dataDrift.indexPatternsEditor.enterComparisonDataTitle', {
+        defaultMessage: 'Enter index pattern for comparison data',
+      }),
+      children: (
+        <EuiFlexItem grow={false}>
+          <DataViewEditor
+            key={'comparison'}
+            label={
+              <FormattedMessage
+                id="xpack.ml.dataDrift.indexPatternsEditor.comparisonDataIndexPatternHelp"
+                defaultMessage="Index pattern"
+              />
+            }
+            helpText={
+              <FormattedMessage
+                id="xpack.ml.dataDrift.indexPatternsEditor.requireSameTimeFieldHelpText"
+                defaultMessage="To view the changes in the data over time, reference and comparison data can have different index patterns, but they must have the same time field."
+              />
+            }
+            dataViewEditorService={comparisonDataViewEditorService}
+            indexPattern={comparisonIndexPattern}
+            setIndexPattern={setComparisonIndexPattern}
+            onError={setComparisonError}
+          />
+        </EuiFlexItem>
+      ),
+    },
+    {
+      title: i18n.translate('xpack.ml.dataDrift.indexPatternsEditor.additionalSettingsTitle', {
+        defaultMessage: 'Additional settings',
+      }),
+      children: (
+        <EuiFlexGroup direction="column">
+          {combinedTimeFieldOptions.length > 0 ? (
+            <EuiFormRow
+              label={i18n.translate('xpack.ml.dataDrift.indexPatternsEditor.timestampFieldLabel', {
+                defaultMessage: 'Timestamp field',
+              })}
+              fullWidth
+              color={'disabled'}
+            >
+              <>
+                <EuiComboBox<string>
+                  placeholder={i18n.translate(
+                    'xpack.ml.dataDrift.indexPatternsEditor.timestampFieldOptions',
+                    {
+                      defaultMessage: 'Select an optional timestamp field',
+                    }
+                  )}
+                  singleSelection={{ asPlainText: true }}
+                  options={combinedTimeFieldOptions}
+                  selectedOptions={timeField}
+                  onChange={(newValue) => {
+                    if (newValue.length === 0) {
+                      // Don't allow clearing the type. One must always be selected
+                      return;
+                    }
+                    setTimeField(newValue);
+                  }}
+                  isClearable={false}
+                  isDisabled={comparisonIndexPattern === '' && referenceIndexPattern === ''}
+                  data-test-subj="timestampField"
+                  aria-label={i18n.translate(
+                    'xpack.ml.dataDrift.indexPatternsEditor.timestampSelectAriaLabel',
+                    {
+                      defaultMessage: 'Timestamp field',
+                    }
+                  )}
+                  fullWidth
+                />
+              </>
+            </EuiFormRow>
+          ) : null}
+          {!foundDataViewId ? (
+            <EuiFormRow
+              label={i18n.translate('xpack.ml.dataDrift.indexPatternsEditor.dataViewName', {
+                defaultMessage: 'Data view name',
+              })}
+              helpText={
+                i18n.translate('xpack.ml.dataDrift.indexPatternsEditor.dataViewHelpText', {
+                  defaultMessage: 'Optional data view name.',
+                }) +
+                (referenceIndexPattern && comparisonIndexPattern
+                  ? ` ${i18n.translate(
+                      'xpack.ml.dataDrift.indexPatternsEditor.defaultDataViewHelpText',
+                      {
+                        defaultMessage: 'Default to {fallbackDataViewName} if not set.',
+                        values: {
+                          fallbackDataViewName: getDefaultIndexPattern(
+                            referenceIndexPattern,
+                            comparisonIndexPattern
+                          ),
+                        },
+                      }
+                    )}`
+                  : '')
+              }
+              fullWidth
+            >
+              <EuiFieldText
+                value={dataViewName}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  setDataViewName(e.target.value);
+                }}
+                fullWidth
+                data-test-subj="dataDriftDataViewNameInput"
+              />
+            </EuiFormRow>
+          ) : null}
+
+          {dataViewMsg ? <EuiCallOut color="primary">{dataViewMsg}</EuiCallOut> : null}
+
+          <EuiFormRow id="analyzeDriftData">
+            <EuiFlexGroup>
+              {canEditDataView && foundDataViewId === undefined ? (
+                <EuiFlexItem>
+                  <EuiButton
+                    color="primary"
+                    disabled={hasError}
+                    onClick={createDataViewAndRedirectToDataDriftPage.bind(null, true)}
+                    iconType="visTagCloud"
+                    data-test-subj="analyzeDataDriftButton"
+                    aria-label={i18n.translate(
+                      'xpack.ml.dataDrift.indexPatternsEditor.analyzeDataDriftWithoutSavingLabel',
+                      {
+                        defaultMessage: 'Analyze data drift without saving',
+                      }
+                    )}
+                  >
+                    <FormattedMessage
+                      id="xpack.ml.dataDrift.indexPatternsEditor.analyzeDataDriftWithoutSavingLabel"
+                      defaultMessage="Analyze data drift without saving"
+                    />
+                  </EuiButton>
+                </EuiFlexItem>
+              ) : null}
+
+              <EuiFlexItem>
+                <EuiButton
+                  disabled={hasError}
+                  fill
+                  onClick={createDataViewAndRedirectToDataDriftPage.bind(null, false)}
+                  iconType="visTagCloud"
+                  data-test-subj="analyzeDataDriftButton"
+                  aria-label={i18n.translate(
+                    'xpack.ml.dataDrift.indexPatternsEditor.analyzeDataDriftLabel',
+                    {
+                      defaultMessage: 'Analyze data drift',
+                    }
+                  )}
+                >
+                  <FormattedMessage
+                    id="xpack.ml.dataDrift.indexPatternsEditor.analyzeDataDriftLabel"
+                    defaultMessage="Analyze data drift"
+                  />
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFormRow>
+        </EuiFlexGroup>
+      ),
+    },
+  ];
+
+  return <EuiSteps steps={firstSetOfSteps} />;
+}
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/data_comparison/data_comparison_page.tsx b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_drift_page.tsx
similarity index 69%
rename from x-pack/plugins/ml/public/application/datavisualizer/data_comparison/data_comparison_page.tsx
rename to x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_drift_page.tsx
index 8b016d17cc93..94aa60cb8147 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/data_comparison/data_comparison_page.tsx
+++ b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_drift_page.tsx
@@ -8,23 +8,23 @@
 import React, { FC, useEffect, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import type { DataComparisonSpec } from '@kbn/data-visualizer-plugin/public';
+import type { DataDriftSpec } from '@kbn/data-visualizer-plugin/public';
 import { useMlKibana } from '../../contexts/kibana';
 import { useDataSource } from '../../contexts/ml';
 import { MlPageHeader } from '../../components/page_header';
 import { TechnicalPreviewBadge } from '../../components/technical_preview_badge';
 
-export const DataComparisonPage: FC = () => {
+export const DataDriftPage: FC = () => {
   const {
     services: { dataVisualizer },
   } = useMlKibana();
 
-  const [DataComparisonView, setDataComparisonView] = useState<DataComparisonSpec | null>(null);
+  const [DataDriftView, setDataDriftView] = useState<DataDriftSpec | null>(null);
 
   useEffect(() => {
     if (dataVisualizer !== undefined) {
-      const { getDataComparisonComponent } = dataVisualizer;
-      getDataComparisonComponent().then(setDataComparisonView);
+      const { getDataDriftComponent } = dataVisualizer;
+      getDataDriftComponent().then(setDataDriftView);
     }
   }, [dataVisualizer]);
 
@@ -36,8 +36,8 @@ export const DataComparisonPage: FC = () => {
         <EuiFlexGroup responsive={false} wrap={false} alignItems={'center'} gutterSize={'m'}>
           <EuiFlexItem grow={false}>
             <FormattedMessage
-              id="xpack.ml.dataComparisonWithDocCount.pageHeader"
-              defaultMessage="Data comparison"
+              id="xpack.ml.dataDruiftWithDocCount.pageHeader"
+              defaultMessage="Data drift"
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -45,8 +45,8 @@ export const DataComparisonPage: FC = () => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </MlPageHeader>
-      {dataView && DataComparisonView ? (
-        <DataComparisonView dataView={dataView} savedSearch={savedSearch} />
+      {dataView && DataDriftView ? (
+        <DataDriftView dataView={dataView} savedSearch={savedSearch} />
       ) : null}
     </>
   );
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_view_editor.tsx b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_view_editor.tsx
new file mode 100644
index 000000000000..05a1aaa4ad85
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/data_view_editor.tsx
@@ -0,0 +1,190 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import useDebounce from 'react-use/lib/useDebounce';
+import useObservable from 'react-use/lib/useObservable';
+import React, { ChangeEvent, ReactNode, useMemo, useState, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import {
+  EuiBasicTable,
+  EuiCallOut,
+  EuiFieldText,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiFlexGrid,
+  useEuiTheme,
+} from '@elastic/eui';
+import type { DataViewEditorService } from '@kbn/data-view-editor-plugin/public';
+import type { MatchedItem } from '@kbn/data-views-plugin/public';
+import { useTableSettings } from '../../data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings';
+import { canAppendWildcard, matchedIndicesDefault } from './data_drift_index_patterns_editor';
+
+interface DataViewEditorProps {
+  label: ReactNode;
+  dataViewEditorService: DataViewEditorService;
+  indexPattern: string;
+  setIndexPattern: (ip: string) => void;
+  onError: (errorMsg?: string) => void;
+  helpText?: ReactNode;
+}
+
+const mustMatchError = i18n.translate(
+  'xpack.ml.dataDrift.indexPatternsEditor.createIndex.noMatch',
+  {
+    defaultMessage: 'Name must match one or more data streams, indices, or index aliases.',
+  }
+);
+
+export function DataViewEditor({
+  label,
+  dataViewEditorService,
+  indexPattern,
+  setIndexPattern,
+  onError,
+  helpText,
+}: DataViewEditorProps) {
+  useDebounce(
+    () => {
+      dataViewEditorService.setIndexPattern(indexPattern);
+    },
+    250,
+    [indexPattern]
+  );
+  const matchedIndices = useObservable(
+    dataViewEditorService.matchedIndices$,
+    matchedIndicesDefault
+  );
+
+  const matchedReferenceIndices =
+    indexPattern === '' || (indexPattern !== '' && matchedIndices.exactMatchedIndices.length === 0)
+      ? matchedIndices.allIndices
+      : matchedIndices.exactMatchedIndices;
+  const [appendedWildcard, setAppendedWildcard] = useState<boolean>(false);
+
+  const [pageState, updatePageState] = useState({
+    pageIndex: 0,
+    pageSize: 10,
+    sortField: 'name',
+    sortDirection: 'asc',
+  });
+
+  const { onTableChange, pagination } = useTableSettings<MatchedItem>(
+    matchedReferenceIndices.length,
+    pageState,
+    // @ts-expect-error callback will have all the 4 necessary params
+    updatePageState
+  );
+
+  const pageOfItems = useMemo(() => {
+    return matchedReferenceIndices.slice(
+      pagination.pageIndex * pagination.pageSize,
+      (pagination.pageIndex + 1) * pagination.pageSize
+    );
+  }, [pagination.pageSize, pagination.pageIndex, matchedReferenceIndices]);
+
+  const columns = [
+    {
+      field: 'name',
+      name: i18n.translate('xpack.ml.dataDrift.indexPatternsEditor.tableColShard', {
+        defaultMessage: 'Matched indices',
+      }),
+      sortable: false,
+      truncateText: false,
+    },
+  ];
+  const errorMessage = useMemo(() => {
+    if (indexPattern === '')
+      return i18n.translate('xpack.ml.dataDrift.indexPatternsEditor.error.noEmptyIndexPattern', {
+        defaultMessage: 'Index pattern must not be empty.',
+      });
+    if (indexPattern !== '' && matchedIndices.exactMatchedIndices.length === 0) {
+      return mustMatchError;
+    }
+    return undefined;
+  }, [indexPattern, matchedIndices.exactMatchedIndices.length]);
+
+  useEffect(() => {
+    if (onError) {
+      onError(errorMessage);
+    }
+  }, [onError, errorMessage]);
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGrid columns={2} gutterSize="none">
+      <EuiFlexItem
+        css={{
+          paddingLeft: euiTheme.size.base,
+          paddingRight: euiTheme.size.base,
+          borderRight: euiTheme.border.thin,
+        }}
+      >
+        <EuiFormRow
+          label={label}
+          error={errorMessage}
+          isInvalid={errorMessage !== undefined}
+          fullWidth
+          helpText={helpText}
+        >
+          <EuiFieldText
+            value={indexPattern}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              let query = e.target.value;
+              if (query.length === 1 && !appendedWildcard && canAppendWildcard(query)) {
+                query += '*';
+                setAppendedWildcard(true);
+                setTimeout(() => e.target.setSelectionRange(1, 1));
+              } else {
+                if (['', '*'].includes(query) && appendedWildcard) {
+                  query = '';
+                  setAppendedWildcard(false);
+                }
+              }
+              setIndexPattern(query);
+            }}
+            fullWidth
+            data-test-subj="createIndexPatternTitleInput"
+            placeholder="example-pattern*"
+          />
+        </EuiFormRow>
+      </EuiFlexItem>
+      <EuiFlexItem css={{ paddingLeft: euiTheme.size.base, paddingRight: euiTheme.size.base }}>
+        {errorMessage === mustMatchError ? (
+          <EuiCallOut color="warning">
+            <FormattedMessage
+              id="xpack.ml.dataDrift.indexPatternsEditor.notMatchDetail"
+              defaultMessage="The index pattern you entered doesn't match any data streams, indices, or index aliases.
+         You can match {strongIndices}."
+              values={{
+                strongIndices: (
+                  <strong>
+                    <FormattedMessage
+                      id="xpack.ml.dataDrift.indexPatternsEditor.allIndicesLabel"
+                      defaultMessage="{indicesLength, plural,
+                one {# source}
+                other {# sources}
+              }"
+                      values={{ indicesLength: matchedIndices.allIndices.length }}
+                    />
+                  </strong>
+                ),
+              }}
+            />
+          </EuiCallOut>
+        ) : null}
+        <EuiBasicTable<MatchedItem>
+          items={pageOfItems}
+          columns={columns}
+          pagination={pagination}
+          onChange={onTableChange}
+        />
+      </EuiFlexItem>
+    </EuiFlexGrid>
+  );
+}
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/data_drift/index_patterns_picker.tsx b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/index_patterns_picker.tsx
new file mode 100644
index 000000000000..1f414d822457
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/datavisualizer/data_drift/index_patterns_picker.tsx
@@ -0,0 +1,205 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, useEffect, useState, useMemo } from 'react';
+import { EuiPageBody, EuiPageSection, EuiButton, EuiPanel } from '@elastic/eui';
+import { parse } from 'query-string';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { SavedObjectFinder } from '@kbn/saved-objects-finder-plugin/public';
+import { type DataViewEditorService as DataViewEditorServiceSpec } from '@kbn/data-view-editor-plugin/public';
+import { INDEX_PATTERN_TYPE } from '@kbn/data-views-plugin/public';
+import { createPath } from '../../routing/router';
+import { ML_PAGES } from '../../../../common/constants/locator';
+import { DataDriftIndexPatternsEditor } from './data_drift_index_patterns_editor';
+
+import { MlPageHeader } from '../../components/page_header';
+import { useMlKibana, useNavigateToPath } from '../../contexts/kibana';
+export const DataDriftIndexOrSearchRedirect: FC = () => {
+  const navigateToPath = useNavigateToPath();
+  const { contentManagement, uiSettings } = useMlKibana().services;
+  const {
+    services: { dataViewEditor },
+  } = useMlKibana();
+
+  const nextStepPath = '/data_drift';
+  const onObjectSelection = (id: string, type: string) => {
+    navigateToPath(
+      `${nextStepPath}?${type === 'index-pattern' ? 'index' : 'savedSearchId'}=${encodeURIComponent(
+        id
+      )}`
+    );
+  };
+
+  const canEditDataView = dataViewEditor?.userPermissions.editDataView();
+
+  return (
+    <div data-test-subj="mlPageSourceSelection">
+      <EuiPageBody restrictWidth={1200}>
+        <MlPageHeader>
+          <FormattedMessage
+            id="xpack.ml.newJob.wizard.selectDataViewOrSavedSearch"
+            defaultMessage="Select data view or saved search"
+          />
+        </MlPageHeader>
+        <EuiPanel hasShadow={false} hasBorder>
+          <SavedObjectFinder
+            key="searchSavedObjectFinder"
+            onChoose={onObjectSelection}
+            showFilter
+            noItemsMessage={i18n.translate('xpack.ml.newJob.wizard.searchSelection.notFoundLabel', {
+              defaultMessage: 'No matching data views or saved searches found.',
+            })}
+            savedObjectMetaData={[
+              {
+                type: 'search',
+                getIconForSavedObject: () => 'search',
+                name: i18n.translate(
+                  'xpack.ml.newJob.wizard.searchSelection.savedObjectType.search',
+                  {
+                    defaultMessage: 'Saved search',
+                  }
+                ),
+              },
+              {
+                type: 'index-pattern',
+                getIconForSavedObject: () => 'indexPatternApp',
+                name: i18n.translate(
+                  'xpack.ml.newJob.wizard.searchSelection.savedObjectType.dataView',
+                  {
+                    defaultMessage: 'Data view',
+                  }
+                ),
+              },
+            ]}
+            fixedPageSize={20}
+            services={{
+              contentClient: contentManagement.client,
+              uiSettings,
+            }}
+          >
+            <EuiButton
+              size="m"
+              fill
+              iconType="plusInCircleFilled"
+              onClick={() => navigateToPath(createPath(ML_PAGES.DATA_DRIFT_CUSTOM))}
+              disabled={!canEditDataView}
+            >
+              <FormattedMessage
+                id="xpack.ml.dataDrift.createDataViewButton"
+                defaultMessage="Create a data view"
+              />
+            </EuiButton>
+          </SavedObjectFinder>
+        </EuiPanel>
+      </EuiPageBody>
+    </div>
+  );
+};
+
+export const DataDriftIndexPatternsPicker: FC = () => {
+  const { reference, comparison } = parse(location.search, {
+    sort: false,
+  }) as { reference: string; comparison: string };
+
+  const [dataViewEditorServices, setDataViewEditorServices] = useState<
+    | {
+        referenceDataViewEditorService: DataViewEditorServiceSpec;
+        comparisonDataViewEditorService: DataViewEditorServiceSpec;
+      }
+    | undefined
+  >();
+
+  const {
+    services: {
+      dataViewEditor,
+      http,
+      data: { dataViews },
+    },
+  } = useMlKibana();
+  const { dataViewEditorServiceFactory } = dataViewEditor;
+
+  const initialComparisonIndexPattern = useMemo(
+    () => (comparison ? comparison.replaceAll(`'`, '') : ''),
+    [comparison]
+  );
+  const initialReferenceIndexPattern = useMemo(
+    () => (reference ? reference.replaceAll(`'`, '') : ''),
+    [reference]
+  );
+
+  useEffect(() => {
+    let unmounted = false;
+    const getDataViewEditorService = async () => {
+      if (http && dataViews && dataViewEditorServiceFactory) {
+        const { DataViewEditorService } = await dataViewEditorServiceFactory();
+        const referenceDataViewEditorService = new DataViewEditorService({
+          // @ts-expect-error Mismatch in DataViewsServicePublic import, but should be same
+          services: { http, dataViews },
+          initialValues: {
+            name: '',
+            type: INDEX_PATTERN_TYPE.DEFAULT,
+            indexPattern: initialReferenceIndexPattern,
+          },
+          requireTimestampField: false,
+        });
+        const comparisonDataViewEditorService = new DataViewEditorService({
+          // @ts-expect-error Mismatch in DataViewsServicePublic import, but should be same
+          services: { http, dataViews },
+          initialValues: {
+            name: '',
+            type: INDEX_PATTERN_TYPE.DEFAULT,
+            indexPattern: initialComparisonIndexPattern,
+          },
+          requireTimestampField: false,
+        });
+        if (!unmounted) {
+          setDataViewEditorServices({
+            referenceDataViewEditorService,
+            comparisonDataViewEditorService,
+          });
+        }
+      }
+    };
+    getDataViewEditorService();
+
+    return () => {
+      unmounted = true;
+    };
+  }, [
+    dataViewEditorServiceFactory,
+    http,
+    dataViews,
+    initialReferenceIndexPattern,
+    initialComparisonIndexPattern,
+  ]);
+
+  return (
+    <div data-test-subj="mlPageSourceSelection">
+      <EuiPageBody restrictWidth={1200}>
+        <MlPageHeader>
+          <FormattedMessage
+            id="xpack.ml.dataDrift.createDataDriftDataViewTitle"
+            defaultMessage="Create data view and analyze data drift"
+          />
+        </MlPageHeader>
+        <EuiPageSection>
+          {dataViewEditorServices ? (
+            <DataDriftIndexPatternsEditor
+              initialComparisonIndexPattern={initialComparisonIndexPattern}
+              initialReferenceIndexPattern={initialReferenceIndexPattern}
+              referenceDataViewEditorService={dataViewEditorServices.referenceDataViewEditorService}
+              comparisonDataViewEditorService={
+                dataViewEditorServices.comparisonDataViewEditorService
+              }
+            />
+          ) : null}
+        </EuiPageSection>
+      </EuiPageBody>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/index_or_search/page.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/index_or_search/page.tsx
index d9c0200961ca..c4b81907e52b 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/index_or_search/page.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/index_or_search/page.tsx
@@ -17,8 +17,9 @@ export interface PageProps {
   nextStepPath: string;
 }
 
+const RESULTS_PER_PAGE = 20;
+
 export const Page: FC<PageProps> = ({ nextStepPath }) => {
-  const RESULTS_PER_PAGE = 20;
   const { contentManagement, uiSettings } = useMlKibana().services;
   const navigateToPath = useNavigateToPath();
 
diff --git a/x-pack/plugins/ml/public/application/model_management/model_actions.tsx b/x-pack/plugins/ml/public/application/model_management/model_actions.tsx
index c276dbc8ea92..f10ba782ee9d 100644
--- a/x-pack/plugins/ml/public/application/model_management/model_actions.tsx
+++ b/x-pack/plugins/ml/public/application/model_management/model_actions.tsx
@@ -540,6 +540,40 @@ export function useModelActions({
           return canTestTrainedModels && isTestable(item, true) && !isLoading;
         },
       },
+      {
+        name: i18n.translate('xpack.ml.inference.modelsList.analyzeDataDriftLabel', {
+          defaultMessage: 'Analyze data drift',
+        }),
+        description: i18n.translate('xpack.ml.inference.modelsList.analyzeDataDriftLabel', {
+          defaultMessage: 'Analyze data drift',
+        }),
+        'data-test-subj': 'mlModelsAnalyzeDataDriftAction',
+        icon: 'visTagCloud',
+        type: 'icon',
+        isPrimary: true,
+        available: (item) => {
+          return (
+            item?.metadata?.analytics_config !== undefined ||
+            (Array.isArray(item.indices) && item.indices.length > 0)
+          );
+        },
+        onClick: async (item) => {
+          let indexPatterns: string[] | undefined = item?.indices
+            ?.map((o) => Object.keys(o))
+            .flat();
+
+          if (item?.metadata?.analytics_config?.dest?.index !== undefined) {
+            const destIndex = item.metadata.analytics_config.dest?.index;
+            indexPatterns = [destIndex];
+          }
+          const path = await urlLocator.getUrl({
+            page: ML_PAGES.DATA_DRIFT_CUSTOM,
+            pageState: indexPatterns ? { comparison: indexPatterns.join(',') } : {},
+          });
+
+          await navigateToPath(path, false);
+        },
+      },
     ],
     [
       urlLocator,
diff --git a/x-pack/plugins/ml/public/application/model_management/models_list.tsx b/x-pack/plugins/ml/public/application/model_management/models_list.tsx
index 5ddcc2096b91..1ce6fa18fbc3 100644
--- a/x-pack/plugins/ml/public/application/model_management/models_list.tsx
+++ b/x-pack/plugins/ml/public/application/model_management/models_list.tsx
@@ -187,6 +187,7 @@ export const ModelsList: FC<Props> = ({
     try {
       const response = await trainedModelsApiService.getTrainedModels(undefined, {
         with_pipelines: true,
+        with_indices: true,
       });
 
       const newItems: ModelItem[] = [];
diff --git a/x-pack/plugins/ml/public/application/routing/breadcrumbs.ts b/x-pack/plugins/ml/public/application/routing/breadcrumbs.ts
index 2824b835f914..bbb80e11fbe8 100644
--- a/x-pack/plugins/ml/public/application/routing/breadcrumbs.ts
+++ b/x-pack/plugins/ml/public/application/routing/breadcrumbs.ts
@@ -120,11 +120,11 @@ export const FILTER_LISTS_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   href: '/settings/filter_lists',
 });
 
-export const DATA_COMPARISON_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
+export const DATA_DRIFT_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.settings.breadcrumbs.dataComparisonLabel', {
-    defaultMessage: 'Data comparison',
+    defaultMessage: 'Data drift',
   }),
-  href: '/data_comparison_index_select',
+  href: '/data_drift_index_select',
 });
 
 const breadcrumbs = {
@@ -133,7 +133,7 @@ const breadcrumbs = {
   ANOMALY_DETECTION_BREADCRUMB,
   DATA_FRAME_ANALYTICS_BREADCRUMB,
   TRAINED_MODELS,
-  DATA_COMPARISON_BREADCRUMB,
+  DATA_DRIFT_BREADCRUMB,
   DATA_VISUALIZER_BREADCRUMB,
   AIOPS_BREADCRUMB_LOG_RATE_ANALYSIS,
   AIOPS_BREADCRUMB_LOG_PATTERN_ANALYSIS,
diff --git a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_comparison.tsx b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_comparison.tsx
index 46f58318c1b9..5a79c13fc392 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_comparison.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_comparison.tsx
@@ -7,28 +7,28 @@
 
 import React, { FC } from 'react';
 import { i18n } from '@kbn/i18n';
+import { DataDriftPage } from '../../../datavisualizer/data_drift/data_drift_page';
 import { DataSourceContextProvider } from '../../../contexts/ml';
-import { DataComparisonPage } from '../../../datavisualizer/data_comparison/data_comparison_page';
 import { ML_PAGES } from '../../../../locator';
 import { NavigateToPath } from '../../../contexts/kibana';
 import { createPath, MlRoute, PageLoader, PageProps } from '../../router';
 import { useRouteResolver } from '../../use_resolver';
 import {
   breadcrumbOnClickFactory,
-  DATA_COMPARISON_BREADCRUMB,
+  DATA_DRIFT_BREADCRUMB,
   DATA_VISUALIZER_BREADCRUMB,
   getBreadcrumbWithUrlForApp,
 } from '../../breadcrumbs';
 import { basicResolvers } from '../../resolvers';
 
-export const dataComparisonRouteFactory = (
+export const dataDriftRouteFactory = (
   navigateToPath: NavigateToPath,
   basePath: string
 ): MlRoute => ({
-  id: 'data_comparison',
-  path: createPath(ML_PAGES.DATA_COMPARISON),
-  title: i18n.translate('xpack.ml.dataVisualizer.dataComparison.docTitle', {
-    defaultMessage: 'Data Comparison',
+  id: 'data_drift',
+  path: createPath(ML_PAGES.DATA_DRIFT),
+  title: i18n.translate('xpack.ml.dataVisualizer.dataDrift.docTitle', {
+    defaultMessage: 'Data Drift',
   }),
   render: (props, deps) => <PageWrapper {...props} deps={deps} />,
   breadcrumbs: [
@@ -37,18 +37,18 @@ export const dataComparisonRouteFactory = (
       text: DATA_VISUALIZER_BREADCRUMB.text,
       ...(navigateToPath
         ? {
-            href: `${basePath}/app/ml${DATA_COMPARISON_BREADCRUMB.href}`,
-            onClick: breadcrumbOnClickFactory(DATA_COMPARISON_BREADCRUMB.href, navigateToPath),
+            href: `${basePath}/app/ml${DATA_DRIFT_BREADCRUMB.href}`,
+            onClick: breadcrumbOnClickFactory(DATA_DRIFT_BREADCRUMB.href, navigateToPath),
           }
         : {}),
     },
     {
-      text: i18n.translate('xpack.ml.trainedModelsBreadcrumbs.dataComparisonLabel', {
-        defaultMessage: 'Data Comparison',
+      text: i18n.translate('xpack.ml.trainedModelsBreadcrumbs.dataDriftLabel', {
+        defaultMessage: 'Data Drift',
       }),
     },
   ],
-  'data-test-subj': 'mlPageDataComparison',
+  'data-test-subj': 'mlPageDataDrift',
 });
 
 const PageWrapper: FC<PageProps> = () => {
@@ -57,7 +57,7 @@ const PageWrapper: FC<PageProps> = () => {
   return (
     <PageLoader context={context}>
       <DataSourceContextProvider>
-        <DataComparisonPage />
+        <DataDriftPage />
       </DataSourceContextProvider>
     </PageLoader>
   );
diff --git a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_drift.tsx b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_drift.tsx
new file mode 100644
index 000000000000..df2d9adee8f3
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/data_drift.tsx
@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import React, { FC } from 'react';
+import {
+  DataDriftIndexOrSearchRedirect,
+  DataDriftIndexPatternsPicker,
+} from '../../../datavisualizer/data_drift/index_patterns_picker';
+import { NavigateToPath } from '../../../contexts/kibana';
+import { MlRoute } from '../..';
+import { createPath, PageLoader, PageProps } from '../../router';
+import { ML_PAGES } from '../../../../../common/constants/locator';
+import {
+  breadcrumbOnClickFactory,
+  DATA_DRIFT_BREADCRUMB,
+  DATA_VISUALIZER_BREADCRUMB,
+  getBreadcrumbWithUrlForApp,
+} from '../../breadcrumbs';
+import { useRouteResolver } from '../../use_resolver';
+import { basicResolvers } from '../../resolvers';
+import { DataSourceContextProvider } from '../../../contexts/ml';
+
+export const dataDriftRouteIndexOrSearchFactory = (
+  navigateToPath: NavigateToPath,
+  basePath: string
+): MlRoute => ({
+  id: 'data_drift',
+  path: createPath(ML_PAGES.DATA_DRIFT_INDEX_SELECT),
+  title: i18n.translate('xpack.ml.dataVisualizer.dataDrift.docTitle', {
+    defaultMessage: 'Data Drift',
+  }),
+  render: (props, deps) => (
+    <PageWrapper {...props} deps={deps} mode={ML_PAGES.DATA_DRIFT_INDEX_SELECT} />
+  ),
+  breadcrumbs: [
+    getBreadcrumbWithUrlForApp('ML_BREADCRUMB', navigateToPath, basePath),
+    {
+      text: DATA_VISUALIZER_BREADCRUMB.text,
+      ...(navigateToPath
+        ? {
+            href: `${basePath}/app/ml${DATA_DRIFT_BREADCRUMB.href}`,
+            onClick: breadcrumbOnClickFactory(DATA_DRIFT_BREADCRUMB.href, navigateToPath),
+          }
+        : {}),
+    },
+    {
+      text: i18n.translate('xpack.ml.trainedModelsBreadcrumbs.dataDriftLabel', {
+        defaultMessage: 'Data Drift',
+      }),
+    },
+  ],
+  'data-test-subj': 'mlPageDataDrift',
+});
+
+export const dataDriftRouteIndexPatternFactory = (
+  navigateToPath: NavigateToPath,
+  basePath: string
+): MlRoute => ({
+  id: 'data_drift',
+  path: createPath(ML_PAGES.DATA_DRIFT_CUSTOM),
+  title: i18n.translate('xpack.ml.dataVisualizer.dataDriftCustomIndexPatterns.docTitle', {
+    defaultMessage: 'Data Drift Custom Index Patterns',
+  }),
+  render: (props, deps) => <PageWrapper {...props} deps={deps} mode={ML_PAGES.DATA_DRIFT_CUSTOM} />,
+  breadcrumbs: [
+    getBreadcrumbWithUrlForApp('ML_BREADCRUMB', navigateToPath, basePath),
+    {
+      text: DATA_VISUALIZER_BREADCRUMB.text,
+      ...(navigateToPath
+        ? {
+            href: `${basePath}/app/ml${DATA_DRIFT_BREADCRUMB.href}`,
+            onClick: breadcrumbOnClickFactory(DATA_DRIFT_BREADCRUMB.href, navigateToPath),
+          }
+        : {}),
+    },
+    {
+      text: i18n.translate('xpack.ml.trainedModelsBreadcrumbs.dataDriftLabel', {
+        defaultMessage: 'Data Drift',
+      }),
+    },
+  ],
+  'data-test-subj': 'mlPageDataDriftCustomIndexPatterns',
+});
+
+interface DataDriftPageProps extends PageProps {
+  mode: 'data_drift_index_select' | 'data_drift_custom';
+}
+const PageWrapper: FC<DataDriftPageProps> = ({ mode }) => {
+  const { context } = useRouteResolver('full', [], basicResolvers());
+
+  return (
+    <PageLoader context={context}>
+      <DataSourceContextProvider>
+        {mode === ML_PAGES.DATA_DRIFT_INDEX_SELECT ? (
+          <DataDriftIndexOrSearchRedirect />
+        ) : (
+          <DataDriftIndexPatternsPicker />
+        )}
+      </DataSourceContextProvider>
+    </PageLoader>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/index.ts b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/index.ts
index 560a26007f20..c469f6412d59 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/index.ts
+++ b/x-pack/plugins/ml/public/application/routing/routes/datavisualizer/index.ts
@@ -6,5 +6,6 @@
  */
 
 export * from './datavisualizer';
+export * from './data_drift';
 export * from './index_based';
 export * from './file_based';
diff --git a/x-pack/plugins/ml/public/application/routing/routes/new_job/index_or_search.tsx b/x-pack/plugins/ml/public/application/routing/routes/new_job/index_or_search.tsx
index cb12cd22ab6c..24976cffc43d 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/new_job/index_or_search.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/new_job/index_or_search.tsx
@@ -185,26 +185,6 @@ export const changePointDetectionIndexOrSearchRouteFactory = (
   breadcrumbs: getChangePointDetectionBreadcrumbs(navigateToPath, basePath),
 });
 
-export const dataComparisonIndexOrSearchRouteFactory = (
-  navigateToPath: NavigateToPath,
-  basePath: string
-): MlRoute => ({
-  id: 'data_view_data_comparison',
-  path: createPath(ML_PAGES.DATA_COMPARISON_INDEX_SELECT),
-  title: i18n.translate('xpack.ml.selectDataViewLabel', {
-    defaultMessage: 'Select Data View',
-  }),
-  render: (props, deps) => (
-    <PageWrapper
-      {...props}
-      nextStepPath={createPath(ML_PAGES.DATA_COMPARISON)}
-      deps={deps}
-      mode={MODE.NEW_JOB}
-    />
-  ),
-  breadcrumbs: getDataVisBreadcrumbs(navigateToPath, basePath),
-});
-
 const PageWrapper: FC<IndexOrSearchPageProps> = ({ nextStepPath, mode }) => {
   const {
     services: {
diff --git a/x-pack/plugins/ml/public/application/services/ml_api_service/trained_models.ts b/x-pack/plugins/ml/public/application/services/ml_api_service/trained_models.ts
index c10867af0011..e723da6c16d4 100644
--- a/x-pack/plugins/ml/public/application/services/ml_api_service/trained_models.ts
+++ b/x-pack/plugins/ml/public/application/services/ml_api_service/trained_models.ts
@@ -32,6 +32,7 @@ export interface InferenceQueryParams {
   tags?: string;
   // Custom kibana endpoint query params
   with_pipelines?: boolean;
+  with_indices?: boolean;
   include?: 'total_feature_importance' | 'feature_importance_baseline' | string;
 }
 
diff --git a/x-pack/plugins/ml/public/locator/ml_locator.ts b/x-pack/plugins/ml/public/locator/ml_locator.ts
index 6008741860d6..e397778315a6 100644
--- a/x-pack/plugins/ml/public/locator/ml_locator.ts
+++ b/x-pack/plugins/ml/public/locator/ml_locator.ts
@@ -77,8 +77,9 @@ export class MlLocatorDefinition implements LocatorDefinition<MlLocatorParams> {
       case ML_PAGES.MEMORY_USAGE:
         path = formatMemoryUsageUrl('', params.pageState);
         break;
-      case ML_PAGES.DATA_COMPARISON_INDEX_SELECT:
-      case ML_PAGES.DATA_COMPARISON:
+      case ML_PAGES.DATA_DRIFT_INDEX_SELECT:
+      case ML_PAGES.DATA_DRIFT_CUSTOM:
+      case ML_PAGES.DATA_DRIFT:
       case ML_PAGES.ANOMALY_DETECTION_CREATE_JOB:
       case ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_RECOGNIZER:
       case ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_ADVANCED:
diff --git a/x-pack/plugins/ml/public/plugin.ts b/x-pack/plugins/ml/public/plugin.ts
index 4eae00a53d40..140ac875ed8f 100644
--- a/x-pack/plugins/ml/public/plugin.ts
+++ b/x-pack/plugins/ml/public/plugin.ts
@@ -48,6 +48,7 @@ import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
 import type { CasesUiSetup, CasesUiStart } from '@kbn/cases-plugin/public';
 import type { SavedSearchPublicPluginStart } from '@kbn/saved-search-plugin/public';
 import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
+import type { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import {
   getMlSharedServices,
   MlSharedServices,
@@ -61,6 +62,7 @@ import { ML_APP_ROUTE, PLUGIN_ICON_SOLUTION, PLUGIN_ID } from '../common/constan
 import type { MlCapabilities } from './shared';
 
 export interface MlStartDependencies {
+  dataViewEditor: DataViewEditorStart;
   data: DataPublicPluginStart;
   unifiedSearch: UnifiedSearchPublicPluginStart;
   licensing: LicensingPluginStart;
@@ -137,6 +139,7 @@ export class MlPlugin implements Plugin<MlPluginSetup, MlPluginStart> {
           {
             charts: pluginsStart.charts,
             data: pluginsStart.data,
+            dataViewEditor: pluginsStart.dataViewEditor,
             unifiedSearch: pluginsStart.unifiedSearch,
             dashboard: pluginsStart.dashboard,
             share: pluginsStart.share,
diff --git a/x-pack/plugins/ml/public/register_helper/register_search_links/search_deep_links.ts b/x-pack/plugins/ml/public/register_helper/register_search_links/search_deep_links.ts
index f9bdd2b50e4a..9b9642a8a982 100644
--- a/x-pack/plugins/ml/public/register_helper/register_search_links/search_deep_links.ts
+++ b/x-pack/plugins/ml/public/register_helper/register_search_links/search_deep_links.ts
@@ -265,11 +265,11 @@ function createDeepLinks(
 
     getDataComparisonDeepLink: (): AppDeepLink<LinkId> => {
       return {
-        id: 'dataComparison',
-        title: i18n.translate('xpack.ml.deepLink.dataComparison', {
-          defaultMessage: 'Data Comparison',
+        id: 'dataDrift',
+        title: i18n.translate('xpack.ml.deepLink.dataDrift', {
+          defaultMessage: 'Data Drift',
         }),
-        path: `/${ML_PAGES.DATA_COMPARISON_INDEX_SELECT}`,
+        path: `/${ML_PAGES.DATA_DRIFT_INDEX_SELECT}`,
         navLinkStatus: getNavStatus(true),
       };
     },
diff --git a/x-pack/plugins/ml/server/models/data_frame_analytics/analytics_manager.ts b/x-pack/plugins/ml/server/models/data_frame_analytics/analytics_manager.ts
index 4f1796782a6a..bee696f02de8 100644
--- a/x-pack/plugins/ml/server/models/data_frame_analytics/analytics_manager.ts
+++ b/x-pack/plugins/ml/server/models/data_frame_analytics/analytics_manager.ts
@@ -18,9 +18,8 @@ import {
   type AnalyticsMapNodeElement,
   type MapElements,
 } from '@kbn/ml-data-frame-analytics-utils';
-import type { TransformGetTransformTransformSummary } from '@elastic/elasticsearch/lib/api/types';
-import { flatten } from 'lodash';
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
+import type { ModelService } from '../model_management/models_provider';
 import { modelsProvider } from '../model_management';
 import {
   type ExtendAnalyticsMapArgs,
@@ -43,13 +42,15 @@ import { DEFAULT_TRAINED_MODELS_PAGE_SIZE } from '../../routes/trained_models';
 export class AnalyticsManager {
   private _trainedModels: estypes.MlTrainedModelConfig[] = [];
   private _jobs: estypes.MlDataframeAnalyticsSummary[] = [];
-  private _transforms?: TransformGetTransformTransformSummary[];
+  private _modelsProvider: ModelService;
 
   constructor(
     private readonly _mlClient: MlClient,
     private readonly _client: IScopedClusterClient,
     private readonly _enabledFeatures: MlFeatures
-  ) {}
+  ) {
+    this._modelsProvider = modelsProvider(this._client);
+  }
 
   private async initData() {
     const [models, jobs] = await Promise.all([
@@ -64,30 +65,6 @@ export class AnalyticsManager {
     this._jobs = jobs.data_frame_analytics;
   }
 
-  private async initTransformData() {
-    if (!this._transforms) {
-      try {
-        const body = await this._client.asCurrentUser.transform.getTransform({
-          size: 1000,
-        });
-        this._transforms = body.transforms;
-        return body.transforms;
-      } catch (e) {
-        if (e.meta?.statusCode !== 403) {
-          // eslint-disable-next-line no-console
-          console.error(e);
-        }
-      }
-    }
-  }
-
-  private getNodeId(
-    elementOriginalId: string,
-    nodeType: typeof JOB_MAP_NODE_TYPES[keyof typeof JOB_MAP_NODE_TYPES]
-  ): string {
-    return `${elementOriginalId}-${nodeType}`;
-  }
-
   private isDuplicateElement(analyticsId: string, elements: MapElements[]): boolean {
     let isDuplicate = false;
     elements.forEach((elem) => {
@@ -608,8 +585,12 @@ export class AnalyticsManager {
       }
 
       if (modelId && model) {
-        // First, find information about the trained model
-        result.elements.push({
+        const pipelinesAndIndicesResults =
+          await this._modelsProvider.getModelsPipelinesAndIndicesMap(modelId, {
+            withIndices: true,
+          });
+        // Adding information about the trained model
+        pipelinesAndIndicesResults.elements.push({
           data: {
             id: modelNodeId,
             label: modelId,
@@ -617,182 +598,9 @@ export class AnalyticsManager {
             isRoot: true,
           },
         });
-        result.details[modelNodeId] = model;
-
-        let pipelinesResponse;
-        let indicesSettings;
-        try {
-          // Then, find the pipelines that have the trained model set as index.default_pipelines
-          pipelinesResponse = await modelsProvider(this._client).getModelsPipelines([modelId]);
-        } catch (e) {
-          // Possible that the user doesn't have permissions to view ingest pipelines
-          // If so, gracefully exit
-          if (e.meta?.statusCode !== 403) {
-            // eslint-disable-next-line no-console
-            console.error(e);
-          }
-
-          return result;
-        }
-
-        const pipelines = pipelinesResponse?.get(modelId);
-
-        if (pipelines) {
-          const pipelineIds = new Set(Object.keys(pipelines));
-          for (const pipelineId of pipelineIds) {
-            const pipelineNodeId = `${pipelineId}-${JOB_MAP_NODE_TYPES.INGEST_PIPELINE}`;
-            result.details[pipelineNodeId] = pipelines[pipelineId];
+        pipelinesAndIndicesResults.details[modelNodeId] = model;
 
-            result.elements.push({
-              data: {
-                id: pipelineNodeId,
-                label: pipelineId,
-                type: JOB_MAP_NODE_TYPES.INGEST_PIPELINE,
-              },
-            });
-
-            result.elements.push({
-              data: {
-                id: `${modelNodeId}~${pipelineNodeId}`,
-                source: modelNodeId,
-                target: pipelineNodeId,
-              },
-            });
-          }
-          const pipelineIdsToDestinationIndices: Record<string, string[]> = {};
-
-          let indicesPermissions;
-          try {
-            indicesSettings = await this._client.asInternalUser.indices.getSettings();
-            const hasPrivilegesResponse = await this._client.asCurrentUser.security.hasPrivileges({
-              index: [
-                {
-                  names: Object.keys(indicesSettings),
-                  privileges: ['read'],
-                },
-              ],
-            });
-            indicesPermissions = hasPrivilegesResponse.index;
-          } catch (e) {
-            // Possible that the user doesn't have permissions to view
-            // If so, gracefully exit
-            if (e.meta?.statusCode !== 403) {
-              // eslint-disable-next-line no-console
-              console.error(e);
-            }
-            return result;
-          }
-
-          for (const [indexName, { settings }] of Object.entries(indicesSettings)) {
-            if (
-              settings?.index?.default_pipeline &&
-              pipelineIds.has(settings.index.default_pipeline) &&
-              indicesPermissions[indexName]?.read === true
-            ) {
-              if (Array.isArray(pipelineIdsToDestinationIndices[settings.index.default_pipeline])) {
-                pipelineIdsToDestinationIndices[settings.index.default_pipeline].push(indexName);
-              } else {
-                pipelineIdsToDestinationIndices[settings.index.default_pipeline] = [indexName];
-              }
-            }
-          }
-
-          for (const [pipelineId, indexIds] of Object.entries(pipelineIdsToDestinationIndices)) {
-            const pipelineNodeId = this.getNodeId(pipelineId, JOB_MAP_NODE_TYPES.INGEST_PIPELINE);
-
-            for (const destinationIndexId of indexIds) {
-              const destinationIndexNodeId = this.getNodeId(
-                destinationIndexId,
-                JOB_MAP_NODE_TYPES.INDEX
-              );
-
-              const destinationIndexDetails = await this.getIndexData(destinationIndexId);
-              result.details[destinationIndexNodeId] = {
-                ...destinationIndexDetails,
-                ml_inference_models: [modelId],
-              };
-
-              result.elements.push({
-                data: {
-                  id: destinationIndexNodeId,
-                  label: destinationIndexId,
-                  type: JOB_MAP_NODE_TYPES.INDEX,
-                },
-              });
-
-              result.elements.push({
-                data: {
-                  id: `${pipelineNodeId}~${destinationIndexNodeId}`,
-                  source: pipelineNodeId,
-                  target: destinationIndexNodeId,
-                },
-              });
-            }
-          }
-
-          const destinationIndices = flatten(Object.values(pipelineIdsToDestinationIndices));
-
-          // From these destination indices, see if there's any transforms that have the indexId as the source destination index
-          if (destinationIndices.length > 0) {
-            const transforms = await this.initTransformData();
-
-            if (!transforms) return result;
-
-            for (const destinationIndex of destinationIndices) {
-              const destinationIndexNodeId = `${destinationIndex}-${JOB_MAP_NODE_TYPES.INDEX}`;
-
-              const foundTransform = transforms?.find((t) => {
-                const transformSourceIndex = Array.isArray(t.source.index)
-                  ? t.source.index[0]
-                  : t.source.index;
-                return transformSourceIndex === destinationIndex;
-              });
-              if (foundTransform) {
-                const transformDestIndex = foundTransform.dest.index;
-                const transformNodeId = `${foundTransform.id}-${JOB_MAP_NODE_TYPES.TRANSFORM}`;
-                const transformDestIndexNodeId = `${transformDestIndex}-${JOB_MAP_NODE_TYPES.INDEX}`;
-
-                const destIndex = await this.getIndexData(transformDestIndex);
-                result.details[transformNodeId] = foundTransform;
-                result.details[transformDestIndexNodeId] = destIndex;
-
-                result.elements.push(
-                  {
-                    data: {
-                      id: transformNodeId,
-                      label: foundTransform.id,
-                      type: JOB_MAP_NODE_TYPES.TRANSFORM,
-                    },
-                  },
-                  {
-                    data: {
-                      id: transformDestIndexNodeId,
-                      label: transformDestIndex,
-                      type: JOB_MAP_NODE_TYPES.INDEX,
-                    },
-                  }
-                );
-
-                result.elements.push(
-                  {
-                    data: {
-                      id: `${destinationIndexNodeId}~${transformNodeId}`,
-                      source: destinationIndexNodeId,
-                      target: transformNodeId,
-                    },
-                  },
-                  {
-                    data: {
-                      id: `${transformNodeId}~${transformDestIndexNodeId}`,
-                      source: transformNodeId,
-                      target: transformDestIndexNodeId,
-                    },
-                  }
-                );
-              }
-            }
-          }
-        }
+        return pipelinesAndIndicesResults;
       }
     } catch (error) {
       result.error = error.message || 'An error occurred fetching map';
diff --git a/x-pack/plugins/ml/server/models/model_management/models_provider.ts b/x-pack/plugins/ml/server/models/model_management/models_provider.ts
index f6164ad6e65c..d05096bef818 100644
--- a/x-pack/plugins/ml/server/models/model_management/models_provider.ts
+++ b/x-pack/plugins/ml/server/models/model_management/models_provider.ts
@@ -6,6 +6,10 @@
  */
 
 import type { IScopedClusterClient } from '@kbn/core/server';
+import { JOB_MAP_NODE_TYPES, type MapElements } from '@kbn/ml-data-frame-analytics-utils';
+import { flatten } from 'lodash';
+import type { TransformGetTransformTransformSummary } from '@elastic/elasticsearch/lib/api/types';
+import type { IndexName, IndicesIndexState } from '@elastic/elasticsearch/lib/api/types';
 import type {
   IngestPipeline,
   IngestSimulateDocument,
@@ -21,197 +25,472 @@ import type { CloudSetup } from '@kbn/cloud-plugin/server';
 import type { PipelineDefinition } from '../../../common/types/trained_models';
 
 export type ModelService = ReturnType<typeof modelsProvider>;
+export const modelsProvider = (client: IScopedClusterClient, cloud?: CloudSetup) =>
+  new ModelsProvider(client, cloud);
 
-export function modelsProvider(client: IScopedClusterClient, cloud?: CloudSetup) {
-  return {
-    /**
-     * Retrieves the map of model ids and aliases with associated pipelines.
-     * @param modelIds - Array of models ids and model aliases.
-     */
-    async getModelsPipelines(modelIds: string[]) {
-      const modelIdsMap = new Map<string, Record<string, PipelineDefinition> | null>(
-        modelIds.map((id: string) => [id, null])
-      );
-
-      try {
-        const body = await client.asCurrentUser.ingest.getPipeline();
+interface ModelMapResult {
+  ingestPipelines: Map<string, Record<string, PipelineDefinition> | null>;
+  indices: Array<Record<IndexName, IndicesIndexState | null>>;
+  /**
+   * Map elements
+   */
+  elements: MapElements[];
+  /**
+   * Transform, job or index details
+   */
+  details: Record<string, any>;
+  /**
+   * Error
+   */
+  error: null | any;
+}
 
-        for (const [pipelineName, pipelineDefinition] of Object.entries(body)) {
-          const { processors } = pipelineDefinition as { processors: Array<Record<string, any>> };
+export class ModelsProvider {
+  private _transforms?: TransformGetTransformTransformSummary[];
 
-          for (const processor of processors) {
-            const id = processor.inference?.model_id;
-            if (modelIdsMap.has(id)) {
-              const obj = modelIdsMap.get(id);
-              if (obj === null) {
-                modelIdsMap.set(id, { [pipelineName]: pipelineDefinition });
-              } else {
-                obj![pipelineName] = pipelineDefinition;
-              }
-            }
-          }
-        }
-      } catch (error) {
-        if (error.statusCode === 404) {
-          // ES returns 404 when there are no pipelines
-          // Instead, we should return the modelIdsMap and a 200
-          return modelIdsMap;
-        }
-        throw error;
-      }
+  constructor(private _client: IScopedClusterClient, private _cloud?: CloudSetup) {}
 
-      return modelIdsMap;
-    },
-
-    /**
-     * Deletes associated pipelines of the requested model
-     * @param modelIds
-     */
-    async deleteModelPipelines(modelIds: string[]) {
-      const pipelines = await this.getModelsPipelines(modelIds);
-      const pipelinesIds: string[] = [
-        ...new Set([...pipelines.values()].flatMap((v) => Object.keys(v!))),
-      ];
-      await Promise.all(
-        pipelinesIds.map((id) => client.asCurrentUser.ingest.deletePipeline({ id }))
-      );
-    },
-
-    /**
-     * Simulates the effect of the pipeline on given document.
-     *
-     */
-    async simulatePipeline(docs: IngestSimulateDocument[], pipelineConfig: IngestPipeline) {
-      const simulateRequest: IngestSimulateRequest = {
-        docs,
-        pipeline: pipelineConfig,
-      };
-      let result = {};
+  private async initTransformData() {
+    if (!this._transforms) {
       try {
-        result = await client.asCurrentUser.ingest.simulate(simulateRequest);
-      } catch (error) {
-        if (error.statusCode === 404) {
-          // ES returns 404 when there are no pipelines
-          // Instead, we should return an empty response and a 200
-          return result;
+        const body = await this._client.asCurrentUser.transform.getTransform({
+          size: 1000,
+        });
+        this._transforms = body.transforms;
+        return body.transforms;
+      } catch (e) {
+        if (e.meta?.statusCode !== 403) {
+          // eslint-disable-next-line no-console
+          console.error(e);
         }
-        throw error;
       }
+    }
+  }
 
-      return result;
-    },
-
-    /**
-     * Creates the pipeline
-     *
-     */
-    async createInferencePipeline(pipelineConfig: IngestPipeline, pipelineName: string) {
-      let result = {};
-
-      result = await client.asCurrentUser.ingest.putPipeline({
-        id: pipelineName,
-        ...pipelineConfig,
+  private async getIndexData(index: string): Promise<Record<IndexName, IndicesIndexState | null>> {
+    try {
+      const indexData = await this._client.asInternalUser.indices.get({
+        index,
       });
+      return indexData;
+    } catch (e) {
+      // Possible that the user doesn't have permissions to view
+      // If so, gracefully exit
+      if (e.meta?.statusCode !== 403) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+      return { [index]: null };
+    }
+  }
+  private getNodeId(
+    elementOriginalId: string,
+    nodeType: typeof JOB_MAP_NODE_TYPES[keyof typeof JOB_MAP_NODE_TYPES]
+  ): string {
+    return `${elementOriginalId}-${nodeType}`;
+  }
 
-      return result;
-    },
-
-    /**
-     * Retrieves existing pipelines.
-     *
-     */
-    async getPipelines() {
-      let result = {};
-      try {
-        result = await client.asCurrentUser.ingest.getPipeline();
-      } catch (error) {
-        if (error.statusCode === 404) {
-          // ES returns 404 when there are no pipelines
-          // Instead, we should return an empty response and a 200
-          return result;
-        }
-        throw error;
+  /**
+   * Simulates the effect of the pipeline on given document.
+   *
+   */
+  async simulatePipeline(docs: IngestSimulateDocument[], pipelineConfig: IngestPipeline) {
+    const simulateRequest: IngestSimulateRequest = {
+      docs,
+      pipeline: pipelineConfig,
+    };
+    let result = {};
+    try {
+      result = await this._client.asCurrentUser.ingest.simulate(simulateRequest);
+    } catch (error) {
+      if (error.statusCode === 404) {
+        // ES returns 404 when there are no pipelines
+        // Instead, we should return an empty response and a 200
+        return result;
       }
+      throw error;
+    }
 
-      return result;
-    },
-
-    /**
-     * Returns a list of elastic curated models available for download.
-     */
-    async getModelDownloads(): Promise<ModelDefinitionResponse[]> {
-      // We assume that ML nodes in Cloud are always on linux-x86_64, even if other node types aren't.
-      const isCloud = !!cloud?.cloudId;
-
-      const nodesInfoResponse =
-        await client.asInternalUser.transport.request<NodesInfoResponseBase>({
-          method: 'GET',
-          path: `/_nodes/ml:true/os`,
-        });
+    return result;
+  }
+
+  /**
+   * Creates the pipeline
+   *
+   */
+  async createInferencePipeline(pipelineConfig: IngestPipeline, pipelineName: string) {
+    let result = {};
+
+    result = await this._client.asCurrentUser.ingest.putPipeline({
+      id: pipelineName,
+      ...pipelineConfig,
+    });
+
+    return result;
+  }
+
+  /**
+   * Retrieves existing pipelines.
+   *
+   */
+  async getPipelines() {
+    let result = {};
+    try {
+      result = await this._client.asCurrentUser.ingest.getPipeline();
+    } catch (error) {
+      if (error.statusCode === 404) {
+        // ES returns 404 when there are no pipelines
+        // Instead, we should return an empty response and a 200
+        return result;
+      }
+      throw error;
+    }
+
+    return result;
+  }
+
+  /**
+   * Retrieves the map of model ids and aliases with associated pipelines.
+   * @param modelIds - Array of models ids and model aliases.
+   */
+  async getModelsPipelines(modelIds: string[]) {
+    const modelIdsMap = new Map<string, Record<string, PipelineDefinition> | null>(
+      modelIds.map((id: string) => [id, null])
+    );
 
-      let osName: string | undefined;
-      let arch: string | undefined;
-      // Indicates that all ML nodes have the same architecture
-      let sameArch = true;
-      for (const node of Object.values(nodesInfoResponse.nodes)) {
-        if (!osName) {
-          osName = node.os?.name;
+    try {
+      const body = await this._client.asCurrentUser.ingest.getPipeline();
+
+      for (const [pipelineName, pipelineDefinition] of Object.entries(body)) {
+        const { processors } = pipelineDefinition as { processors: Array<Record<string, any>> };
+
+        for (const processor of processors) {
+          const id = processor.inference?.model_id;
+          if (modelIdsMap.has(id)) {
+            const obj = modelIdsMap.get(id);
+            if (obj === null) {
+              modelIdsMap.set(id, { [pipelineName]: pipelineDefinition });
+            } else {
+              obj![pipelineName] = pipelineDefinition;
+            }
+          }
         }
-        if (!arch) {
-          arch = node.os?.arch;
+      }
+    } catch (error) {
+      if (error.statusCode === 404) {
+        // ES returns 404 when there are no pipelines
+        // Instead, we should return the modelIdsMap and a 200
+        return modelIdsMap;
+      }
+      throw error;
+    }
+
+    return modelIdsMap;
+  }
+
+  /**
+   * Retrieves the network map and metadata of model ids, pipelines, and indices that are tied to the model ids.
+   * @param modelIds - Array of models ids and model aliases.
+   */
+  async getModelsPipelinesAndIndicesMap(
+    modelId: string,
+    {
+      withIndices,
+    }: {
+      withIndices: boolean;
+    }
+  ): Promise<ModelMapResult> {
+    const result: ModelMapResult = {
+      ingestPipelines: new Map(),
+      indices: [],
+      elements: [],
+      details: {},
+      error: null,
+    };
+
+    let pipelinesResponse;
+    let indicesSettings;
+
+    try {
+      pipelinesResponse = await this.getModelsPipelines([modelId]);
+
+      // 1. Get list of pipelines that are related to the model
+      const pipelines = pipelinesResponse?.get(modelId);
+      const modelNodeId = this.getNodeId(modelId, JOB_MAP_NODE_TYPES.TRAINED_MODEL);
+
+      if (pipelines) {
+        const pipelineIds = new Set(Object.keys(pipelines));
+        result.ingestPipelines = pipelinesResponse;
+
+        for (const pipelineId of pipelineIds) {
+          const pipelineNodeId = this.getNodeId(pipelineId, JOB_MAP_NODE_TYPES.INGEST_PIPELINE);
+          result.details[pipelineNodeId] = pipelines[pipelineId];
+
+          result.elements.push({
+            data: {
+              id: pipelineNodeId,
+              label: pipelineId,
+              type: JOB_MAP_NODE_TYPES.INGEST_PIPELINE,
+            },
+          });
+
+          result.elements.push({
+            data: {
+              id: `${modelNodeId}~${pipelineNodeId}`,
+              source: modelNodeId,
+              target: pipelineNodeId,
+            },
+          });
         }
-        if (node.os?.name !== osName || node.os?.arch !== arch) {
-          sameArch = false;
-          break;
+
+        if (withIndices === true) {
+          const pipelineIdsToDestinationIndices: Record<string, string[]> = {};
+
+          let indicesPermissions;
+          try {
+            indicesSettings = await this._client.asInternalUser.indices.getSettings();
+            const hasPrivilegesResponse = await this._client.asCurrentUser.security.hasPrivileges({
+              index: [
+                {
+                  names: Object.keys(indicesSettings),
+                  privileges: ['read'],
+                },
+              ],
+            });
+            indicesPermissions = hasPrivilegesResponse.index;
+          } catch (e) {
+            // Possible that the user doesn't have permissions to view
+            // If so, gracefully exit
+            if (e.meta?.statusCode !== 403) {
+              // eslint-disable-next-line no-console
+              console.error(e);
+            }
+            return result;
+          }
+
+          // 2. From list of model pipelines, find all indices that have pipeline set as index.default_pipeline
+          for (const [indexName, { settings }] of Object.entries(indicesSettings)) {
+            if (
+              settings?.index?.default_pipeline &&
+              pipelineIds.has(settings.index.default_pipeline) &&
+              indicesPermissions[indexName]?.read === true
+            ) {
+              if (Array.isArray(pipelineIdsToDestinationIndices[settings.index.default_pipeline])) {
+                pipelineIdsToDestinationIndices[settings.index.default_pipeline].push(indexName);
+              } else {
+                pipelineIdsToDestinationIndices[settings.index.default_pipeline] = [indexName];
+              }
+            }
+          }
+
+          // 3. Grab index information for all the indices found, and add their info to the map
+          for (const [pipelineId, indexIds] of Object.entries(pipelineIdsToDestinationIndices)) {
+            const pipelineNodeId = this.getNodeId(pipelineId, JOB_MAP_NODE_TYPES.INGEST_PIPELINE);
+
+            for (const destinationIndexId of indexIds) {
+              const destinationIndexNodeId = this.getNodeId(
+                destinationIndexId,
+                JOB_MAP_NODE_TYPES.INDEX
+              );
+
+              const destinationIndexDetails = await this.getIndexData(destinationIndexId);
+
+              result.indices.push(destinationIndexDetails);
+
+              result.details[destinationIndexNodeId] = {
+                ...destinationIndexDetails,
+                ml_inference_models: [modelId],
+              };
+
+              result.elements.push({
+                data: {
+                  id: destinationIndexNodeId,
+                  label: destinationIndexId,
+                  type: JOB_MAP_NODE_TYPES.INDEX,
+                },
+              });
+
+              result.elements.push({
+                data: {
+                  id: `${pipelineNodeId}~${destinationIndexNodeId}`,
+                  source: pipelineNodeId,
+                  target: destinationIndexNodeId,
+                },
+              });
+            }
+          }
+
+          const destinationIndices = flatten(Object.values(pipelineIdsToDestinationIndices));
+
+          // 4. From these destination indices, check if there's any transforms that have the indexId as the source destination index
+          if (destinationIndices.length > 0) {
+            const transforms = await this.initTransformData();
+
+            if (!transforms) return result;
+
+            for (const destinationIndex of destinationIndices) {
+              const destinationIndexNodeId = `${destinationIndex}-${JOB_MAP_NODE_TYPES.INDEX}`;
+
+              const foundTransform = transforms?.find((t) => {
+                const transformSourceIndex = Array.isArray(t.source.index)
+                  ? t.source.index[0]
+                  : t.source.index;
+                return transformSourceIndex === destinationIndex;
+              });
+
+              // 5. If any of the transforms use these indices as source , find the destination indices to complete the map
+              if (foundTransform) {
+                const transformDestIndex = foundTransform.dest.index;
+                const transformNodeId = `${foundTransform.id}-${JOB_MAP_NODE_TYPES.TRANSFORM}`;
+                const transformDestIndexNodeId = `${transformDestIndex}-${JOB_MAP_NODE_TYPES.INDEX}`;
+
+                const destIndex = await this.getIndexData(transformDestIndex);
+
+                result.indices.push(destIndex);
+
+                result.details[transformNodeId] = foundTransform;
+                result.details[transformDestIndexNodeId] = destIndex;
+
+                result.elements.push(
+                  {
+                    data: {
+                      id: transformNodeId,
+                      label: foundTransform.id,
+                      type: JOB_MAP_NODE_TYPES.TRANSFORM,
+                    },
+                  },
+                  {
+                    data: {
+                      id: transformDestIndexNodeId,
+                      label: transformDestIndex,
+                      type: JOB_MAP_NODE_TYPES.INDEX,
+                    },
+                  }
+                );
+
+                result.elements.push(
+                  {
+                    data: {
+                      id: `${destinationIndexNodeId}~${transformNodeId}`,
+                      source: destinationIndexNodeId,
+                      target: transformNodeId,
+                    },
+                  },
+                  {
+                    data: {
+                      id: `${transformNodeId}~${transformDestIndexNodeId}`,
+                      source: transformNodeId,
+                      target: transformDestIndexNodeId,
+                    },
+                  }
+                );
+              }
+            }
+          }
         }
       }
+      return result;
+    } catch (error) {
+      if (error.statusCode === 404) {
+        // ES returns 404 when there are no pipelines
+        // Instead, we should return the modelIdsMap and a 200
+        return result;
+      }
+      throw error;
+    }
+
+    return result;
+  }
+
+  /**
+   * Deletes associated pipelines of the requested model
+   * @param modelIds
+   */
+  async deleteModelPipelines(modelIds: string[]) {
+    const pipelines = await this.getModelsPipelines(modelIds);
+    const pipelinesIds: string[] = [
+      ...new Set([...pipelines.values()].flatMap((v) => Object.keys(v!))),
+    ];
+    await Promise.all(
+      pipelinesIds.map((id) => this._client.asCurrentUser.ingest.deletePipeline({ id }))
+    );
+  }
 
-      const result = Object.entries(ELASTIC_MODEL_DEFINITIONS).map(([name, def]) => {
-        const recommended =
-          (isCloud && def.os === 'Linux' && def.arch === 'amd64') ||
-          (sameArch && !!def?.os && def?.os === osName && def?.arch === arch);
-        return {
-          ...def,
-          name,
-          ...(recommended ? { recommended } : {}),
-        };
+  /**
+   * Returns a list of elastic curated models available for download.
+   */
+  async getModelDownloads(): Promise<ModelDefinitionResponse[]> {
+    // We assume that ML nodes in Cloud are always on linux-x86_64, even if other node types aren't.
+    const isCloud = !!this._cloud?.cloudId;
+
+    const nodesInfoResponse =
+      await this._client.asInternalUser.transport.request<NodesInfoResponseBase>({
+        method: 'GET',
+        path: `/_nodes/ml:true/os`,
       });
 
-      return result;
-    },
-
-    /**
-     * Provides an ELSER model name and configuration for download based on the current cluster architecture.
-     * The current default version is 2. If running on Cloud it returns the Linux x86_64 optimized version.
-     * If any of the ML nodes run a different OS rather than Linux, or the CPU architecture isn't x86_64,
-     * a portable version of the model is returned.
-     */
-    async getELSER(options?: GetElserOptions): Promise<ModelDefinitionResponse> | never {
-      const modelDownloadConfig = await this.getModelDownloads();
-
-      let requestedModel: ModelDefinitionResponse | undefined;
-      let recommendedModel: ModelDefinitionResponse | undefined;
-      let defaultModel: ModelDefinitionResponse | undefined;
-
-      for (const model of modelDownloadConfig) {
-        if (options?.version === model.version) {
+    let osName: string | undefined;
+    let arch: string | undefined;
+    // Indicates that all ML nodes have the same architecture
+    let sameArch = true;
+    for (const node of Object.values(nodesInfoResponse.nodes)) {
+      if (!osName) {
+        osName = node.os?.name;
+      }
+      if (!arch) {
+        arch = node.os?.arch;
+      }
+      if (node.os?.name !== osName || node.os?.arch !== arch) {
+        sameArch = false;
+        break;
+      }
+    }
+
+    const result = Object.entries(ELASTIC_MODEL_DEFINITIONS).map(([name, def]) => {
+      const recommended =
+        (isCloud && def.os === 'Linux' && def.arch === 'amd64') ||
+        (sameArch && !!def?.os && def?.os === osName && def?.arch === arch);
+      return {
+        ...def,
+        name,
+        ...(recommended ? { recommended } : {}),
+      };
+    });
+
+    return result;
+  }
+
+  /**
+   * Provides an ELSER model name and configuration for download based on the current cluster architecture.
+   * The current default version is 2. If running on Cloud it returns the Linux x86_64 optimized version.
+   * If any of the ML nodes run a different OS rather than Linux, or the CPU architecture isn't x86_64,
+   * a portable version of the model is returned.
+   */
+  async getELSER(options?: GetElserOptions): Promise<ModelDefinitionResponse> | never {
+    const modelDownloadConfig = await this.getModelDownloads();
+
+    let requestedModel: ModelDefinitionResponse | undefined;
+    let recommendedModel: ModelDefinitionResponse | undefined;
+    let defaultModel: ModelDefinitionResponse | undefined;
+
+    for (const model of modelDownloadConfig) {
+      if (options?.version === model.version) {
+        requestedModel = model;
+        if (model.recommended) {
           requestedModel = model;
-          if (model.recommended) {
-            requestedModel = model;
-            break;
-          }
-        } else if (model.recommended) {
-          recommendedModel = model;
-        } else if (model.default) {
-          defaultModel = model;
+          break;
         }
+      } else if (model.recommended) {
+        recommendedModel = model;
+      } else if (model.default) {
+        defaultModel = model;
       }
+    }
 
-      if (!requestedModel && !defaultModel && !recommendedModel) {
-        throw new Error('Requested model not found');
-      }
+    if (!requestedModel && !defaultModel && !recommendedModel) {
+      throw new Error('Requested model not found');
+    }
 
-      return requestedModel || recommendedModel || defaultModel!;
-    },
-  };
+    return requestedModel || recommendedModel || defaultModel!;
+  }
 }
diff --git a/x-pack/plugins/ml/server/routes/schemas/inference_schema.ts b/x-pack/plugins/ml/server/routes/schemas/inference_schema.ts
index 1b48a49c8d82..260b3bc5881d 100644
--- a/x-pack/plugins/ml/server/routes/schemas/inference_schema.ts
+++ b/x-pack/plugins/ml/server/routes/schemas/inference_schema.ts
@@ -48,6 +48,7 @@ export const optionalModelIdSchema = schema.object({
 export const getInferenceQuerySchema = schema.object({
   size: schema.maybe(schema.string()),
   with_pipelines: schema.maybe(schema.string()),
+  with_indices: schema.maybe(schema.oneOf([schema.string(), schema.boolean()])),
   include: schema.maybe(schema.string()),
 });
 
diff --git a/x-pack/plugins/ml/server/routes/trained_models.ts b/x-pack/plugins/ml/server/routes/trained_models.ts
index 8685652ab318..f6eeb6fa16d4 100644
--- a/x-pack/plugins/ml/server/routes/trained_models.ts
+++ b/x-pack/plugins/ml/server/routes/trained_models.ts
@@ -11,6 +11,7 @@ import type { ErrorType } from '@kbn/ml-error-utils';
 import type { MlGetTrainedModelsRequest } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { type ElserVersion } from '@kbn/ml-trained-models-utils';
 import type { CloudSetup } from '@kbn/cloud-plugin/server';
+import { isDefined } from '@kbn/ml-is-defined';
 import { ML_INTERNAL_BASE_PATH } from '../../common/constants/app';
 import type { MlFeatures, RouteInitialization } from '../types';
 import { wrapError } from '../client/error_wrapper';
@@ -29,7 +30,10 @@ import {
   createIngestPipelineSchema,
   modelDownloadsQuery,
 } from './schemas/inference_schema';
-import type { TrainedModelConfigResponse } from '../../common/types/trained_models';
+import type {
+  PipelineDefinition,
+  TrainedModelConfigResponse,
+} from '../../common/types/trained_models';
 import { mlLog } from '../lib/log';
 import { forceQuerySchema } from './schemas/anomaly_detectors_schema';
 import { modelsProvider } from '../models/model_management';
@@ -84,9 +88,17 @@ export function trainedModelsRoutes(
       routeGuard.fullLicenseAPIGuard(async ({ client, mlClient, request, response }) => {
         try {
           const { modelId } = request.params;
-          const { with_pipelines: withPipelines, ...query } = request.query;
+          const {
+            with_pipelines: withPipelines,
+            with_indices: withIndicesRaw,
+            ...getTrainedModelsRequestParams
+          } = request.query;
+
+          const withIndices =
+            request.query.with_indices === 'true' || request.query.with_indices === true;
+
           const resp = await mlClient.getTrainedModels({
-            ...query,
+            ...getTrainedModelsRequestParams,
             ...(modelId ? { model_id: modelId } : {}),
             size: DEFAULT_TRAINED_MODELS_PAGE_SIZE,
           } as MlGetTrainedModelsRequest);
@@ -123,20 +135,54 @@ export function trainedModelsRoutes(
                   ...Object.values(modelDeploymentsMap).flat(),
                 ])
               );
-
-              const pipelinesResponse = await modelsProvider(client).getModelsPipelines(
-                modelIdsAndAliases
+              const modelsClient = modelsProvider(client);
+
+              const modelsPipelinesAndIndices = await Promise.all(
+                modelIdsAndAliases.map(async (modelIdOrAlias) => {
+                  return {
+                    modelIdOrAlias,
+                    result: await modelsClient.getModelsPipelinesAndIndicesMap(modelIdOrAlias, {
+                      withIndices,
+                    }),
+                  };
+                })
               );
+
               for (const model of result) {
-                model.pipelines = {
-                  ...(pipelinesResponse.get(model.model_id) ?? {}),
-                  ...(model.metadata?.model_aliases ?? []).reduce((acc, alias) => {
-                    return Object.assign(acc, pipelinesResponse.get(alias) ?? {});
-                  }, {}),
-                  ...(modelDeploymentsMap[model.model_id] ?? []).reduce((acc, deploymentId) => {
-                    return Object.assign(acc, pipelinesResponse.get(deploymentId) ?? {});
-                  }, {}),
-                };
+                const modelAliases = model.metadata?.model_aliases ?? [];
+                const modelMap = modelsPipelinesAndIndices.find(
+                  (d) => d.modelIdOrAlias === model.model_id
+                )?.result;
+
+                const allRelatedModels = modelsPipelinesAndIndices
+                  .filter(
+                    (m) =>
+                      [
+                        model.model_id,
+                        ...modelAliases,
+                        ...(modelDeploymentsMap[model.model_id] ?? []),
+                      ].findIndex((alias) => alias === m.modelIdOrAlias) > -1
+                  )
+                  .map((r) => r?.result)
+                  .filter(isDefined);
+                const ingestPipelinesFromModelAliases = allRelatedModels
+                  .map((r) => r?.ingestPipelines)
+                  .filter(isDefined) as Array<Map<string, Record<string, PipelineDefinition>>>;
+
+                model.pipelines = ingestPipelinesFromModelAliases.reduce<
+                  Record<string, PipelineDefinition>
+                >((allPipelines, modelsToPipelines) => {
+                  for (const [, pipelinesObj] of modelsToPipelines?.entries()) {
+                    Object.entries(pipelinesObj).forEach(([pipelineId, pipelineInfo]) => {
+                      allPipelines[pipelineId] = pipelineInfo;
+                    });
+                  }
+                  return allPipelines;
+                }, {});
+
+                if (modelMap && withIndices) {
+                  model.indices = modelMap.indices;
+                }
               }
             }
           } catch (e) {
diff --git a/x-pack/plugins/ml/tsconfig.json b/x-pack/plugins/ml/tsconfig.json
index 2532a6b7824e..7962e2dd2729 100644
--- a/x-pack/plugins/ml/tsconfig.json
+++ b/x-pack/plugins/ml/tsconfig.json
@@ -105,5 +105,6 @@
     "@kbn/presentation-util-plugin",
     "@kbn/react-kibana-mount",
     "@kbn/core-http-browser",
+    "@kbn/data-view-editor-plugin",
   ],
 }
diff --git a/x-pack/plugins/security_solution_serverless/public/navigation/links/constants.ts b/x-pack/plugins/security_solution_serverless/public/navigation/links/constants.ts
index 520cbdd192ae..565b2d2c97c8 100644
--- a/x-pack/plugins/security_solution_serverless/public/navigation/links/constants.ts
+++ b/x-pack/plugins/security_solution_serverless/public/navigation/links/constants.ts
@@ -51,7 +51,7 @@ export enum ExternalPageName {
   mlNodes = 'ml:nodes',
   mlFileUpload = 'ml:fileUpload',
   mlIndexDataVisualizer = 'ml:indexDataVisualizer',
-  mlDataComparison = 'ml:dataComparison',
+  mlDataDrift = 'ml:dataDrift',
   mlExplainLogRateSpikes = 'ml:logRateAnalysis',
   mlLogPatternAnalysis = 'ml:logPatternAnalysis',
   mlChangePointDetections = 'ml:changePointDetections',
diff --git a/x-pack/plugins/security_solution_serverless/public/navigation/links/sections/ml_links.ts b/x-pack/plugins/security_solution_serverless/public/navigation/links/sections/ml_links.ts
index 32c758709761..34a5c8530fb2 100644
--- a/x-pack/plugins/security_solution_serverless/public/navigation/links/sections/ml_links.ts
+++ b/x-pack/plugins/security_solution_serverless/public/navigation/links/sections/ml_links.ts
@@ -81,7 +81,7 @@ export const mlNavCategories: ProjectLinkCategory[] = [
     linkIds: [
       ExternalPageName.mlFileUpload,
       ExternalPageName.mlIndexDataVisualizer,
-      ExternalPageName.mlDataComparison,
+      ExternalPageName.mlDataDrift,
     ],
   },
   {
@@ -176,10 +176,10 @@ export const mlNavLinks: ProjectNavigationLink[] = [
     description: i18n.INDEX_DATA_VISUALIZER_DESC,
   },
   {
-    id: ExternalPageName.mlDataComparison,
-    title: i18n.DATA_COMPARISON_TITLE,
+    id: ExternalPageName.mlDataDrift,
+    title: i18n.DATA_DRIFT_TITLE,
     landingIcon: IconRapidBarGraphLazy,
-    description: i18n.DATA_COMPARISON_DESC,
+    description: i18n.DATA_DRIFT_TITLE,
   },
   {
     id: ExternalPageName.mlExplainLogRateSpikes,
diff --git a/x-pack/plugins/security_solution_serverless/public/navigation/links/sections/ml_translations.ts b/x-pack/plugins/security_solution_serverless/public/navigation/links/sections/ml_translations.ts
index 36a28d561bda..18baed686b5b 100644
--- a/x-pack/plugins/security_solution_serverless/public/navigation/links/sections/ml_translations.ts
+++ b/x-pack/plugins/security_solution_serverless/public/navigation/links/sections/ml_translations.ts
@@ -213,16 +213,16 @@ export const INDEX_DATA_VISUALIZER_DESC = i18n.translate(
     defaultMessage: 'Data view data visualizer page',
   }
 );
-export const DATA_COMPARISON_TITLE = i18n.translate(
-  'xpack.securitySolutionServerless.navLinks.ml.datComparison.title',
+export const DATA_DRIFT_TITLE = i18n.translate(
+  'xpack.securitySolutionServerless.navLinks.ml.dataDrift.title',
   {
-    defaultMessage: 'Data comparison',
+    defaultMessage: 'Data drift',
   }
 );
 export const DATA_COMPARISON_DESC = i18n.translate(
-  'xpack.securitySolutionServerless.navLinks.ml.datComparison.desc',
+  'xpack.securitySolutionServerless.navLinks.ml.dataDrift.desc',
   {
-    defaultMessage: 'Data comparison page',
+    defaultMessage: 'Data drift page',
   }
 );
 export const LOG_RATE_ANALYSIS_TITLE = i18n.translate(
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index 0b350d50056b..1e8ea9f23932 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -11626,7 +11626,6 @@
     "xpack.dataVisualizer.nameCollisionMsg": "\"{name}\" existe déjà, veuillez fournir un nom unique",
     "xpack.dataVisualizer.randomSamplerSettingsPopUp.probabilityLabel": "Probabilité utilisée : {samplingProbability} %",
     "xpack.dataVisualizer.searchPanel.ofFieldsTotal": "sur un total de {totalCount}",
-    "xpack.dataVisualizer.searchPanel.totalDocCountLabel": "Total des documents : {prepend}{strongTotalCount}",
     "xpack.dataVisualizer.searchPanel.totalDocCountNumber": "{totalCount, plural, one {#} many {#} other {#}}",
     "xpack.dataVisualizer.addCombinedFieldsLabel": "Ajouter un champ combiné",
     "xpack.dataVisualizer.chrome.help.appName": "Data Visualizer (Visualiseur de données)",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index c6948a329c94..73d492e7031d 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -11640,7 +11640,6 @@
     "xpack.dataVisualizer.nameCollisionMsg": "「{name}」はすでに存在します。一意の名前を入力してください。",
     "xpack.dataVisualizer.randomSamplerSettingsPopUp.probabilityLabel": "使用された確率：{samplingProbability}%",
     "xpack.dataVisualizer.searchPanel.ofFieldsTotal": "合計{totalCount}中",
-    "xpack.dataVisualizer.searchPanel.totalDocCountLabel": "合計ドキュメント数：{prepend}{strongTotalCount}",
     "xpack.dataVisualizer.searchPanel.totalDocCountNumber": "{totalCount, plural, other {#}}",
     "xpack.dataVisualizer.addCombinedFieldsLabel": "結合されたフィールドを追加",
     "xpack.dataVisualizer.chrome.help.appName": "データビジュアライザー",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 491e2870c636..3a87fc2238ee 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -11640,7 +11640,6 @@
     "xpack.dataVisualizer.nameCollisionMsg": "“{name}”已存在，请提供唯一名称",
     "xpack.dataVisualizer.randomSamplerSettingsPopUp.probabilityLabel": "使用的概率：{samplingProbability}%",
     "xpack.dataVisualizer.searchPanel.ofFieldsTotal": "，共 {totalCount} 个",
-    "xpack.dataVisualizer.searchPanel.totalDocCountLabel": "总文档数：{prepend}{strongTotalCount}",
     "xpack.dataVisualizer.searchPanel.totalDocCountNumber": "{totalCount, plural, other {#}}",
     "xpack.dataVisualizer.addCombinedFieldsLabel": "添加组合字段",
     "xpack.dataVisualizer.chrome.help.appName": "数据可视化工具",
diff --git a/x-pack/test/api_integration/apis/ml/trained_models/get_models.ts b/x-pack/test/api_integration/apis/ml/trained_models/get_models.ts
index 2633423b5855..0c1c90751b55 100644
--- a/x-pack/test/api_integration/apis/ml/trained_models/get_models.ts
+++ b/x-pack/test/api_integration/apis/ml/trained_models/get_models.ts
@@ -13,6 +13,7 @@ import { getCommonRequestHeader } from '../../../../functional/services/ml/commo
 export default ({ getService }: FtrProviderContext) => {
   const supertest = getService('supertestWithoutAuth');
   const ml = getService('ml');
+  const esDeleteAllIndices = getService('esDeleteAllIndices');
 
   describe('GET trained_models', () => {
     let testModelIds: string[] = [];
@@ -23,6 +24,11 @@ export default ({ getService }: FtrProviderContext) => {
       testModelIds = await ml.api.createTestTrainedModels('regression', 5, true);
       await ml.api.createModelAlias('dfa_regression_model_n_0', 'dfa_regression_model_alias');
       await ml.api.createIngestPipeline('dfa_regression_model_alias');
+
+      // Creating an indices that are tied to modelId: dfa_regression_model_n_1
+      await ml.api.createIndex(`user-index_dfa_regression_model_n_1`, undefined, {
+        index: { default_pipeline: `pipeline_dfa_regression_model_n_1` },
+      });
     });
 
     after(async () => {
@@ -34,6 +40,8 @@ export default ({ getService }: FtrProviderContext) => {
       );
       await ml.api.cleanMlIndices();
       await ml.testResources.cleanMLSavedObjects();
+
+      await esDeleteAllIndices('user-index_dfa*');
     });
 
     it('returns all trained models with associated pipelines including aliases', async () => {
@@ -47,12 +55,13 @@ export default ({ getService }: FtrProviderContext) => {
       expect(body.length).to.eql(6);
 
       const sampleModel = body.find((v: any) => v.model_id === 'dfa_regression_model_n_0');
+
       expect(Object.keys(sampleModel.pipelines).length).to.eql(2);
     });
 
     it('returns models without pipeline in case user does not have required permission', async () => {
       const { body, status } = await supertest
-        .get(`/internal/ml/trained_models?with_pipelines=true`)
+        .get(`/internal/ml/trained_models?with_pipelines=true&with_indices=true`)
         .auth(USER.ML_VIEWER, ml.securityCommon.getPasswordForUser(USER.ML_VIEWER))
         .set(getCommonRequestHeader('1'));
       ml.api.assertResponseStatusCode(200, status, body);
@@ -60,6 +69,7 @@ export default ({ getService }: FtrProviderContext) => {
       // Created models + system model
       expect(body.length).to.eql(6);
       const sampleModel = body.find((v: any) => v.model_id === 'dfa_regression_model_n_0');
+
       expect(sampleModel.pipelines).to.eql(undefined);
     });
 
@@ -71,7 +81,61 @@ export default ({ getService }: FtrProviderContext) => {
       ml.api.assertResponseStatusCode(200, status, body);
 
       expect(body.length).to.eql(1);
-      expect(body[0].model_id).to.eql('dfa_regression_model_n_1');
+
+      const sampleModel = body[0];
+      expect(sampleModel.model_id).to.eql('dfa_regression_model_n_1');
+      expect(sampleModel.pipelines).to.eql(undefined);
+      expect(sampleModel.indices).to.eql(undefined);
+    });
+
+    it('returns trained model by id with_pipelines=true,with_indices=false', async () => {
+      const { body, status } = await supertest
+        .get(
+          `/internal/ml/trained_models/dfa_regression_model_n_1?with_pipelines=true&with_indices=false`
+        )
+        .auth(USER.ML_POWERUSER, ml.securityCommon.getPasswordForUser(USER.ML_POWERUSER))
+        .set(getCommonRequestHeader('1'));
+      ml.api.assertResponseStatusCode(200, status, body);
+
+      expect(body.length).to.eql(1);
+      const sampleModel = body[0];
+
+      expect(sampleModel.model_id).to.eql('dfa_regression_model_n_1');
+      expect(Object.keys(sampleModel.pipelines).length).to.eql(
+        1,
+        `Expected number of pipelines for dfa_regression_model_n_1 to be ${1} (got ${
+          Object.keys(sampleModel.pipelines).length
+        })`
+      );
+      expect(sampleModel.indices).to.eql(
+        undefined,
+        `Expected indices for dfa_regression_model_n_1 to be undefined (got ${sampleModel.indices})`
+      );
+    });
+
+    it('returns trained model by id with_pipelines=true,with_indices=true', async () => {
+      const { body, status } = await supertest
+        .get(
+          `/internal/ml/trained_models/dfa_regression_model_n_1?with_pipelines=true&with_indices=true`
+        )
+        .auth(USER.ML_POWERUSER, ml.securityCommon.getPasswordForUser(USER.ML_POWERUSER))
+        .set(getCommonRequestHeader('1'));
+      ml.api.assertResponseStatusCode(200, status, body);
+
+      const sampleModel = body[0];
+      expect(sampleModel.model_id).to.eql('dfa_regression_model_n_1');
+      expect(Object.keys(sampleModel.pipelines).length).to.eql(
+        1,
+        `Expected number of pipelines for dfa_regression_model_n_1 to be ${1} (got ${
+          Object.keys(sampleModel.pipelines).length
+        })`
+      );
+      expect(sampleModel.indices.length).to.eql(
+        1,
+        `Expected number of indices for dfa_regression_model_n_1 to be ${1} (got ${
+          sampleModel.indices.length
+        })`
+      );
     });
 
     it('returns 404 if requested trained model does not exist', async () => {
diff --git a/x-pack/test/functional/apps/ml/data_visualizer/data_drift.ts b/x-pack/test/functional/apps/ml/data_visualizer/data_drift.ts
new file mode 100644
index 000000000000..2eb579c1720d
--- /dev/null
+++ b/x-pack/test/functional/apps/ml/data_visualizer/data_drift.ts
@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+import { farequoteDataViewTestDataWithQuery } from '../../aiops/test_data';
+import { TestData } from '../../aiops/types';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const ml = getService('ml');
+  const PageObjects = getPageObjects(['common', 'console', 'header', 'home', 'security']);
+  const elasticChart = getService('elasticChart');
+  const esArchiver = getService('esArchiver');
+
+  function runTests(testData: TestData) {
+    it(`${testData.suiteTitle} loads the source data in data drift`, async () => {
+      await elasticChart.setNewChartUiDebugFlag(true);
+
+      await ml.testExecution.logTestStep(
+        `${testData.suiteTitle} loads the saved search selection page`
+      );
+      await ml.navigation.navigateToDataDrift();
+
+      await ml.testExecution.logTestStep(
+        `${testData.suiteTitle} loads the data drift index or saved search select page`
+      );
+      await ml.jobSourceSelection.selectSourceForDataDrift(testData.sourceIndexOrSavedSearch);
+    });
+
+    it(`${testData.suiteTitle} displays index details`, async () => {
+      await ml.testExecution.logTestStep(`${testData.suiteTitle} displays the time range step`);
+      await ml.dataDrift.assertTimeRangeSelectorSectionExists();
+
+      await ml.testExecution.logTestStep(`${testData.suiteTitle} loads data for full time range`);
+      await ml.dataDrift.clickUseFullDataButton();
+
+      await ml.dataDrift.setRandomSamplingOption('Reference', 'dvRandomSamplerOptionOff');
+      await ml.dataDrift.setRandomSamplingOption('Comparison', 'dvRandomSamplerOptionOff');
+
+      await PageObjects.header.waitUntilLoadingHasFinished();
+
+      await ml.testExecution.logTestStep(
+        `${testData.suiteTitle} displays elements in the doc count panel correctly`
+      );
+      await ml.dataDrift.assertPrimarySearchBarExists();
+      await ml.dataDrift.assertReferenceDocCountContent();
+      await ml.dataDrift.assertComparisonDocCountContent();
+
+      await ml.testExecution.logTestStep(
+        `${testData.suiteTitle} displays elements in the page correctly`
+      );
+      await ml.dataDrift.assertNoWindowParametersEmptyPromptExists();
+
+      await ml.testExecution.logTestStep('clicks the document count chart to start analysis');
+      await ml.dataDrift.clickDocumentCountChart(
+        'dataDriftDocCountChart-Reference',
+        testData.chartClickCoordinates
+      );
+      await ml.dataDrift.runAnalysis();
+    });
+  }
+
+  describe('data drift', async function () {
+    for (const testData of [farequoteDataViewTestDataWithQuery]) {
+      describe(`with '${testData.sourceIndexOrSavedSearch}'`, function () {
+        before(async () => {
+          await esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/ml/farequote');
+
+          await ml.testResources.createIndexPatternIfNeeded(
+            testData.sourceIndexOrSavedSearch,
+            '@timestamp'
+          );
+
+          await ml.testResources.setKibanaTimeZoneToUTC();
+
+          if (testData.dataGenerator === 'kibana_sample_data_logs') {
+            await PageObjects.security.login('elastic', 'changeme', {
+              expectSuccess: true,
+            });
+
+            await PageObjects.common.navigateToUrl('home', '/tutorial_directory/sampleData', {
+              useActualUrl: true,
+            });
+            await PageObjects.header.waitUntilLoadingHasFinished();
+            await PageObjects.home.addSampleDataSet('logs');
+            await PageObjects.header.waitUntilLoadingHasFinished();
+          } else {
+            await ml.securityUI.loginAsMlPowerUser();
+          }
+        });
+
+        after(async () => {
+          await elasticChart.setNewChartUiDebugFlag(false);
+          await ml.testResources.deleteIndexPatternByTitle(testData.sourceIndexOrSavedSearch);
+          await esArchiver.unload('x-pack/test/functional/es_archives/ml/farequote');
+        });
+
+        it(`${testData.suiteTitle} loads the ml page`, async () => {
+          // Start navigation from the base of the ML app.
+          await ml.navigation.navigateToMl();
+          await elasticChart.setNewChartUiDebugFlag(true);
+        });
+
+        runTests(testData);
+      });
+    }
+  });
+}
diff --git a/x-pack/test/functional/apps/ml/data_visualizer/index.ts b/x-pack/test/functional/apps/ml/data_visualizer/index.ts
index 13ed76a002ca..2145267edcc3 100644
--- a/x-pack/test/functional/apps/ml/data_visualizer/index.ts
+++ b/x-pack/test/functional/apps/ml/data_visualizer/index.ts
@@ -40,5 +40,6 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./index_data_visualizer_actions_panel'));
     loadTestFile(require.resolve('./index_data_visualizer_data_view_management'));
     loadTestFile(require.resolve('./file_data_visualizer'));
+    loadTestFile(require.resolve('./data_drift'));
   });
 }
diff --git a/x-pack/test/functional/services/ml/api.ts b/x-pack/test/functional/services/ml/api.ts
index 2536ec0bc564..d8dad778fa03 100644
--- a/x-pack/test/functional/services/ml/api.ts
+++ b/x-pack/test/functional/services/ml/api.ts
@@ -223,7 +223,8 @@ export function MachineLearningAPIProvider({ getService }: FtrProviderContext) {
 
     async createIndex(
       indices: string,
-      mappings?: Record<string, estypes.MappingTypeMapping> | estypes.MappingTypeMapping
+      mappings?: Record<string, estypes.MappingTypeMapping> | estypes.MappingTypeMapping,
+      settings?: Record<string, estypes.IndicesIndexSettings> | estypes.IndicesIndexSettings
     ) {
       log.debug(`Creating indices: '${indices}'...`);
       if ((await es.indices.exists({ index: indices, allow_no_indices: false })) === true) {
@@ -233,7 +234,10 @@ export function MachineLearningAPIProvider({ getService }: FtrProviderContext) {
 
       const body = await es.indices.create({
         index: indices,
-        ...(mappings ? { body: { mappings } } : {}),
+        body: {
+          ...(mappings ? { mappings } : {}),
+          ...(settings ? { settings } : {}),
+        },
       });
       expect(body)
         .to.have.property('acknowledged')
@@ -1494,7 +1498,7 @@ export function MachineLearningAPIProvider({ getService }: FtrProviderContext) {
         });
       this.assertResponseStatusCode(200, status, ingestPipeline);
 
-      log.debug('> Ingest pipeline crated');
+      log.debug('> Ingest pipeline created');
       return ingestPipeline;
     },
 
@@ -1503,7 +1507,8 @@ export function MachineLearningAPIProvider({ getService }: FtrProviderContext) {
       const { body, status } = await esSupertest.delete(
         `/_ingest/pipeline/${usePrefix ? 'pipeline_' : ''}${modelId}`
       );
-      this.assertResponseStatusCode(200, status, body);
+      // @todo
+      // this.assertResponseStatusCode(200, status, body);
 
       log.debug('> Ingest pipeline deleted');
     },
diff --git a/x-pack/test/functional/services/ml/data_drift.ts b/x-pack/test/functional/services/ml/data_drift.ts
new file mode 100644
index 000000000000..2e0eec6f0e10
--- /dev/null
+++ b/x-pack/test/functional/services/ml/data_drift.ts
@@ -0,0 +1,214 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export function MachineLearningDataDriftProvider({
+  getService,
+  getPageObjects,
+}: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const PageObjects = getPageObjects(['discover', 'header']);
+  const elasticChart = getService('elasticChart');
+  const browser = getService('browser');
+
+  type RandomSamplerOption =
+    | 'dvRandomSamplerOptionOnAutomatic'
+    | 'dvRandomSamplerOptionOnManual'
+    | 'dvRandomSamplerOptionOff';
+
+  return {
+    getDataTestSubject(testSubject: string, id?: string) {
+      if (!id) return testSubject;
+      return `${testSubject}-${id}`;
+    },
+
+    async assertTimeRangeSelectorSectionExists() {
+      await testSubjects.existOrFail('dataComparisonTimeRangeSelectorSection');
+    },
+
+    async assertTotalDocumentCount(selector: string, expectedFormattedTotalDocCount: string) {
+      await retry.tryForTime(5000, async () => {
+        const docCount = await testSubjects.getVisibleText(selector);
+        expect(docCount).to.eql(
+          expectedFormattedTotalDocCount,
+          `Expected total document count to be '${expectedFormattedTotalDocCount}' (got '${docCount}')`
+        );
+      });
+    },
+
+    async assertRandomSamplingOptionsButtonExists(id: string) {
+      await testSubjects.existOrFail(
+        this.getDataTestSubject('aiopsRandomSamplerOptionsButton', id)
+      );
+    },
+
+    async assertNoWindowParametersEmptyPromptExists() {
+      await retry.tryForTime(5000, async () => {
+        await testSubjects.existOrFail('dataDriftNoWindowParametersEmptyPrompt');
+      });
+    },
+
+    async assertRandomSamplingOption(
+      id: string,
+      expectedOption: RandomSamplerOption,
+      expectedProbability?: number
+    ) {
+      await retry.tryForTime(20000, async () => {
+        await browser.pressKeys(browser.keys.ESCAPE);
+        await testSubjects.clickWhenNotDisabled(
+          this.getDataTestSubject('aiopsRandomSamplerOptionsButton', id)
+        );
+        await testSubjects.existOrFail(
+          this.getDataTestSubject('aiopsRandomSamplerOptionsPopover', id)
+        );
+
+        if (expectedOption === 'dvRandomSamplerOptionOff') {
+          await testSubjects.existOrFail('dvRandomSamplerOptionOff', { timeout: 1000 });
+          await testSubjects.missingOrFail('dvRandomSamplerProbabilityRange', { timeout: 1000 });
+          await testSubjects.missingOrFail('dvRandomSamplerProbabilityUsedMsg', {
+            timeout: 1000,
+          });
+        }
+
+        if (expectedOption === 'dvRandomSamplerOptionOnManual') {
+          await testSubjects.existOrFail('dvRandomSamplerOptionOnManual', { timeout: 1000 });
+          await testSubjects.existOrFail('dvRandomSamplerProbabilityRange', { timeout: 1000 });
+          if (expectedProbability !== undefined) {
+            const probability = await testSubjects.getAttribute(
+              'dvRandomSamplerProbabilityRange',
+              'value'
+            );
+            expect(probability).to.eql(
+              `${expectedProbability}`,
+              `Expected probability to be ${expectedProbability}, got ${probability}`
+            );
+          }
+        }
+
+        if (expectedOption === 'dvRandomSamplerOptionOnAutomatic') {
+          await testSubjects.existOrFail('dvRandomSamplerOptionOnAutomatic', { timeout: 1000 });
+          await testSubjects.existOrFail('dvRandomSamplerProbabilityUsedMsg', {
+            timeout: 1000,
+          });
+
+          if (expectedProbability !== undefined) {
+            const probabilityText = await testSubjects.getVisibleText(
+              'dvRandomSamplerProbabilityUsedMsg'
+            );
+            expect(probabilityText).to.contain(
+              `${expectedProbability}`,
+              `Expected probability text to contain ${expectedProbability}, got ${probabilityText}`
+            );
+          }
+        }
+      });
+    },
+
+    async setRandomSamplingOption(id: string, option: RandomSamplerOption) {
+      await retry.tryForTime(20000, async () => {
+        // escape popover
+        await browser.pressKeys(browser.keys.ESCAPE);
+        await this.assertRandomSamplingOptionsButtonExists(id);
+        await testSubjects.clickWhenNotDisabled(
+          this.getDataTestSubject('aiopsRandomSamplerOptionsButton', id)
+        );
+        await testSubjects.existOrFail(
+          this.getDataTestSubject('aiopsRandomSamplerOptionsPopover', id),
+          { timeout: 1000 }
+        );
+
+        await testSubjects.clickWhenNotDisabled(
+          this.getDataTestSubject('aiopsRandomSamplerOptionsSelect', id)
+        );
+
+        await testSubjects.existOrFail('dvRandomSamplerOptionOff', { timeout: 1000 });
+        await testSubjects.existOrFail('dvRandomSamplerOptionOnManual', { timeout: 1000 });
+        await testSubjects.existOrFail('dvRandomSamplerOptionOnAutomatic', { timeout: 1000 });
+
+        await testSubjects.click(option);
+
+        await this.assertRandomSamplingOption(id, option);
+      });
+    },
+
+    async clickUseFullDataButton() {
+      await retry.tryForTime(30 * 1000, async () => {
+        await testSubjects.clickWhenNotDisabledWithoutRetry('mlDatePickerButtonUseFullData');
+        await testSubjects.clickWhenNotDisabledWithoutRetry('superDatePickerApplyTimeButton');
+        await PageObjects.header.waitUntilLoadingHasFinished();
+      });
+    },
+
+    async assertPrimarySearchBarExists() {
+      await retry.tryForTime(5000, async () => {
+        await testSubjects.existOrFail(`dataVisualizerQueryInput`);
+      });
+    },
+    async assertDocCountContent(id: string) {
+      await retry.tryForTime(5000, async () => {
+        await testSubjects.existOrFail(this.getDataTestSubject(`dataDriftTotalDocCountHeader`, id));
+        await testSubjects.existOrFail(this.getDataTestSubject(`dataDriftDocCountChart`, id));
+
+        const parent = await testSubjects.find(
+          this.getDataTestSubject(`dataDriftTotalDocCountHeader`, id)
+        );
+        const subQueryBar = await testSubjects.findDescendant(`globalQueryBar`, parent);
+        expect(subQueryBar).not.eql(
+          undefined,
+          `Expected secondary query bar exists inside ${this.getDataTestSubject(
+            `dataDriftTotalDocCountHeader`,
+            id
+          )}, got ${subQueryBar}`
+        );
+      });
+    },
+
+    async assertReferenceDocCountContent() {
+      await this.assertDocCountContent('Reference');
+    },
+
+    async assertComparisonDocCountContent() {
+      await this.assertDocCountContent('Comparison');
+    },
+
+    async assertHistogramBrushesExist() {
+      await retry.tryForTime(5000, async () => {
+        await testSubjects.existOrFail(`aiopsHistogramBrushes`);
+        // As part of the interface for the histogram brushes, the button to clear the selection should be present
+        await testSubjects.existOrFail(`aiopsClearSelectionBadge`);
+      });
+    },
+
+    async clickDocumentCountChart(dataTestSubj: string, chartClickCoordinates: [number, number]) {
+      await elasticChart.waitForRenderComplete();
+      const el = await elasticChart.getCanvas(dataTestSubj);
+
+      await browser
+        .getActions()
+        .move({ x: chartClickCoordinates[0], y: chartClickCoordinates[1], origin: el._webElement })
+        .click()
+        .perform();
+
+      await this.assertHistogramBrushesExist();
+    },
+
+    async assertDataDriftTableExists() {
+      await testSubjects.existOrFail(`mlDataDriftTable`);
+    },
+
+    async runAnalysis() {
+      await retry.tryForTime(5000, async () => {
+        await testSubjects.click(`aiopsRerunAnalysisButton`);
+        // As part of the interface for the histogram brushes, the button to clear the selection should be present
+        await this.assertDataDriftTableExists();
+      });
+    },
+  };
+}
diff --git a/x-pack/test/functional/services/ml/index.ts b/x-pack/test/functional/services/ml/index.ts
index ba36b3be3858..19f4233ca154 100644
--- a/x-pack/test/functional/services/ml/index.ts
+++ b/x-pack/test/functional/services/ml/index.ts
@@ -65,7 +65,7 @@ import { AnomalyChartsProvider } from './anomaly_charts';
 import { NotificationsProvider } from './notifications';
 import { MlTableServiceProvider } from './common_table_service';
 import { MachineLearningFieldStatsFlyoutProvider } from './field_stats_flyout';
-
+import { MachineLearningDataDriftProvider } from './data_drift';
 export function MachineLearningProvider(context: FtrProviderContext) {
   const commonAPI = MachineLearningCommonAPIProvider(context);
   const commonUI = MachineLearningCommonUIProvider(context);
@@ -85,6 +85,8 @@ export function MachineLearningProvider(context: FtrProviderContext) {
     dashboardJobSelectionTable
   );
 
+  const dataDrift = MachineLearningDataDriftProvider(context);
+
   const dataFrameAnalytics = MachineLearningDataFrameAnalyticsProvider(context, api);
   const dataFrameAnalyticsCreation = MachineLearningDataFrameAnalyticsCreationProvider(
     context,
@@ -180,6 +182,7 @@ export function MachineLearningProvider(context: FtrProviderContext) {
     customUrls,
     dashboardJobSelectionTable,
     dashboardEmbeddables,
+    dataDrift,
     dataFrameAnalytics,
     dataFrameAnalyticsCreation,
     dataFrameAnalyticsEdit,
diff --git a/x-pack/test/functional/services/ml/job_source_selection.ts b/x-pack/test/functional/services/ml/job_source_selection.ts
index b43757cd7105..4a58be75bc37 100644
--- a/x-pack/test/functional/services/ml/job_source_selection.ts
+++ b/x-pack/test/functional/services/ml/job_source_selection.ts
@@ -39,6 +39,10 @@ export function MachineLearningJobSourceSelectionProvider({ getService }: FtrPro
       await this.selectSource(sourceName, 'mlAnalyticsCreationContainer');
     },
 
+    async selectSourceForDataDrift(sourceName: string) {
+      await this.selectSource(sourceName, 'mlPageDataDrift');
+    },
+
     async selectSourceForIndexBasedDataVisualizer(sourceName: string) {
       await this.selectSource(sourceName, 'dataVisualizerIndexPage');
     },
diff --git a/x-pack/test/functional/services/ml/navigation.ts b/x-pack/test/functional/services/ml/navigation.ts
index bc05cfd6a9bc..e0136a7c311a 100644
--- a/x-pack/test/functional/services/ml/navigation.ts
+++ b/x-pack/test/functional/services/ml/navigation.ts
@@ -200,6 +200,10 @@ export function MachineLearningNavigationProvider({
       await this.navigateToArea('~mlMainTab & ~dataVisualizer', 'mlPageDataVisualizerSelector');
     },
 
+    async navigateToDataDrift() {
+      await this.navigateToArea('~mlMainTab & ~dataDrift', 'mlPageDataDrift');
+    },
+
     async navigateToJobManagement() {
       await this.navigateToAnomalyDetection();
     },

From 6e97ef8fc7c73985610df26b40358da9db9e04d4 Mon Sep 17 00:00:00 2001
From: Brad White <Ikuni17@users.noreply.github.com>
Date: Tue, 26 Sep 2023 16:38:22 -0600
Subject: [PATCH 3/5] Pick EUI upgrade from #166813 (#167358)

## Summary

We're breaking https://github.com/elastic/kibana/pull/166813 up into
smaller PRs in the interest of getting PRs through sooner for type
fixes. These are the changes related to syncing EUI deps.
---
 package.json |  4 ++--
 yarn.lock    | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 90d9f8aa5d2d..e908c931fce5 100644
--- a/package.json
+++ b/package.json
@@ -938,7 +938,7 @@
     "maplibre-gl": "3.1.0",
     "markdown-it": "^12.3.2",
     "md5": "^2.1.0",
-    "mdast-util-to-hast": "10.0.1",
+    "mdast-util-to-hast": "10.2.0",
     "memoize-one": "^6.0.0",
     "mime": "^2.4.4",
     "mime-types": "^2.1.27",
@@ -1042,7 +1042,7 @@
     "type-detect": "^4.0.8",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.2",
-    "unified": "^9.2.1",
+    "unified": "9.2.2",
     "use-resize-observer": "^9.1.0",
     "usng.js": "^0.4.5",
     "utility-types": "^3.10.0",
diff --git a/yarn.lock b/yarn.lock
index 6a4f80236417..ac82dfdfe47d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21736,7 +21736,7 @@ mdast-util-to-hast@10.0.1, mdast-util-to-hast@^10.0.0:
     unist-util-position "^3.0.0"
     unist-util-visit "^2.0.0"
 
-mdast-util-to-hast@^10.2.0:
+mdast-util-to-hast@10.2.0, mdast-util-to-hast@^10.2.0:
   version "10.2.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.2.0.tgz#61875526a017d8857b71abc9333942700b2d3604"
   integrity sha512-JoPBfJ3gBnHZ18icCwHR50orC9kNH81tiR1gs01D8Q5YpV6adHNO9nKNuFBCJQ941/32PT1a63UF/DitmS3amQ==
@@ -29483,10 +29483,10 @@ unified@9.2.0:
     trough "^1.0.0"
     vfile "^4.0.0"
 
-unified@^9.0.0, unified@^9.2.1:
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.1.tgz#ae18d5674c114021bfdbdf73865ca60f410215a3"
-  integrity sha512-juWjuI8Z4xFg8pJbnEZ41b5xjGUWGHqXALmBZ3FC3WX0PIx1CZBIIJ6mXbYMcf6Yw4Fi0rFUTA1cdz/BglbOhA==
+unified@9.2.2, unified@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"
+  integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
@@ -29495,10 +29495,10 @@ unified@^9.0.0, unified@^9.2.1:
     trough "^1.0.0"
     vfile "^4.0.0"
 
-unified@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"
-  integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
+unified@^9.0.0:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.1.tgz#ae18d5674c114021bfdbdf73865ca60f410215a3"
+  integrity sha512-juWjuI8Z4xFg8pJbnEZ41b5xjGUWGHqXALmBZ3FC3WX0PIx1CZBIIJ6mXbYMcf6Yw4Fi0rFUTA1cdz/BglbOhA==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"

From dc3d59811508060c1a6bada034face681b64fc89 Mon Sep 17 00:00:00 2001
From: Brad White <Ikuni17@users.noreply.github.com>
Date: Tue, 26 Sep 2023 16:41:36 -0600
Subject: [PATCH 4/5] Pick KBN presentation from #166813 (#167361)

## Summary

We're breaking https://github.com/elastic/kibana/pull/166813 up into
smaller PRs in the interest of getting PRs through sooner for type
fixes. These are the changes for Kibana Presenation.
---
 test/functional/apps/dashboard/group3/copy_panel_to.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/functional/apps/dashboard/group3/copy_panel_to.ts b/test/functional/apps/dashboard/group3/copy_panel_to.ts
index dbafa5d68b5e..3c6fa6d790ea 100644
--- a/test/functional/apps/dashboard/group3/copy_panel_to.ts
+++ b/test/functional/apps/dashboard/group3/copy_panel_to.ts
@@ -14,7 +14,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardPanelActions = getService('dashboardPanelActions');
   const testSubjects = getService('testSubjects');
   const kibanaServer = getService('kibanaServer');
-  const find = getService('find');
 
   const PageObjects = getPageObjects([
     'header',

From ed8225f7bcb9f8d16b2241c8de26cd8103fcb942 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 26 Sep 2023 18:46:35 -0400
Subject: [PATCH 5/5] skip failing test suite (#167071)

---
 x-pack/test/functional/apps/infra/home_page.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/test/functional/apps/infra/home_page.ts b/x-pack/test/functional/apps/infra/home_page.ts
index d5d2ad2cb8b8..a6dc2754de35 100644
--- a/x-pack/test/functional/apps/infra/home_page.ts
+++ b/x-pack/test/functional/apps/infra/home_page.ts
@@ -30,7 +30,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       return !!currentUrl.match(path);
     });
 
-  describe('Home page', function () {
+  // Failing: See https://github.com/elastic/kibana/issues/167071
+  describe.skip('Home page', function () {
     this.tags('includeFirefox');
     before(async () => {
       await kibanaServer.savedObjects.cleanStandardList();