diff --git a/x-pack/plugins/ml/public/application/app.tsx b/x-pack/plugins/ml/public/application/app.tsx
index d2bc17ab210b9..67ddcbdca2e2b 100644
--- a/x-pack/plugins/ml/public/application/app.tsx
+++ b/x-pack/plugins/ml/public/application/app.tsx
@@ -28,6 +28,8 @@ import type { PageDependencies } from './routing/router';
 import { EnabledFeaturesContextProvider, MlServerInfoContextProvider } from './contexts/ml';
 import type { StartServices } from './contexts/kibana';
 import { getMlGlobalServices } from './util/get_services';
+import type { MlResultsService } from './services/results_service';
+import type { TimeSeriesExplorerService } from './util/time_series_explorer_service';
 
 export type MlDependencies = Omit<
   MlSetupDependencies,
@@ -51,7 +53,10 @@ export interface MlServicesContext {
   mlServices: MlGlobalServices;
 }
 
-export type MlGlobalServices = ReturnType<typeof getMlGlobalServices>;
+export type MlGlobalServices = ReturnType<typeof getMlGlobalServices> & {
+  mlResultsService?: MlResultsService;
+  mlTimeSeriesExplorerService?: TimeSeriesExplorerService;
+};
 
 const App: FC<AppProps> = ({
   coreStart,
diff --git a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js
index 4429a3022122e..82d20e0bb87e4 100644
--- a/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js
+++ b/x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.js
@@ -287,6 +287,6 @@ AnomaliesTableInternal.propTypes = {
   influencerFilter: PropTypes.func,
   tableState: PropTypes.object.isRequired,
   updateTableState: PropTypes.func.isRequired,
-  sourceIndicesWithGeoFields: PropTypes.object.isRequired,
+  sourceIndicesWithGeoFields: PropTypes.object,
   selectedJobs: PropTypes.array.isRequired,
 };
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx
index c989bb6ebd38d..968f3df1844be 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx
@@ -13,11 +13,11 @@ import { FormattedMessage } from '@kbn/i18n-react';
 interface Props {
   isDisabled: boolean;
   onClick: () => void;
-  mode: 'full' | 'empty';
+  emptyMode: boolean;
 }
 
-export const ForecastButton: FC<Props> = ({ isDisabled, onClick, mode = 'full' }) => {
-  const Button = mode === 'full' ? EuiButton : EuiButtonEmpty;
+export const ForecastButton: FC<Props> = ({ isDisabled, onClick, emptyMode }) => {
+  const Button = emptyMode ? EuiButtonEmpty : EuiButton;
   return (
     <Button
       onClick={onClick}
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasting_modal.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasting_modal.js
index 2bd5192fb870f..d2894d0b233e8 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasting_modal.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecasting_modal.js
@@ -60,7 +60,7 @@ function getDefaultState() {
 
 export class ForecastingModal extends Component {
   static propTypes = {
-    buttonMode: PropTypes.string,
+    emptyMode: PropTypes.bool,
     isDisabled: PropTypes.bool,
     job: PropTypes.object,
     jobState: PropTypes.string,
@@ -70,6 +70,7 @@ export class ForecastingModal extends Component {
     entities: PropTypes.array,
     setForecastId: PropTypes.func,
     selectedForecastId: PropTypes.string,
+    onForecastComplete: PropTypes.func,
   };
 
   constructor(props) {
@@ -534,7 +535,7 @@ export class ForecastingModal extends Component {
       <ForecastButton
         onClick={this.openModal}
         isDisabled={isForecastingDisabled}
-        mode={this.props.buttonMode}
+        emptyMode={this.props.emptyMode}
       />
     );
 
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index f39bab106c643..9ce156aa8f47f 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -153,7 +153,7 @@ class TimeseriesChartIntl extends Component {
     zoomToFocusLoaded: PropTypes.object,
     tooltipService: PropTypes.object.isRequired,
     tableData: PropTypes.object,
-    sourceIndicesWithGeoFields: PropTypes.object.isRequired,
+    sourceIndicesWithGeoFields: PropTypes.object,
   };
 
   static contextType = context;
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_annotations_table.tsx b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_annotations_table.tsx
new file mode 100644
index 0000000000000..eb3d34da15cee
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_annotations_table.tsx
@@ -0,0 +1,100 @@
+/*
+ * 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 type { FC } from 'react';
+import React from 'react';
+import { EuiAccordion, EuiBadge, EuiCallOut, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { AnnotationsTable } from '../../components/annotations/annotations_table';
+
+interface Props {
+  chartDetails: any;
+  detectors: any;
+  focusAnnotationData: any;
+  focusAnnotationError: any;
+  selectedDetectorIndex: number;
+  selectedJobId: string;
+}
+
+export const TimeSeriesExplorerAnnotationsTable: FC<Props> = ({
+  chartDetails,
+  detectors,
+  focusAnnotationData,
+  focusAnnotationError,
+  selectedDetectorIndex,
+  selectedJobId,
+}) => {
+  return (
+    <>
+      {focusAnnotationError !== undefined && (
+        <>
+          <EuiTitle data-test-subj="mlAnomalyExplorerAnnotations error" size={'xs'}>
+            <h2>
+              <FormattedMessage
+                id="xpack.ml.timeSeriesExplorer.annotationsErrorTitle"
+                defaultMessage="Annotations"
+              />
+            </h2>
+          </EuiTitle>
+          <EuiPanel>
+            <EuiCallOut
+              title={i18n.translate('xpack.ml.timeSeriesExplorer.annotationsErrorCallOutTitle', {
+                defaultMessage: 'An error occurred loading annotations:',
+              })}
+              color="danger"
+              iconType="warning"
+            >
+              <p>{focusAnnotationError}</p>
+            </EuiCallOut>
+          </EuiPanel>
+          <EuiSpacer size="m" />
+        </>
+      )}
+      {focusAnnotationData && focusAnnotationData.length > 0 && (
+        <>
+          <EuiAccordion
+            id={'mlAnnotationsAccordion'}
+            buttonContent={
+              <EuiTitle size={'xs'}>
+                <h2>
+                  <FormattedMessage
+                    id="xpack.ml.timeSeriesExplorer.annotationsTitle"
+                    defaultMessage="Annotations {badge}"
+                    values={{
+                      badge: (
+                        <EuiBadge color={'hollow'}>
+                          <FormattedMessage
+                            id="xpack.ml.explorer.annotationsTitleTotalCount"
+                            defaultMessage="Total: {count}"
+                            values={{ count: focusAnnotationData.length }}
+                          />
+                        </EuiBadge>
+                      ),
+                    }}
+                  />
+                </h2>
+              </EuiTitle>
+            }
+            data-test-subj="mlAnomalyExplorerAnnotations loaded"
+          >
+            <AnnotationsTable
+              chartDetails={chartDetails}
+              detectorIndex={selectedDetectorIndex}
+              detectors={detectors}
+              jobIds={[selectedJobId]}
+              annotations={focusAnnotationData}
+              isSingleMetricViewerLinkVisible={false}
+              isNumberBadgeVisible={true}
+            />
+          </EuiAccordion>
+          <EuiSpacer size="m" />
+        </>
+      )}
+    </>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
index ae9b7fa9146ad..9d20a70c79f04 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -9,84 +9,19 @@
  * React component for rendering Single Metric Viewer.
  */
 
-import { find, get, has, isEqual } from 'lodash';
-import moment from 'moment-timezone';
-import {
-  Subject,
-  Subscription,
-  forkJoin,
-  map,
-  debounceTime,
-  switchMap,
-  tap,
-  withLatestFrom,
-} from 'rxjs';
 import PropTypes from 'prop-types';
-import React, { createRef, Fragment } from 'react';
-
-import {
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiSpacer,
-  EuiPanel,
-  EuiTitle,
-  EuiAccordion,
-  EuiBadge,
-} from '@elastic/eui';
+import React, { createRef } from 'react';
 
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { context } from '@kbn/kibana-react-plugin/public';
-import { getBoundsRoundedToInterval } from '@kbn/ml-time-buckets';
 import { ResizeChecker } from '@kbn/kibana-utils-plugin/public';
-
-import { ANOMALIES_TABLE_DEFAULT_QUERY_SIZE } from '../../../common/constants/search';
-import {
-  isModelPlotEnabled,
-  isModelPlotChartableForDetector,
-  isSourceDataChartableForDetector,
-  isTimeSeriesViewJob,
-  mlFunctionToESAggregation,
-} from '../../../common/util/job_utils';
-
-import { AnnotationFlyout } from '../components/annotations/annotation_flyout';
-import { AnnotationsTable } from '../components/annotations/annotations_table';
-import { AnomaliesTable } from '../components/anomalies_table/anomalies_table';
-import { LoadingIndicator } from '../components/loading_indicator/loading_indicator';
-import { SelectInterval } from '../components/controls/select_interval/select_interval';
-import { SelectSeverity } from '../components/controls/select_severity/select_severity';
-import { forecastServiceFactory } from '../services/forecast_service';
-import { timeSeriesExplorerServiceFactory } from '../util/time_series_explorer_service';
-import { mlJobServiceFactory } from '../services/job_service';
-import { mlResultsServiceProvider } from '../services/results_service';
-import { toastNotificationServiceProvider } from '../services/toast_notification_service';
-
-import { ForecastingModal } from './components/forecasting_modal/forecasting_modal';
-import { TimeseriesexplorerNoChartData } from './components/timeseriesexplorer_no_chart_data';
 import { TimeSeriesExplorerPage } from './timeseriesexplorer_page';
-import { SingleMetricViewerTitle } from './components/timeseriesexplorer_title';
 
-import {
-  APP_STATE_ACTION,
-  CHARTS_POINT_TARGET,
-  TIME_FIELD_NAME,
-} from './timeseriesexplorer_constants';
-import { timeSeriesSearchServiceFactory } from './timeseriesexplorer_utils/time_series_search_service';
+import { mlJobServiceFactory } from '../services/job_service';
 import { getTimeseriesexplorerDefaultState } from './timeseriesexplorer_utils';
 import { ANOMALY_DETECTION_DEFAULT_TIME_RANGE } from '../../../common/constants/settings';
-import { getControlsForDetector } from './get_controls_for_detector';
-import { SeriesControls } from './components/series_controls';
-import { TimeSeriesChartWithTooltips } from './components/timeseries_chart/timeseries_chart_with_tooltip';
-import { aggregationTypeTransform } from '@kbn/ml-anomaly-utils';
-import { isMetricDetector } from './get_function_description';
-import { getViewableDetectors } from './timeseriesexplorer_utils/get_viewable_detectors';
-import { TimeseriesexplorerChartDataError } from './components/timeseriesexplorer_chart_data_error';
 import { ExplorerNoJobsSelected } from '../explorer/components';
-import { getDataViewsAndIndicesWithGeoFields } from '../explorer/explorer_utils';
-import { indexServiceFactory } from '../util/index_service';
-import { TimeSeriesExplorerControls } from './components/timeseriesexplorer_controls';
+import { TimeSeriesExplorerEmbeddableChart } from './timeseriesexplorer_embeddable_chart';
 
 const containerPadding = 34;
 
@@ -109,635 +44,25 @@ export class TimeSeriesExplorer extends React.Component {
     zoom: PropTypes.object,
   };
 
-  state = getTimeseriesexplorerDefaultState();
-
-  subscriptions = new Subscription();
-
-  resizeRef = createRef();
-  resizeChecker = undefined;
-  resizeHandler = () => {
-    this.setState({
-      svgWidth:
-        this.resizeRef.current !== null ? this.resizeRef.current.offsetWidth - containerPadding : 0,
-    });
-  };
-  unmounted = false;
-
-  /**
-   * Subject for listening brush time range selection.
-   */
-  contextChart$ = new Subject();
-
-  /**
-   * Access ML services in react context.
-   */
-  static contextType = context;
-
-  dataViewsService;
-  toastNotificationService;
-  mlApi;
-  mlForecastService;
-  mlIndexUtils;
   mlJobService;
-  mlResultsService;
-  mlTimeSeriesExplorer;
-  mlTimeSeriesSearchService;
 
   constructor(props, constructorContext) {
     super(props, constructorContext);
-    this.dataViewsService = constructorContext.services.data.dataViews;
-    this.toastNotificationService = toastNotificationServiceProvider(
-      constructorContext.services.notifications.toasts
-    );
-    this.mlApi = constructorContext.services.mlServices.mlApi;
-    this.mlForecastService = forecastServiceFactory(this.mlApi);
-    this.mlIndexUtils = indexServiceFactory(this.dataViewsService);
-    this.mlJobService = mlJobServiceFactory(this.mlApi);
-    this.mlResultsService = mlResultsServiceProvider(this.mlApi);
-    this.mlTimeSeriesExplorer = timeSeriesExplorerServiceFactory(
-      constructorContext.services.uiSettings,
-      this.mlApi,
-      this.mlResultsService
-    );
-    this.mlTimeSeriesSearchService = timeSeriesSearchServiceFactory(
-      this.mlResultsService,
-      this.mlApi
-    );
+    this.mlJobService = mlJobServiceFactory(constructorContext.services.mlServices.mlApi);
   }
 
-  /**
-   * Returns field names that don't have a selection yet.
-   */
-  getFieldNamesWithEmptyValues = () => {
-    const latestEntityControls = this.getControlsForDetector();
-    return latestEntityControls
-      .filter(({ fieldValue }) => fieldValue === null)
-      .map(({ fieldName }) => fieldName);
-  };
-
-  /**
-   * Checks if all entity control dropdowns have a selection.
-   */
-  arePartitioningFieldsProvided = () => {
-    const fieldNamesWithEmptyValues = this.getFieldNamesWithEmptyValues();
-    return fieldNamesWithEmptyValues.length === 0;
-  };
-
-  toggleShowAnnotationsHandler = () => {
-    this.setState((prevState) => ({
-      showAnnotations: !prevState.showAnnotations,
-    }));
-  };
-
-  toggleShowForecastHandler = () => {
-    this.setState((prevState) => ({
-      showForecast: !prevState.showForecast,
-    }));
-  };
+  state = getTimeseriesexplorerDefaultState();
 
-  toggleShowModelBoundsHandler = () => {
+  resizeRef = createRef();
+  resizeChecker = undefined;
+  resizeHandler = () => {
     this.setState({
-      showModelBounds: !this.state.showModelBounds,
+      svgWidth:
+        this.resizeRef.current !== null ? this.resizeRef.current.offsetWidth - containerPadding : 0,
     });
   };
 
-  setFunctionDescription = (selectedFuction) => {
-    this.props.appStateHandler(APP_STATE_ACTION.SET_FUNCTION_DESCRIPTION, selectedFuction);
-  };
-
-  previousChartProps = {};
-  previousShowAnnotations = undefined;
-  previousShowForecast = undefined;
-  previousShowModelBounds = undefined;
-
-  tableFilter = (field, value, operator) => {
-    const entities = this.getControlsForDetector();
-    const entity = entities.find(({ fieldName }) => fieldName === field);
-
-    if (entity === undefined) {
-      return;
-    }
-
-    const { appStateHandler } = this.props;
-
-    let resultValue = '';
-    if (operator === '+' && entity.fieldValue !== value) {
-      resultValue = value;
-    } else if (operator === '-' && entity.fieldValue === value) {
-      resultValue = null;
-    } else {
-      return;
-    }
-
-    const resultEntities = {
-      ...entities.reduce((appStateEntities, appStateEntity) => {
-        appStateEntities[appStateEntity.fieldName] = appStateEntity.fieldValue;
-        return appStateEntities;
-      }, {}),
-      [entity.fieldName]: resultValue,
-    };
-
-    appStateHandler(APP_STATE_ACTION.SET_ENTITIES, resultEntities);
-  };
-
-  contextChartSelectedInitCallDone = false;
-
-  getFocusAggregationInterval(selection) {
-    const { selectedJobId } = this.props;
-    const selectedJob = this.mlJobService.getJob(selectedJobId);
-
-    // Calculate the aggregation interval for the focus chart.
-    const bounds = { min: moment(selection.from), max: moment(selection.to) };
-
-    return this.mlTimeSeriesExplorer.calculateAggregationInterval(
-      bounds,
-      CHARTS_POINT_TARGET,
-      selectedJob
-    );
-  }
-
-  /**
-   * Gets focus data for the current component state
-   */
-  getFocusData(selection) {
-    const { selectedJobId, selectedForecastId, selectedDetectorIndex, functionDescription } =
-      this.props;
-    const { modelPlotEnabled } = this.state;
-    const selectedJob = this.mlJobService.getJob(selectedJobId);
-    if (isMetricDetector(selectedJob, selectedDetectorIndex) && functionDescription === undefined) {
-      return;
-    }
-    const entityControls = this.getControlsForDetector();
-
-    // Calculate the aggregation interval for the focus chart.
-    const bounds = { min: moment(selection.from), max: moment(selection.to) };
-    const focusAggregationInterval = this.getFocusAggregationInterval(selection);
-
-    // Ensure the search bounds align to the bucketing interval so that the first and last buckets are complete.
-    // For sum or count detectors, short buckets would hold smaller values, and model bounds would also be affected
-    // to some extent with all detector functions if not searching complete buckets.
-    const searchBounds = getBoundsRoundedToInterval(bounds, focusAggregationInterval, false);
-
-    return this.mlTimeSeriesExplorer.getFocusData(
-      this.getCriteriaFields(selectedDetectorIndex, entityControls),
-      selectedDetectorIndex,
-      focusAggregationInterval,
-      selectedForecastId,
-      modelPlotEnabled,
-      entityControls.filter((entity) => entity.fieldValue !== null),
-      searchBounds,
-      selectedJob,
-      functionDescription,
-      TIME_FIELD_NAME
-    );
-  }
-
-  contextChartSelected = (selection) => {
-    const zoomState = {
-      from: selection.from.toISOString(),
-      to: selection.to.toISOString(),
-    };
-
-    if (
-      isEqual(this.props.zoom, zoomState) &&
-      this.state.focusChartData !== undefined &&
-      this.props.previousRefresh === this.props.lastRefresh
-    ) {
-      return;
-    }
-
-    this.contextChart$.next(selection);
-    this.props.appStateHandler(APP_STATE_ACTION.SET_ZOOM, zoomState);
-  };
-
-  loadAnomaliesTableData = (earliestMs, latestMs) => {
-    const {
-      dateFormatTz,
-      selectedDetectorIndex,
-      selectedJobId,
-      tableInterval,
-      tableSeverity,
-      functionDescription,
-    } = this.props;
-    const mlJobService = this.mlJobService;
-    const selectedJob = mlJobService.getJob(selectedJobId);
-    const entityControls = this.getControlsForDetector();
-
-    const mlApi = this.mlApi;
-    return mlApi.results
-      .getAnomaliesTableData(
-        [selectedJob.job_id],
-        this.getCriteriaFields(selectedDetectorIndex, entityControls),
-        [],
-        tableInterval,
-        tableSeverity,
-        earliestMs,
-        latestMs,
-        dateFormatTz,
-        ANOMALIES_TABLE_DEFAULT_QUERY_SIZE,
-        undefined,
-        undefined,
-        functionDescription
-      )
-      .pipe(
-        map((resp) => {
-          const anomalies = resp.anomalies;
-          const detectorsByJob = mlJobService.detectorsByJob;
-          anomalies.forEach((anomaly) => {
-            // Add a detector property to each anomaly.
-            // Default to functionDescription if no description available.
-            // TODO - when job_service is moved server_side, move this to server endpoint.
-            const jobId = anomaly.jobId;
-            const detector = get(detectorsByJob, [jobId, anomaly.detectorIndex]);
-            anomaly.detector = get(
-              detector,
-              ['detector_description'],
-              anomaly.source.function_description
-            );
-
-            // For detectors with rules, add a property with the rule count.
-            const customRules = detector.custom_rules;
-            if (customRules !== undefined) {
-              anomaly.rulesLength = customRules.length;
-            }
-
-            // Add properties used for building the links menu.
-            // TODO - when job_service is moved server_side, move this to server endpoint.
-            if (has(mlJobService.customUrlsByJob, jobId)) {
-              anomaly.customUrls = mlJobService.customUrlsByJob[jobId];
-            }
-          });
-
-          return {
-            tableData: {
-              anomalies,
-              interval: resp.interval,
-              examplesByJobId: resp.examplesByJobId,
-              showViewSeriesLink: false,
-            },
-          };
-        })
-      );
-  };
-
-  setForecastId = (forecastId) => {
-    this.props.appStateHandler(APP_STATE_ACTION.SET_FORECAST_ID, forecastId);
-  };
-
-  displayErrorToastMessages = (error, errorMsg) => {
-    if (this.toastNotificationService) {
-      this.toastNotificationService.displayErrorToast(error, errorMsg, 2000);
-    }
-    this.setState({ loading: false, chartDataError: errorMsg });
-  };
-
-  loadSingleMetricData = (fullRefresh = true) => {
-    const mlJobService = this.mlJobService;
-    const {
-      autoZoomDuration,
-      bounds,
-      selectedDetectorIndex,
-      selectedForecastId,
-      selectedJobId,
-      zoom,
-      functionDescription,
-    } = this.props;
-
-    const { loadCounter: currentLoadCounter } = this.state;
-
-    const currentSelectedJob = mlJobService.getJob(selectedJobId);
-    if (currentSelectedJob === undefined) {
-      return;
-    }
-    if (
-      isMetricDetector(currentSelectedJob, selectedDetectorIndex) &&
-      functionDescription === undefined
-    ) {
-      return;
-    }
-
-    const functionToPlotByIfMetric = aggregationTypeTransform.toES(functionDescription);
-
-    this.contextChartSelectedInitCallDone = false;
-
-    // Only when `fullRefresh` is true we'll reset all data
-    // and show the loading spinner within the page.
-    const entityControls = this.getControlsForDetector();
-    this.setState(
-      {
-        fullRefresh,
-        loadCounter: currentLoadCounter + 1,
-        loading: true,
-        chartDataError: undefined,
-        ...(fullRefresh
-          ? {
-              chartDetails: undefined,
-              contextChartData: undefined,
-              contextForecastData: undefined,
-              focusChartData: undefined,
-              focusForecastData: undefined,
-              modelPlotEnabled:
-                isModelPlotChartableForDetector(currentSelectedJob, selectedDetectorIndex) &&
-                isModelPlotEnabled(currentSelectedJob, selectedDetectorIndex, entityControls),
-              hasResults: false,
-              dataNotChartable: false,
-            }
-          : {}),
-      },
-      () => {
-        const { loadCounter, modelPlotEnabled } = this.state;
-
-        const selectedJob = mlJobService.getJob(selectedJobId);
-        const detectorIndex = selectedDetectorIndex;
-
-        let awaitingCount = 3;
-
-        const stateUpdate = {};
-
-        // finish() function, called after each data set has been loaded and processed.
-        // The last one to call it will trigger the page render.
-        const finish = (counterVar) => {
-          awaitingCount--;
-          if (awaitingCount === 0 && counterVar === loadCounter) {
-            stateUpdate.hasResults =
-              (Array.isArray(stateUpdate.contextChartData) &&
-                stateUpdate.contextChartData.length > 0) ||
-              (Array.isArray(stateUpdate.contextForecastData) &&
-                stateUpdate.contextForecastData.length > 0);
-            stateUpdate.loading = false;
-
-            // Set zoomFrom/zoomTo attributes in scope which will result in the metric chart automatically
-            // selecting the specified range in the context chart, and so loading that date range in the focus chart.
-            // Only touch the zoom range if data for the context chart has been loaded and all necessary
-            // partition fields have a selection.
-            if (
-              stateUpdate.contextChartData.length &&
-              this.arePartitioningFieldsProvided() === true
-            ) {
-              // Check for a zoom parameter in the appState (URL).
-              let focusRange = this.mlTimeSeriesExplorer.calculateInitialFocusRange(
-                zoom,
-                stateUpdate.contextAggregationInterval,
-                bounds
-              );
-
-              if (
-                // If the user's focus range is not defined (i.e. no 'zoom' parameter restored from the appState URL),
-                // then calculate the default focus range to use
-                zoom === undefined ||
-                focusRange === undefined
-              ) {
-                focusRange = this.mlTimeSeriesExplorer.calculateDefaultFocusRange(
-                  autoZoomDuration,
-                  stateUpdate.contextAggregationInterval,
-                  stateUpdate.contextChartData,
-                  stateUpdate.contextForecastData
-                );
-                this.previousSelectedForecastId = this.props.selectedForecastId;
-              }
-
-              if (focusRange !== undefined) {
-                this.contextChartSelected({
-                  from: focusRange[0],
-                  to: focusRange[1],
-                });
-              }
-            }
-
-            this.setState(stateUpdate);
-          }
-        };
-
-        const nonBlankEntities = entityControls.filter((entity) => {
-          return entity.fieldValue !== null;
-        });
-
-        if (
-          modelPlotEnabled === false &&
-          isSourceDataChartableForDetector(selectedJob, detectorIndex) === false &&
-          nonBlankEntities.length > 0
-        ) {
-          // For detectors where model plot has been enabled with a terms filter and the
-          // selected entity(s) are not in the terms list, indicate that data cannot be viewed.
-          stateUpdate.hasResults = false;
-          stateUpdate.loading = false;
-          stateUpdate.dataNotChartable = true;
-          this.setState(stateUpdate);
-          return;
-        }
-
-        // Calculate the aggregation interval for the context chart.
-        // Context chart swimlane will display bucket anomaly score at the same interval.
-        stateUpdate.contextAggregationInterval =
-          this.mlTimeSeriesExplorer.calculateAggregationInterval(
-            bounds,
-            CHARTS_POINT_TARGET,
-            selectedJob
-          );
-
-        // Ensure the search bounds align to the bucketing interval so that the first and last buckets are complete.
-        // For sum or count detectors, short buckets would hold smaller values, and model bounds would also be affected
-        // to some extent with all detector functions if not searching complete buckets.
-        const searchBounds = getBoundsRoundedToInterval(
-          bounds,
-          stateUpdate.contextAggregationInterval,
-          false
-        );
-
-        // Query 1 - load metric data at low granularity across full time range.
-        // Pass a counter flag into the finish() function to make sure we only process the results
-        // for the most recent call to the load the data in cases where the job selection and time filter
-        // have been altered in quick succession (such as from the job picker with 'Apply time range').
-        const counter = loadCounter;
-        this.mlTimeSeriesSearchService
-          .getMetricData(
-            selectedJob,
-            detectorIndex,
-            nonBlankEntities,
-            searchBounds.min.valueOf(),
-            searchBounds.max.valueOf(),
-            stateUpdate.contextAggregationInterval.asMilliseconds(),
-            functionToPlotByIfMetric
-          )
-          .toPromise()
-          .then((resp) => {
-            const fullRangeChartData = this.mlTimeSeriesExplorer.processMetricPlotResults(
-              resp.results,
-              modelPlotEnabled
-            );
-            stateUpdate.contextChartData = fullRangeChartData;
-            finish(counter);
-          })
-          .catch((err) => {
-            const errorMsg = i18n.translate('xpack.ml.timeSeriesExplorer.metricDataErrorMessage', {
-              defaultMessage: 'Error getting metric data',
-            });
-            this.displayErrorToastMessages(err, errorMsg);
-          });
-
-        // Query 2 - load max record score at same granularity as context chart
-        // across full time range for use in the swimlane.
-        this.mlResultsService
-          .getRecordMaxScoreByTime(
-            selectedJob.job_id,
-            this.getCriteriaFields(detectorIndex, entityControls),
-            searchBounds.min.valueOf(),
-            searchBounds.max.valueOf(),
-            stateUpdate.contextAggregationInterval.asMilliseconds(),
-            functionToPlotByIfMetric
-          )
-          .then((resp) => {
-            const fullRangeRecordScoreData = this.mlTimeSeriesExplorer.processRecordScoreResults(
-              resp.results
-            );
-            stateUpdate.swimlaneData = fullRangeRecordScoreData;
-            finish(counter);
-          })
-          .catch((err) => {
-            const errorMsg = i18n.translate(
-              'xpack.ml.timeSeriesExplorer.bucketAnomalyScoresErrorMessage',
-              {
-                defaultMessage: 'Error getting bucket anomaly scores',
-              }
-            );
-
-            this.displayErrorToastMessages(err, errorMsg);
-          });
-
-        // Query 3 - load details on the chart used in the chart title (charting function and entity(s)).
-        this.mlTimeSeriesSearchService
-          .getChartDetails(
-            selectedJob,
-            detectorIndex,
-            entityControls,
-            searchBounds.min.valueOf(),
-            searchBounds.max.valueOf(),
-            this.props.functionDescription
-          )
-          .then((resp) => {
-            stateUpdate.chartDetails = resp.results;
-            finish(counter);
-          })
-          .catch((err) => {
-            this.displayErrorToastMessages(
-              err,
-              i18n.translate('xpack.ml.timeSeriesExplorer.entityCountsErrorMessage', {
-                defaultMessage: 'Error getting entity counts',
-              })
-            );
-          });
-
-        // Plus query for forecast data if there is a forecastId stored in the appState.
-        if (selectedForecastId !== undefined) {
-          awaitingCount++;
-          let aggType = undefined;
-          const detector = selectedJob.analysis_config.detectors[detectorIndex];
-          const esAgg = mlFunctionToESAggregation(detector.function);
-          if (modelPlotEnabled === false && (esAgg === 'sum' || esAgg === 'count')) {
-            aggType = { avg: 'sum', max: 'sum', min: 'sum' };
-          }
-          this.mlForecastService
-            .getForecastData(
-              selectedJob,
-              detectorIndex,
-              selectedForecastId,
-              nonBlankEntities,
-              searchBounds.min.valueOf(),
-              searchBounds.max.valueOf(),
-              stateUpdate.contextAggregationInterval.asMilliseconds(),
-              aggType
-            )
-            .toPromise()
-            .then((resp) => {
-              stateUpdate.contextForecastData = this.mlTimeSeriesExplorer.processForecastResults(
-                resp.results
-              );
-              finish(counter);
-            })
-            .catch((err) => {
-              this.displayErrorToastMessages(
-                err,
-                i18n.translate('xpack.ml.timeSeriesExplorer.forecastDataErrorMessage', {
-                  defaultMessage: 'Error loading forecast data for forecast ID {forecastId}',
-                  values: { forecastId: selectedForecastId },
-                })
-              );
-            });
-        }
-      }
-    );
-  };
-
-  /**
-   * Updates local state of detector related controls from the global state.
-   * @param callback to invoke after a state update.
-   */
-  getControlsForDetector = () => {
-    const { selectedDetectorIndex, selectedEntities, selectedJobId } = this.props;
-    const selectedJob = this.mlJobService.getJob(selectedJobId);
-    return getControlsForDetector(selectedDetectorIndex, selectedEntities, selectedJob);
-  };
-
-  /**
-   * Updates criteria fields for API calls, e.g. getAnomaliesTableData
-   * @param detectorIndex
-   * @param entities
-   */
-  getCriteriaFields(detectorIndex, entities) {
-    // Only filter on the entity if the field has a value.
-    const nonBlankEntities = entities.filter((entity) => entity.fieldValue !== null);
-    return [
-      {
-        fieldName: 'detector_index',
-        fieldValue: detectorIndex,
-      },
-      ...nonBlankEntities,
-    ];
-  }
-
-  loadForJobId(jobId) {
-    const { appStateHandler, selectedDetectorIndex } = this.props;
-
-    const selectedJob = this.mlJobService.getJob(jobId);
-
-    if (selectedJob === undefined) {
-      return;
-    }
-
-    const detectors = getViewableDetectors(selectedJob);
-
-    // Check the supplied index is valid.
-    const appStateDtrIdx = selectedDetectorIndex;
-    let detectorIndex = appStateDtrIdx !== undefined ? appStateDtrIdx : detectors[0].index;
-    if (find(detectors, { index: detectorIndex }) === undefined) {
-      const warningText = i18n.translate(
-        'xpack.ml.timeSeriesExplorer.requestedDetectorIndexNotValidWarningMessage',
-        {
-          defaultMessage: 'Requested detector index {detectorIndex} is not valid for job {jobId}',
-          values: {
-            detectorIndex,
-            jobId: selectedJob.job_id,
-          },
-        }
-      );
-      if (this.toastNotificationService) {
-        this.toastNotificationService.displayWarningToast(warningText);
-      }
-
-      detectorIndex = detectors[0].index;
-    }
-
-    const detectorId = detectorIndex;
-
-    if (detectorId !== selectedDetectorIndex) {
-      appStateHandler(APP_STATE_ACTION.SET_DETECTOR_INDEX, detectorId);
-    }
-    // Populate the map of jobs / detectors / field formatters for the selected IDs and refresh.
-    this.context.services.mlServices.mlFieldFormatService.populateFormats([jobId]);
-  }
-
   componentDidMount() {
-    const mlJobService = this.mlJobService;
     // if timeRange used in the url is incorrect
     // perhaps due to user's advanced setting using incorrect date-maths
     const { invalidTimeRangeError } = this.props;
@@ -760,244 +85,29 @@ export class TimeSeriesExplorer extends React.Component {
       this.resizeHandler();
     });
     this.resizeHandler();
-
-    // Listen for context chart updates.
-    this.subscriptions.add(
-      this.contextChart$
-        .pipe(
-          tap((selection) => {
-            this.setState({
-              zoomFrom: selection.from,
-              zoomTo: selection.to,
-            });
-          }),
-          debounceTime(500),
-          tap((selection) => {
-            const {
-              contextChartData,
-              contextForecastData,
-              focusChartData,
-              zoomFromFocusLoaded,
-              zoomToFocusLoaded,
-            } = this.state;
-
-            if (
-              (contextChartData === undefined || contextChartData.length === 0) &&
-              (contextForecastData === undefined || contextForecastData.length === 0)
-            ) {
-              return;
-            }
-
-            if (
-              (this.contextChartSelectedInitCallDone === false && focusChartData === undefined) ||
-              zoomFromFocusLoaded.getTime() !== selection.from.getTime() ||
-              zoomToFocusLoaded.getTime() !== selection.to.getTime()
-            ) {
-              this.contextChartSelectedInitCallDone = true;
-
-              this.setState({
-                loading: true,
-                fullRefresh: false,
-              });
-            }
-          }),
-          switchMap((selection) => {
-            const { selectedJobId } = this.props;
-            const selectedJob = mlJobService.getJob(selectedJobId);
-
-            // Calculate the aggregation interval for the focus chart.
-            const bounds = { min: moment(selection.from), max: moment(selection.to) };
-            const focusAggregationInterval = this.mlTimeSeriesExplorer.calculateAggregationInterval(
-              bounds,
-              CHARTS_POINT_TARGET,
-              selectedJob
-            );
-
-            // Ensure the search bounds align to the bucketing interval so that the first and last buckets are complete.
-            // For sum or count detectors, short buckets would hold smaller values, and model bounds would also be affected
-            // to some extent with all detector functions if not searching complete buckets.
-            const searchBounds = getBoundsRoundedToInterval(
-              bounds,
-              focusAggregationInterval,
-              false
-            );
-            return forkJoin([
-              this.getFocusData(selection),
-              // Load the data for the anomalies table.
-              this.loadAnomaliesTableData(searchBounds.min.valueOf(), searchBounds.max.valueOf()),
-            ]);
-          }),
-          withLatestFrom(this.contextChart$)
-        )
-        .subscribe(([[refreshFocusData, tableData], selection]) => {
-          const { modelPlotEnabled } = this.state;
-
-          // All the data is ready now for a state update.
-          this.setState({
-            focusAggregationInterval: this.getFocusAggregationInterval({
-              from: selection.from,
-              to: selection.to,
-            }),
-            loading: false,
-            showModelBoundsCheckbox: modelPlotEnabled && refreshFocusData.focusChartData.length > 0,
-            zoomFromFocusLoaded: selection.from,
-            zoomToFocusLoaded: selection.to,
-            ...refreshFocusData,
-            ...tableData,
-          });
-        })
-    );
-
-    this.componentDidUpdate();
-  }
-
-  componentDidUpdate(previousProps) {
-    if (previousProps === undefined || previousProps.selectedJobId !== this.props.selectedJobId) {
-      const selectedJob = this.mlJobService.getJob(this.props.selectedJobId);
-      this.contextChartSelectedInitCallDone = false;
-      getDataViewsAndIndicesWithGeoFields([selectedJob], this.dataViewsService, this.mlIndexUtils)
-        .then(({ getSourceIndicesWithGeoFieldsResp }) =>
-          this.setState(
-            {
-              fullRefresh: false,
-              loading: true,
-              sourceIndicesWithGeoFields: getSourceIndicesWithGeoFieldsResp,
-            },
-            () => {
-              this.loadForJobId(this.props.selectedJobId);
-            }
-          )
-        )
-        .catch(console.error); // eslint-disable-line no-console
-    }
-
-    if (
-      previousProps === undefined ||
-      previousProps.selectedForecastId !== this.props.selectedForecastId
-    ) {
-      if (this.props.selectedForecastId !== undefined) {
-        // Ensure the forecast data will be shown if hidden previously.
-        this.setState({ showForecast: true });
-        // Not best practice but we need the previous value for another comparison
-        // once all the data was loaded.
-        if (previousProps !== undefined) {
-          this.previousSelectedForecastId = previousProps.selectedForecastId;
-        }
-      }
-    }
-
-    if (
-      previousProps === undefined ||
-      !isEqual(previousProps.bounds, this.props.bounds) ||
-      (!isEqual(previousProps.lastRefresh, this.props.lastRefresh) &&
-        previousProps.lastRefresh !== 0) ||
-      !isEqual(previousProps.selectedDetectorIndex, this.props.selectedDetectorIndex) ||
-      !isEqual(previousProps.selectedEntities, this.props.selectedEntities) ||
-      previousProps.selectedForecastId !== this.props.selectedForecastId ||
-      previousProps.selectedJobId !== this.props.selectedJobId ||
-      previousProps.functionDescription !== this.props.functionDescription
-    ) {
-      const fullRefresh =
-        previousProps === undefined ||
-        !isEqual(previousProps.bounds, this.props.bounds) ||
-        !isEqual(previousProps.selectedDetectorIndex, this.props.selectedDetectorIndex) ||
-        !isEqual(previousProps.selectedEntities, this.props.selectedEntities) ||
-        previousProps.selectedForecastId !== this.props.selectedForecastId ||
-        previousProps.selectedJobId !== this.props.selectedJobId ||
-        previousProps.functionDescription !== this.props.functionDescription;
-      this.loadSingleMetricData(fullRefresh);
-    }
-
-    if (previousProps === undefined) {
-      return;
-    }
-
-    // Reload the anomalies table if the Interval or Threshold controls are changed.
-    const tableControlsListener = () => {
-      const { zoomFrom, zoomTo } = this.state;
-      if (zoomFrom !== undefined && zoomTo !== undefined) {
-        this.loadAnomaliesTableData(zoomFrom.getTime(), zoomTo.getTime()).subscribe((res) =>
-          this.setState(res)
-        );
-      }
-    };
-
-    if (
-      previousProps.tableInterval !== this.props.tableInterval ||
-      previousProps.tableSeverity !== this.props.tableSeverity
-    ) {
-      tableControlsListener();
-    }
   }
 
   componentWillUnmount() {
-    this.subscriptions.unsubscribe();
     this.resizeChecker.destroy();
-    this.unmounted = true;
   }
 
   render() {
     const mlJobService = this.mlJobService;
     const {
+      appStateHandler,
       autoZoomDuration,
       bounds,
       dateFormatTz,
+      functionDescription,
       lastRefresh,
+      previousRefresh,
       selectedDetectorIndex,
       selectedEntities,
+      selectedForecastId,
       selectedJobId,
+      zoom,
     } = this.props;
-
-    const {
-      chartDetails,
-      contextAggregationInterval,
-      contextChartData,
-      contextForecastData,
-      dataNotChartable,
-      focusAggregationInterval,
-      focusAnnotationError,
-      focusAnnotationData,
-      focusChartData,
-      focusForecastData,
-      fullRefresh,
-      hasResults,
-      loading,
-      modelPlotEnabled,
-      showAnnotations,
-      showAnnotationsCheckbox,
-      showForecast,
-      showForecastCheckbox,
-      showModelBounds,
-      showModelBoundsCheckbox,
-      svgWidth,
-      swimlaneData,
-      tableData,
-      zoomFrom,
-      zoomTo,
-      zoomFromFocusLoaded,
-      zoomToFocusLoaded,
-      chartDataError,
-      sourceIndicesWithGeoFields,
-    } = this.state;
-    const chartProps = {
-      modelPlotEnabled,
-      contextChartData,
-      contextChartSelected: this.contextChartSelected,
-      contextForecastData,
-      contextAggregationInterval,
-      swimlaneData,
-      focusAnnotationData,
-      focusChartData,
-      focusForecastData,
-      focusAggregationInterval,
-      svgWidth,
-      zoomFrom,
-      zoomTo,
-      zoomFromFocusLoaded,
-      zoomToFocusLoaded,
-      autoZoomDuration,
-    };
-    const jobs = mlJobService.jobs.filter(isTimeSeriesViewJob);
+    const { svgWidth } = this.state;
 
     if (selectedDetectorIndex === undefined || mlJobService.getJob(selectedJobId) === undefined) {
       return (
@@ -1008,248 +118,29 @@ export class TimeSeriesExplorer extends React.Component {
     }
 
     const selectedJob = mlJobService.getJob(selectedJobId);
-    const entityControls = this.getControlsForDetector();
-    const fieldNamesWithEmptyValues = this.getFieldNamesWithEmptyValues();
-    const arePartitioningFieldsProvided = this.arePartitioningFieldsProvided();
-    const detectors = getViewableDetectors(selectedJob);
-
-    let renderFocusChartOnly = true;
-
-    if (
-      isEqual(this.previousChartProps.focusForecastData, chartProps.focusForecastData) &&
-      isEqual(this.previousChartProps.focusChartData, chartProps.focusChartData) &&
-      isEqual(this.previousChartProps.focusAnnotationData, chartProps.focusAnnotationData) &&
-      this.previousShowForecast === showForecast &&
-      this.previousShowModelBounds === showModelBounds &&
-      this.props.previousRefresh === lastRefresh
-    ) {
-      renderFocusChartOnly = false;
-    }
-
-    this.previousChartProps = chartProps;
-    this.previousShowForecast = showForecast;
-    this.previousShowModelBounds = showModelBounds;
 
     return (
       <TimeSeriesExplorerPage dateFormatTz={dateFormatTz} resizeRef={this.resizeRef}>
-        {fieldNamesWithEmptyValues.length > 0 && (
-          <>
-            <EuiCallOut
-              title={
-                <FormattedMessage
-                  id="xpack.ml.timeSeriesExplorer.singleMetricRequiredMessage"
-                  defaultMessage="To view a single metric, select {missingValuesCount, plural, one {a value for {fieldName1}} other {values for {fieldName1} and {fieldName2}}}."
-                  values={{
-                    missingValuesCount: fieldNamesWithEmptyValues.length,
-                    fieldName1: fieldNamesWithEmptyValues[0],
-                    fieldName2: fieldNamesWithEmptyValues[1],
-                  }}
-                />
-              }
-              iconType="help"
-              size="s"
-            />
-            <EuiSpacer size="m" />
-          </>
-        )}
-        <SeriesControls
-          selectedJobId={selectedJobId}
-          appStateHandler={this.props.appStateHandler}
-          selectedDetectorIndex={selectedDetectorIndex}
-          selectedEntities={this.props.selectedEntities}
+        <TimeSeriesExplorerEmbeddableChart
+          chartWidth={svgWidth}
+          appStateHandler={appStateHandler}
+          autoZoomDuration={autoZoomDuration}
           bounds={bounds}
-          functionDescription={this.props.functionDescription}
-          setFunctionDescription={this.setFunctionDescription}
-        >
-          {arePartitioningFieldsProvided && (
-            <EuiFlexItem style={{ textAlign: 'right' }}>
-              <EuiFormRow hasEmptyLabelSpace style={{ maxWidth: '100%' }}>
-                <ForecastingModal
-                  job={selectedJob}
-                  jobState={selectedJob.state}
-                  detectorIndex={selectedDetectorIndex}
-                  entities={entityControls}
-                  earliestRecordTimestamp={selectedJob.data_counts.earliest_record_timestamp}
-                  latestRecordTimestamp={selectedJob.data_counts.latest_record_timestamp}
-                  setForecastId={this.setForecastId}
-                  className="forecast-controls"
-                  selectedForecastId={this.props.selectedForecastId}
-                />
-              </EuiFormRow>
-            </EuiFlexItem>
-          )}
-        </SeriesControls>
-        <EuiSpacer size="m" />
-
-        {fullRefresh && loading === true && (
-          <LoadingIndicator
-            label={i18n.translate('xpack.ml.timeSeriesExplorer.loadingLabel', {
-              defaultMessage: 'Loading',
-            })}
-          />
-        )}
-
-        {loading === false && chartDataError !== undefined && (
-          <TimeseriesexplorerChartDataError errorMsg={chartDataError} />
-        )}
-
-        {arePartitioningFieldsProvided &&
-          jobs.length > 0 &&
-          (fullRefresh === false || loading === false) &&
-          hasResults === false &&
-          chartDataError === undefined && (
-            <TimeseriesexplorerNoChartData
-              dataNotChartable={dataNotChartable}
-              entities={entityControls}
-            />
-          )}
-        {arePartitioningFieldsProvided &&
-          jobs.length > 0 &&
-          (fullRefresh === false || loading === false) &&
-          hasResults === true && (
-            <div>
-              <SingleMetricViewerTitle
-                entityData={chartDetails.entityData}
-                functionLabel={chartDetails.functionLabel}
-              />
-
-              <TimeSeriesExplorerControls
-                forecastId={this.props.selectedForecastId}
-                selectedDetectorIndex={selectedDetectorIndex}
-                selectedEntities={selectedEntities}
-                selectedJobId={selectedJobId}
-                showAnnotationsCheckbox={showAnnotationsCheckbox}
-                showAnnotations={showAnnotations}
-                showForecastCheckbox={showForecastCheckbox}
-                showForecast={showForecast}
-                showModelBoundsCheckbox={showModelBoundsCheckbox}
-                showModelBounds={showModelBounds}
-                onShowModelBoundsChange={this.toggleShowModelBoundsHandler}
-                onShowAnnotationsChange={this.toggleShowAnnotationsHandler}
-                onShowForecastChange={this.toggleShowForecastHandler}
-              />
-
-              <TimeSeriesChartWithTooltips
-                chartProps={chartProps}
-                contextAggregationInterval={contextAggregationInterval}
-                bounds={bounds}
-                detectorIndex={selectedDetectorIndex}
-                renderFocusChartOnly={renderFocusChartOnly}
-                selectedJob={selectedJob}
-                selectedEntities={this.props.selectedEntities}
-                showAnnotations={showAnnotations}
-                showForecast={showForecast}
-                showModelBounds={showModelBounds}
-                lastRefresh={lastRefresh}
-                tableData={tableData}
-                sourceIndicesWithGeoFields={sourceIndicesWithGeoFields}
-              />
-              {focusAnnotationError !== undefined && (
-                <>
-                  <EuiTitle data-test-subj="mlAnomalyExplorerAnnotations error" size={'xs'}>
-                    <h2>
-                      <FormattedMessage
-                        id="xpack.ml.timeSeriesExplorer.annotationsErrorTitle"
-                        defaultMessage="Annotations"
-                      />
-                    </h2>
-                  </EuiTitle>
-                  <EuiPanel>
-                    <EuiCallOut
-                      title={i18n.translate(
-                        'xpack.ml.timeSeriesExplorer.annotationsErrorCallOutTitle',
-                        {
-                          defaultMessage: 'An error occurred loading annotations:',
-                        }
-                      )}
-                      color="danger"
-                      iconType="warning"
-                    >
-                      <p>{focusAnnotationError}</p>
-                    </EuiCallOut>
-                  </EuiPanel>
-                  <EuiSpacer size="m" />
-                </>
-              )}
-              {focusAnnotationData && focusAnnotationData.length > 0 && (
-                <>
-                  <EuiAccordion
-                    id={'mlAnnotationsAccordion'}
-                    buttonContent={
-                      <EuiTitle size={'xs'}>
-                        <h2>
-                          <FormattedMessage
-                            id="xpack.ml.timeSeriesExplorer.annotationsTitle"
-                            defaultMessage="Annotations {badge}"
-                            values={{
-                              badge: (
-                                <EuiBadge color={'hollow'}>
-                                  <FormattedMessage
-                                    id="xpack.ml.explorer.annotationsTitleTotalCount"
-                                    defaultMessage="Total: {count}"
-                                    values={{ count: focusAnnotationData.length }}
-                                  />
-                                </EuiBadge>
-                              ),
-                            }}
-                          />
-                        </h2>
-                      </EuiTitle>
-                    }
-                    data-test-subj="mlAnomalyExplorerAnnotations loaded"
-                  >
-                    <AnnotationsTable
-                      chartDetails={chartDetails}
-                      detectorIndex={selectedDetectorIndex}
-                      detectors={detectors}
-                      jobIds={[this.props.selectedJobId]}
-                      annotations={focusAnnotationData}
-                      isSingleMetricViewerLinkVisible={false}
-                      isNumberBadgeVisible={true}
-                    />
-                  </EuiAccordion>
-                  <EuiSpacer size="m" />
-                </>
-              )}
-              <AnnotationFlyout
-                chartDetails={chartDetails}
-                detectorIndex={selectedDetectorIndex}
-                detectors={detectors}
-              />
-              <EuiTitle size={'xs'}>
-                <h2>
-                  <FormattedMessage
-                    id="xpack.ml.timeSeriesExplorer.anomaliesTitle"
-                    defaultMessage="Anomalies"
-                  />
-                </h2>
-              </EuiTitle>
-              <EuiSpacer size="s" />
-              <EuiFlexGroup direction="row" gutterSize="l" responsive={true}>
-                <EuiFlexItem grow={false}>
-                  <SelectSeverity />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <SelectInterval />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiSpacer size="m" />
-            </div>
-          )}
-        {arePartitioningFieldsProvided && jobs.length > 0 && hasResults === true && (
-          <AnomaliesTable
-            bounds={bounds}
-            tableData={tableData}
-            filter={this.tableFilter}
-            sourceIndicesWithGeoFields={this.state.sourceIndicesWithGeoFields}
-            selectedJobs={[
-              {
-                id: selectedJob.job_id,
-                modelPlotEnabled,
-              },
-            ]}
-          />
-        )}
+          dateFormatTz={dateFormatTz}
+          lastRefresh={lastRefresh ?? 0}
+          previousRefresh={previousRefresh}
+          selectedDetectorIndex={selectedDetectorIndex}
+          selectedEntities={selectedEntities}
+          selectedForecastId={selectedForecastId}
+          tableInterval="auto"
+          tableSeverity={0}
+          zoom={zoom}
+          functionDescription={functionDescription}
+          selectedJob={selectedJob}
+          selectedJobStats={{ state: selectedJob.state, data_counts: selectedJob.data_counts }}
+          shouldShowForecastButton
+          isEmbeddable={false}
+        />
       </TimeSeriesExplorerPage>
     );
   }
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_embeddable_chart/get_services.ts b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_embeddable_chart/get_services.ts
new file mode 100644
index 0000000000000..9fb0bb7c1d862
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_embeddable_chart/get_services.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 type { MlKibanaReactContextValue } from '../../contexts/kibana';
+import { indexServiceFactory } from '../../util/index_service';
+import { mlJobServiceFactory } from '../../services/job_service';
+import { toastNotificationServiceProvider } from '../../services/toast_notification_service';
+import { forecastServiceFactory } from '../../services/forecast_service';
+import { mlResultsServiceProvider } from '../../services/results_service';
+import { timeSeriesExplorerServiceFactory } from '../../util/time_series_explorer_service';
+import { timeSeriesSearchServiceFactory } from '../timeseriesexplorer_utils/time_series_search_service';
+
+export const getServices = (context: MlKibanaReactContextValue) => {
+  const {
+    services: {
+      data: { dataViews: dataViewsService },
+      mlServices,
+      notifications: { toasts },
+      uiSettings,
+    },
+  } = context;
+
+  const services = {
+    dataViewsService,
+    toastNotificationService: toastNotificationServiceProvider(toasts),
+    mlApi: mlServices.mlApi,
+    mlFieldFormatService: mlServices.mlFieldFormatService,
+    mlIndexUtils: indexServiceFactory(dataViewsService),
+  };
+  const mlJobService = mlJobServiceFactory(services.mlApi);
+  const mlForecastService = forecastServiceFactory(services.mlApi);
+  const mlResultsService = mlServices.mlResultsService ?? mlResultsServiceProvider(services.mlApi);
+  const mlTimeSeriesExplorer =
+    mlServices.mlTimeSeriesExplorerService ??
+    timeSeriesExplorerServiceFactory(uiSettings, services.mlApi, mlResultsService);
+  const mlTimeSeriesSearchService = timeSeriesSearchServiceFactory(
+    mlResultsService,
+    services.mlApi
+  );
+
+  return {
+    ...services,
+    mlForecastService,
+    mlJobService,
+    mlResultsService,
+    mlTimeSeriesExplorer,
+    mlTimeSeriesSearchService,
+  };
+};
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_embeddable_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_embeddable_chart.js
index 66b34ae2bb050..a170e73325129 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_embeddable_chart.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_embeddable_chart/timeseriesexplorer_embeddable_chart.js
@@ -9,7 +9,7 @@
  * React component for rendering Single Metric Viewer.
  */
 
-import { get, isEqual } from 'lodash';
+import { find, get, isEqual } from 'lodash';
 import moment from 'moment-timezone';
 import {
   Subject,
@@ -31,7 +31,14 @@ import { context } from '@kbn/kibana-react-plugin/public';
 import { ML_JOB_AGGREGATION, aggregationTypeTransform } from '@kbn/ml-anomaly-utils';
 import { getBoundsRoundedToInterval } from '@kbn/ml-time-buckets';
 
-import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import {
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
 
 import { ANOMALIES_TABLE_DEFAULT_QUERY_SIZE } from '../../../../common/constants/search';
 import {
@@ -39,6 +46,7 @@ import {
   isModelPlotChartableForDetector,
   isSourceDataChartableForDetector,
   mlFunctionToESAggregation,
+  isTimeSeriesViewJob,
 } from '../../../../common/util/job_utils';
 
 import { LoadingIndicator } from '../../components/loading_indicator/loading_indicator';
@@ -54,13 +62,20 @@ import { getControlsForDetector } from '../get_controls_for_detector';
 import { TimeSeriesChartWithTooltips } from '../components/timeseries_chart/timeseries_chart_with_tooltip';
 import { isMetricDetector } from '../get_function_description';
 import { TimeseriesexplorerChartDataError } from '../components/timeseriesexplorer_chart_data_error';
-import { TimeseriesExplorerCheckbox } from './timeseriesexplorer_checkbox';
-import { timeSeriesExplorerServiceFactory } from '../../util/time_series_explorer_service';
+import { getViewableDetectors } from '../timeseriesexplorer_utils/get_viewable_detectors';
 import { getTimeseriesexplorerDefaultState } from '../timeseriesexplorer_utils';
-import { mlJobServiceFactory } from '../../services/job_service';
-import { forecastServiceFactory } from '../../services/forecast_service';
 import { SingleMetricViewerTitleWithFilters } from './timeseriesexplorer_title';
 import { TimeSeriesExplorerEmbeddableControls } from './timeseriesexplorer_embeddable_controls';
+import { getDataViewsAndIndicesWithGeoFields } from '../../explorer/explorer_utils';
+import { SingleMetricViewerTitle } from '../components/timeseriesexplorer_title';
+import { TimeSeriesExplorerControls } from '../components/timeseriesexplorer_controls';
+import { TimeSeriesExplorerAnnotationsTable } from '../components/timeseriesexplorer_annotations_table';
+import { AnnotationFlyout } from '../../components/annotations/annotation_flyout';
+import { SelectSeverity } from '../../components/controls/select_severity/select_severity';
+import { SelectInterval } from '../../components/controls/select_interval/select_interval';
+import { AnomaliesTable } from '../../components/anomalies_table/anomalies_table';
+import { SeriesControls } from '../components/series_controls';
+import { getServices } from './get_services';
 
 export class TimeSeriesExplorerEmbeddableChart extends React.Component {
   static propTypes = {
@@ -70,20 +85,19 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
     bounds: PropTypes.object.isRequired,
     chartWidth: PropTypes.number.isRequired,
     chartHeight: PropTypes.number,
+    dateFormatTz: PropTypes.string.isRequired,
+    isEmbeddable: PropTypes.bool,
     lastRefresh: PropTypes.number.isRequired,
     onRenderComplete: PropTypes.func,
-    previousRefresh: PropTypes.number.isRequired,
+    previousRefresh: PropTypes.number,
     selectedJob: PropTypes.object.isRequired,
     selectedJobStats: PropTypes.object.isRequired,
-    selectedJobId: PropTypes.string.isRequired,
     selectedDetectorIndex: PropTypes.number,
     selectedEntities: PropTypes.object,
     selectedForecastId: PropTypes.string,
     tableInterval: PropTypes.string,
     tableSeverity: PropTypes.number,
     zoom: PropTypes.object,
-    toastNotificationService: PropTypes.object,
-    dataViewsService: PropTypes.object,
     onForecastComplete: PropTypes.func,
   };
 
@@ -103,8 +117,33 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
    */
   static contextType = context;
 
-  mlTimeSeriesExplorer;
+  dataViewsService;
+  toastNotificationService;
+  mlApi;
+  mlFieldFormatService;
   mlForecastService;
+  mlIndexUtils;
+  mlJobService;
+  mlResultsService;
+  mlTimeSeriesExplorer;
+  mlTimeSeriesSearchService;
+
+  constructor(props, constructorContext) {
+    super(props, constructorContext);
+
+    ({
+      dataViewsService: this.dataViewsService,
+      toastNotificationService: this.toastNotificationService,
+      mlApi: this.mlApi,
+      mlFieldFormatService: this.mlFieldFormatService,
+      mlForecastService: this.mlForecastService,
+      mlIndexUtils: this.mlIndexUtils,
+      mlJobService: this.mlJobService,
+      mlResultsService: this.mlResultsService,
+      mlTimeSeriesExplorer: this.mlTimeSeriesExplorer,
+      mlTimeSeriesSearchService: this.mlTimeSeriesSearchService,
+    } = getServices(constructorContext));
+  }
 
   /**
    * Returns field names that don't have a selection yet.
@@ -260,7 +299,7 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
     } = this.props;
     const entityControls = this.getControlsForDetector();
 
-    return this.context.services.mlServices.mlApi.results
+    return this.mlApi.results
       .getAnomaliesTableData(
         [selectedJob.job_id],
         this.getCriteriaFields(selectedDetectorIndex, entityControls),
@@ -320,8 +359,8 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
   };
 
   displayErrorToastMessages = (error, errorMsg) => {
-    if (this.props.toastNotificationService) {
-      this.props.toastNotificationService.displayErrorToast(error, errorMsg, 2000);
+    if (this.toastNotificationService) {
+      this.toastNotificationService.displayErrorToast(error, errorMsg, 2000);
     }
     this.setState({ loading: false, chartDataError: errorMsg });
   };
@@ -410,8 +449,12 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
                 bounds
               );
               if (
-                focusRange === undefined ||
-                this.previousSelectedForecastId !== this.props.selectedForecastId
+                // If the user's focus range is not defined (i.e. no 'zoom' parameter restored from the appState URL),
+                // then calculate the default focus range to use
+                (!this.props.isEmbeddable && zoom === undefined) ||
+                (this.props.isEmbeddable &&
+                  this.previousSelectedForecastId !== this.props.selectedForecastId) ||
+                focusRange === undefined
               ) {
                 focusRange = this.mlTimeSeriesExplorer.calculateDefaultFocusRange(
                   autoZoomDuration,
@@ -422,13 +465,16 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
                 this.previousSelectedForecastId = this.props.selectedForecastId;
               }
 
-              this.contextChartSelected({
-                from: focusRange[0],
-                to: focusRange[1],
-              });
+              if (focusRange !== undefined) {
+                this.contextChartSelected({
+                  from: focusRange[0],
+                  to: focusRange[1],
+                });
+              }
             }
 
             this.setState(stateUpdate);
+
             if (this.props.onRenderComplete !== undefined) {
               this.props.onRenderComplete();
             }
@@ -476,7 +522,7 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
         // for the most recent call to the load the data in cases where the job selection and time filter
         // have been altered in quick succession (such as from the job picker with 'Apply time range').
         const counter = loadCounter;
-        this.context.services.mlServices.mlTimeSeriesSearchService
+        this.mlTimeSeriesSearchService
           .getMetricData(
             selectedJob,
             detectorIndex,
@@ -504,7 +550,7 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
 
         // Query 2 - load max record score at same granularity as context chart
         // across full time range for use in the swimlane.
-        this.context.services.mlServices.mlResultsService
+        this.mlResultsService
           .getRecordMaxScoreByTime(
             selectedJob.job_id,
             this.getCriteriaFields(detectorIndex, entityControls),
@@ -532,13 +578,14 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
           });
 
         // Query 3 - load details on the chart used in the chart title (charting function and entity(s)).
-        this.context.services.mlServices.mlTimeSeriesSearchService
+        this.mlTimeSeriesSearchService
           .getChartDetails(
             selectedJob,
             detectorIndex,
             entityControls,
             searchBounds.min.valueOf(),
-            searchBounds.max.valueOf()
+            searchBounds.max.valueOf(),
+            this.props.functionDescription // added from original code
           )
           .then((resp) => {
             stateUpdate.chartDetails = resp.results;
@@ -622,14 +669,48 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
     ];
   }
 
-  async componentDidMount() {
-    this.mlTimeSeriesExplorer = timeSeriesExplorerServiceFactory(
-      this.context.services.uiSettings,
-      this.context.services.mlServices.mlApi,
-      this.context.services.mlServices.mlResultsService
-    );
-    this.mlForecastService = forecastServiceFactory(this.context.services.mlServices.mlApi);
+  loadForJobId() {
+    const { appStateHandler, selectedDetectorIndex } = this.props;
+
+    const { selectedJob } = this.props;
 
+    if (selectedJob === undefined) {
+      return;
+    }
+
+    const detectors = getViewableDetectors(selectedJob);
+
+    // Check the supplied index is valid.
+    const appStateDtrIdx = selectedDetectorIndex;
+    let detectorIndex = appStateDtrIdx !== undefined ? appStateDtrIdx : detectors[0].index;
+    if (find(detectors, { index: detectorIndex }) === undefined) {
+      const warningText = i18n.translate(
+        'xpack.ml.timeSeriesExplorer.requestedDetectorIndexNotValidWarningMessage',
+        {
+          defaultMessage: 'Requested detector index {detectorIndex} is not valid for job {jobId}',
+          values: {
+            detectorIndex,
+            jobId: selectedJob.job_id,
+          },
+        }
+      );
+      if (this.toastNotificationService) {
+        this.toastNotificationService.displayWarningToast(warningText);
+      }
+
+      detectorIndex = detectors[0].index;
+    }
+
+    const detectorId = detectorIndex;
+
+    if (detectorId !== selectedDetectorIndex) {
+      appStateHandler(APP_STATE_ACTION.SET_DETECTOR_INDEX, detectorId);
+    }
+    // Populate the map of jobs / detectors / field formatters for the selected IDs and refresh.
+    this.context.services.mlServices.mlFieldFormatService.populateFormats([selectedJob.job_id]);
+  }
+
+  async componentDidMount() {
     // Listen for context chart updates.
     this.subscriptions.add(
       this.contextChart$
@@ -713,21 +794,40 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
         })
     );
 
-    if (this.context && this.props.selectedJob !== undefined) {
+    if (this.props.isEmbeddable && this.context && this.props.selectedJob !== undefined) {
       // Populate the map of jobs / detectors / field formatters for the selected IDs and refresh.
-      this.context.services.mlServices.mlFieldFormatService.populateFormats([
-        this.props.selectedJob.job_id,
-      ]);
+      this.mlFieldFormatService.populateFormats([this.props.selectedJob.job_id]);
+      // Populate mlJobService to work with LinksMenuUI.
+      await this.mlJobService.loadJobsWrapper();
     }
 
-    // Populate mlJobService to work with LinksMenuUI.
-    this.mlJobService = mlJobServiceFactory(undefined, this.context.services.mlServices.mlApi);
-    await this.mlJobService.loadJobsWrapper();
-
     this.componentDidUpdate();
   }
 
   componentDidUpdate(previousProps) {
+    if (
+      this.props.isEmbeddable &&
+      (previousProps === undefined ||
+        previousProps.selectedJob.job_id !== this.props.selectedJob.job_id)
+    ) {
+      const { selectedJob } = this.props;
+      this.contextChartSelectedInitCallDone = false;
+      getDataViewsAndIndicesWithGeoFields([selectedJob], this.dataViewsService, this.mlIndexUtils)
+        .then(({ getSourceIndicesWithGeoFieldsResp }) =>
+          this.setState(
+            {
+              fullRefresh: false,
+              loading: true,
+              sourceIndicesWithGeoFields: getSourceIndicesWithGeoFieldsResp,
+            },
+            () => {
+              this.loadForJobId();
+            }
+          )
+        )
+        .catch(console.error); // eslint-disable-line no-console
+    }
+
     if (
       previousProps === undefined ||
       previousProps.selectedForecastId !== this.props.selectedForecastId
@@ -752,7 +852,6 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
       !isEqual(previousProps.selectedEntities, this.props.selectedEntities) ||
       previousProps.selectedForecastId !== this.props.selectedForecastId ||
       previousProps.selectedJob?.job_id !== this.props.selectedJob?.job_id ||
-      previousProps.selectedJobId !== this.props.selectedJobId ||
       previousProps.functionDescription !== this.props.functionDescription
     ) {
       const fullRefresh =
@@ -761,7 +860,6 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
         !isEqual(previousProps.selectedDetectorIndex, this.props.selectedDetectorIndex) ||
         !isEqual(previousProps.selectedEntities, this.props.selectedEntities) ||
         previousProps.selectedForecastId !== this.props.selectedForecastId ||
-        previousProps.selectedJobId !== this.props.selectedJobId ||
         previousProps.selectedJob?.job_id !== this.props.selectedJob?.job_id ||
         previousProps.functionDescription !== this.props.functionDescription;
       this.loadSingleMetricData(fullRefresh);
@@ -770,19 +868,41 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
     if (previousProps === undefined) {
       return;
     }
+
+    if (!this.props.isEmbeddable) {
+      // Reload the anomalies table if the Interval or Threshold controls are changed.
+      const tableControlsListener = () => {
+        const { zoomFrom, zoomTo } = this.state;
+        if (zoomFrom !== undefined && zoomTo !== undefined) {
+          this.loadAnomaliesTableData(zoomFrom.getTime(), zoomTo.getTime()).subscribe((res) =>
+            this.setState(res)
+          );
+        }
+      };
+
+      if (
+        previousProps.tableInterval !== this.props.tableInterval ||
+        previousProps.tableSeverity !== this.props.tableSeverity
+      ) {
+        tableControlsListener();
+      }
+    }
   }
 
   componentWillUnmount() {
     this.subscriptions.unsubscribe();
+    this.resizeChecker && this.resizeChecker.destroy();
     this.unmounted = true;
   }
 
   render() {
+    const mlJobService = this.mlJobService;
     const {
       autoZoomDuration,
       bounds,
       chartWidth,
       chartHeight,
+      isEmbeddable,
       lastRefresh,
       onForecastComplete,
       selectedEntities,
@@ -800,6 +920,7 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
       dataNotChartable,
       focusAggregationInterval,
       focusAnnotationData,
+      focusAnnotationError,
       focusChartData,
       focusForecastData,
       fullRefresh,
@@ -841,9 +962,15 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
       autoZoomDuration,
     };
 
+    let jobs;
+    if (!isEmbeddable) {
+      jobs = mlJobService.jobs.filter(isTimeSeriesViewJob);
+    }
+
     const entityControls = this.getControlsForDetector();
     const fieldNamesWithEmptyValues = this.getFieldNamesWithEmptyValues();
     const arePartitioningFieldsProvided = this.arePartitioningFieldsProvided();
+    const detectors = getViewableDetectors(selectedJob);
 
     let renderFocusChartOnly = true;
 
@@ -884,8 +1011,37 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
             <EuiSpacer size="m" />
           </>
         )}
+        {!this.props.isEmbeddable && (
+          <SeriesControls
+            selectedJobId={this.props.selectedJob.job_id}
+            appStateHandler={this.props.appStateHandler}
+            selectedDetectorIndex={selectedDetectorIndex}
+            selectedEntities={this.props.selectedEntities}
+            bounds={bounds}
+            functionDescription={this.props.functionDescription}
+            setFunctionDescription={this.setFunctionDescription}
+          >
+            {arePartitioningFieldsProvided && selectedJob && shouldShowForecastButton === true && (
+              <EuiFlexItem grow={false} style={{ textAlign: 'right' }}>
+                <EuiFormRow hasEmptyLabelSpace style={{ maxWidth: '100%' }}>
+                  <ForecastingModal
+                    job={selectedJob}
+                    jobState={selectedJobStats.state}
+                    earliestRecordTimestamp={selectedJobStats.data_counts.earliest_record_timestamp}
+                    latestRecordTimestamp={selectedJobStats.data_counts.latest_record_timestamp}
+                    detectorIndex={selectedDetectorIndex}
+                    entities={entityControls}
+                    setForecastId={this.setForecastId}
+                    className="forecast-controls"
+                    onForecastComplete={onForecastComplete}
+                    selectedForecastId={this.props.selectedForecastId}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            )}
+          </SeriesControls>
+        )}
         <EuiSpacer size="m" />
-
         {fullRefresh && loading === true && (
           <LoadingIndicator
             label={i18n.translate('xpack.ml.timeSeriesExplorer.loadingLabel', {
@@ -893,11 +1049,9 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
             })}
           />
         )}
-
         {loading === false && chartDataError !== undefined && (
           <TimeseriesexplorerChartDataError errorMsg={chartDataError} />
         )}
-
         {arePartitioningFieldsProvided &&
           selectedJob &&
           (fullRefresh === false || loading === false) &&
@@ -913,46 +1067,73 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
           (fullRefresh === false || loading === false) &&
           hasResults === true && (
             <div>
-              <SingleMetricViewerTitleWithFilters
-                api={this.props.api}
-                functionLabel={chartDetails.functionLabel}
-                entityData={chartDetails.entityData}
-              />
-              <EuiFlexGroup style={{ float: 'right' }} alignItems="center">
-                <TimeSeriesExplorerEmbeddableControls
-                  showAnnotations={showAnnotations}
+              {this.props.isEmbeddable ? (
+                <SingleMetricViewerTitleWithFilters
+                  api={this.props.api}
+                  functionLabel={chartDetails.functionLabel}
+                  entityData={chartDetails.entityData}
+                />
+              ) : (
+                <SingleMetricViewerTitle
+                  entityData={chartDetails.entityData}
+                  functionLabel={chartDetails.functionLabel}
+                />
+              )}
+
+              {this.props.isEmbeddable ? (
+                <EuiFlexGroup style={{ float: 'right' }} alignItems="center">
+                  <TimeSeriesExplorerEmbeddableControls
+                    showAnnotations={showAnnotations}
+                    showAnnotationsCheckbox={showAnnotationsCheckbox}
+                    showForecast={showForecast}
+                    showForecastCheckbox={showForecastCheckbox}
+                    showModelBounds={showModelBounds}
+                    showModelBoundsCheckbox={showModelBoundsCheckbox}
+                    onShowAnnotationsChange={this.toggleShowAnnotationsHandler}
+                    onShowForecastChange={this.toggleShowForecastHandler}
+                    onShowModelBoundsChange={this.toggleShowModelBoundsHandler}
+                  />
+                  {arePartitioningFieldsProvided &&
+                    selectedJob &&
+                    shouldShowForecastButton === true && (
+                      <EuiFlexItem grow={false} style={{ textAlign: 'right' }}>
+                        <ForecastingModal
+                          emptyMode={true}
+                          job={selectedJob}
+                          jobState={selectedJobStats.state}
+                          earliestRecordTimestamp={
+                            selectedJobStats.data_counts.earliest_record_timestamp
+                          }
+                          latestRecordTimestamp={
+                            selectedJobStats.data_counts.latest_record_timestamp
+                          }
+                          detectorIndex={selectedDetectorIndex}
+                          entities={entityControls}
+                          setForecastId={this.setForecastId}
+                          className="forecast-controls"
+                          onForecastComplete={onForecastComplete}
+                          selectedForecastId={this.props.selectedForecastId}
+                        />
+                      </EuiFlexItem>
+                    )}
+                </EuiFlexGroup>
+              ) : (
+                <TimeSeriesExplorerControls
+                  forecastId={this.props.selectedForecastId}
+                  selectedDetectorIndex={selectedDetectorIndex}
+                  selectedEntities={selectedEntities}
+                  selectedJobId={this.props.selectedJob.job_id}
                   showAnnotationsCheckbox={showAnnotationsCheckbox}
-                  showForecast={showForecast}
+                  showAnnotations={showAnnotations}
                   showForecastCheckbox={showForecastCheckbox}
-                  showModelBounds={showModelBounds}
+                  showForecast={showForecast}
                   showModelBoundsCheckbox={showModelBoundsCheckbox}
+                  showModelBounds={showModelBounds}
+                  onShowModelBoundsChange={this.toggleShowModelBoundsHandler}
                   onShowAnnotationsChange={this.toggleShowAnnotationsHandler}
                   onShowForecastChange={this.toggleShowForecastHandler}
-                  onShowModelBoundsChange={this.toggleShowModelBoundsHandler}
                 />
-
-                {arePartitioningFieldsProvided &&
-                  selectedJob &&
-                  shouldShowForecastButton === true && (
-                    <EuiFlexItem grow={false} style={{ textAlign: 'right' }}>
-                      <ForecastingModal
-                        buttonMode={'empty'}
-                        job={selectedJob}
-                        jobState={selectedJobStats.state}
-                        earliestRecordTimestamp={
-                          selectedJobStats.data_counts.earliest_record_timestamp
-                        }
-                        latestRecordTimestamp={selectedJobStats.data_counts.latest_record_timestamp}
-                        detectorIndex={selectedDetectorIndex}
-                        entities={entityControls}
-                        setForecastId={this.setForecastId}
-                        className="forecast-controls"
-                        onForecastComplete={onForecastComplete}
-                        selectedForecastId={this.props.selectedForecastId}
-                      />
-                    </EuiFlexItem>
-                  )}
-              </EuiFlexGroup>
+              )}
 
               <TimeSeriesChartWithTooltips
                 chartProps={chartProps}
@@ -970,8 +1151,60 @@ export class TimeSeriesExplorerEmbeddableChart extends React.Component {
                 tableData={tableData}
                 sourceIndicesWithGeoFields={sourceIndicesWithGeoFields}
               />
+              {!this.props.isEmbeddable && (
+                <>
+                  <TimeSeriesExplorerAnnotationsTable
+                    chartDetails={chartDetails}
+                    detectors={detectors}
+                    focusAnnotationData={focusAnnotationData}
+                    focusAnnotationError={focusAnnotationError}
+                    selectedDetectorIndex={selectedDetectorIndex}
+                    selectedJobId={this.props.selectedJob.job_id}
+                  />
+                  <AnnotationFlyout
+                    chartDetails={chartDetails}
+                    detectorIndex={selectedDetectorIndex}
+                    detectors={detectors}
+                  />
+                  <EuiTitle size={'xs'}>
+                    <h2>
+                      <FormattedMessage
+                        id="xpack.ml.timeSeriesExplorer.anomaliesTitle"
+                        defaultMessage="Anomalies"
+                      />
+                    </h2>
+                  </EuiTitle>
+                  <EuiSpacer size="s" />
+                  <EuiFlexGroup direction="row" gutterSize="l" responsive={true}>
+                    <EuiFlexItem grow={false}>
+                      <SelectSeverity />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <SelectInterval />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                  <EuiSpacer size="m" />
+                </>
+              )}
             </div>
           )}
+        {!this.props.isEmbeddable &&
+          arePartitioningFieldsProvided &&
+          jobs.length > 0 &&
+          hasResults === true && (
+            <AnomaliesTable
+              bounds={bounds}
+              tableData={tableData}
+              filter={this.tableFilter}
+              sourceIndicesWithGeoFields={this.state.sourceIndicesWithGeoFields}
+              selectedJobs={[
+                {
+                  id: selectedJob.job_id,
+                  modelPlotEnabled,
+                },
+              ]}
+            />
+          )}
       </>
     );
   }
diff --git a/x-pack/plugins/ml/public/embeddables/single_metric_viewer/get_services.ts b/x-pack/plugins/ml/public/embeddables/single_metric_viewer/get_services.ts
index de6867b213e18..c666fe7fdee6b 100644
--- a/x-pack/plugins/ml/public/embeddables/single_metric_viewer/get_services.ts
+++ b/x-pack/plugins/ml/public/embeddables/single_metric_viewer/get_services.ts
@@ -28,8 +28,6 @@ export const getMlServices = async (
     { mlApiProvider },
     { mlResultsServiceProvider },
     { MlCapabilitiesService },
-    { timeSeriesSearchServiceFactory },
-    { toastNotificationServiceProvider },
     { mlJobServiceFactory },
   ] = await Promise.all([
     await import('../../application/services/anomaly_detector_service'),
@@ -39,20 +37,14 @@ export const getMlServices = async (
     await import('../../application/services/ml_api_service'),
     await import('../../application/services/results_service'),
     await import('../../application/capabilities/check_capabilities'),
-    await import(
-      '../../application/timeseriesexplorer/timeseriesexplorer_utils/time_series_search_service'
-    ),
-    await import('../../application/services/toast_notification_service'),
     await import('../../application/services/job_service'),
   ]);
 
   const httpService = new HttpService(coreStart.http);
   const anomalyDetectorService = new AnomalyDetectorService(httpService);
   const mlApi = mlApiProvider(httpService);
-  const toastNotificationService = toastNotificationServiceProvider(coreStart.notifications.toasts);
   const mlJobService = mlJobServiceFactory(mlApi);
   const mlResultsService = mlResultsServiceProvider(mlApi);
-  const mlTimeSeriesSearchService = timeSeriesSearchServiceFactory(mlResultsService, mlApi);
   const mlTimeSeriesExplorerService = timeSeriesExplorerServiceFactory(
     coreStart.uiSettings,
     mlApi,
@@ -82,9 +74,7 @@ export const getMlServices = async (
     mlCapabilities,
     mlFieldFormatService,
     mlResultsService,
-    mlTimeSeriesSearchService,
     mlTimeSeriesExplorerService,
-    toastNotificationService,
   };
 };
 
diff --git a/x-pack/plugins/ml/public/embeddables/types.ts b/x-pack/plugins/ml/public/embeddables/types.ts
index 1bcb0f9ae3579..f1423e42c7bb2 100644
--- a/x-pack/plugins/ml/public/embeddables/types.ts
+++ b/x-pack/plugins/ml/public/embeddables/types.ts
@@ -34,7 +34,6 @@ import type { AnomalyTimelineService } from '../application/services/anomaly_tim
 import type { MlFieldFormatService } from '../application/services/field_format_service';
 import type { MlApi } from '../application/services/ml_api_service';
 import type { MlResultsService } from '../application/services/results_service';
-import type { MlTimeSeriesSearchService } from '../application/timeseriesexplorer/timeseriesexplorer_utils/time_series_search_service';
 import type { TimeSeriesExplorerService } from '../application/util/time_series_explorer_service';
 import type { ToastNotificationService } from '../application/services/toast_notification_service';
 import type {
@@ -245,7 +244,6 @@ export interface SingleMetricViewerServices {
   mlCapabilities: MlCapabilitiesService;
   mlFieldFormatService: MlFieldFormatService;
   mlResultsService: MlResultsService;
-  mlTimeSeriesSearchService?: MlTimeSeriesSearchService;
   mlTimeSeriesExplorerService?: TimeSeriesExplorerService;
   toastNotificationService?: ToastNotificationService;
 }
diff --git a/x-pack/plugins/ml/public/shared_components/single_metric_viewer/single_metric_viewer.tsx b/x-pack/plugins/ml/public/shared_components/single_metric_viewer/single_metric_viewer.tsx
index 39f22e2e988db..cf960bed3c216 100644
--- a/x-pack/plugins/ml/public/shared_components/single_metric_viewer/single_metric_viewer.tsx
+++ b/x-pack/plugins/ml/public/shared_components/single_metric_viewer/single_metric_viewer.tsx
@@ -123,7 +123,7 @@ const SingleMetricViewerWrapper: FC<SingleMetricViewerPropsWithDeps> = ({
   const [errorEncountered, setErrorEncountered] = useState<number | undefined>();
 
   const isMounted = useMountedState();
-  const { mlApi, mlTimeSeriesExplorerService, toastNotificationService } = mlServices;
+  const { mlApi, mlTimeSeriesExplorerService } = mlServices;
   const startServices = pick(coreStart, 'analytics', 'i18n', 'theme');
   const datePickerDeps: DatePickerDependencies = {
     ...pick(coreStart, ['http', 'notifications', 'theme', 'uiSettings', 'i18n']),
@@ -270,36 +270,32 @@ const SingleMetricViewerWrapper: FC<SingleMetricViewerPropsWithDeps> = ({
               }}
             >
               <DatePickerContextProvider {...datePickerDeps}>
-                {selectedJobId !== undefined &&
-                  autoZoomDuration !== undefined &&
-                  selectedJobId === selectedJobWrapper?.job.job_id && (
-                    <TimeSeriesExplorerEmbeddableChart
-                      api={api}
-                      chartWidth={chartDimensions.width - containerPadding}
-                      chartHeight={chartDimensions.height - containerPadding}
-                      dataViewsService={pluginStart.data.dataViews}
-                      toastNotificationService={toastNotificationService}
-                      appStateHandler={appStateHandler}
-                      autoZoomDuration={autoZoomDuration}
-                      bounds={bounds}
-                      dateFormatTz={tz.guess()}
-                      lastRefresh={lastRefresh ?? 0}
-                      previousRefresh={previousRefresh}
-                      selectedJobId={selectedJobId}
-                      selectedDetectorIndex={selectedDetectorIndex}
-                      selectedEntities={selectedEntities}
-                      selectedForecastId={selectedForecastId}
-                      tableInterval="auto"
-                      tableSeverity={0}
-                      zoom={zoom}
-                      functionDescription={functionDescription}
-                      selectedJob={selectedJobWrapper.job}
-                      selectedJobStats={selectedJobWrapper.stats}
-                      onRenderComplete={onRenderComplete}
-                      onForecastComplete={onForecastComplete}
-                      shouldShowForecastButton={shouldShowForecastButton}
-                    />
-                  )}
+                {selectedJobWrapper !== undefined && autoZoomDuration !== undefined && (
+                  <TimeSeriesExplorerEmbeddableChart
+                    api={api}
+                    chartWidth={chartDimensions.width - containerPadding}
+                    chartHeight={chartDimensions.height - containerPadding}
+                    appStateHandler={appStateHandler}
+                    autoZoomDuration={autoZoomDuration}
+                    bounds={bounds}
+                    dateFormatTz={tz.guess()}
+                    isEmbeddable={true}
+                    lastRefresh={lastRefresh ?? 0}
+                    previousRefresh={previousRefresh}
+                    selectedDetectorIndex={selectedDetectorIndex}
+                    selectedEntities={selectedEntities}
+                    selectedForecastId={selectedForecastId}
+                    tableInterval="auto"
+                    tableSeverity={0}
+                    zoom={zoom}
+                    functionDescription={functionDescription}
+                    selectedJob={selectedJobWrapper.job}
+                    selectedJobStats={selectedJobWrapper.stats}
+                    onRenderComplete={onRenderComplete}
+                    onForecastComplete={onForecastComplete}
+                    shouldShowForecastButton={shouldShowForecastButton}
+                  />
+                )}
               </DatePickerContextProvider>
             </KibanaContextProvider>
           </KibanaRenderContextProvider>