diff --git a/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.d.ts b/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.d.ts
new file mode 100644
index 0000000000000..c8a7bba2d189f
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.d.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { FC } from 'react';
+
+import { IndexPattern } from 'ui/index_patterns';
+
+declare const DataRecognizer: FC<{
+  indexPattern: IndexPattern;
+  results: any;
+  className: string;
+}>;
diff --git a/x-pack/legacy/plugins/ml/public/components/data_recognizer/index.js b/x-pack/legacy/plugins/ml/public/components/data_recognizer/index.ts
similarity index 84%
rename from x-pack/legacy/plugins/ml/public/components/data_recognizer/index.js
rename to x-pack/legacy/plugins/ml/public/components/data_recognizer/index.ts
index 68952807d4240..bb5a2ac4e479f 100644
--- a/x-pack/legacy/plugins/ml/public/components/data_recognizer/index.js
+++ b/x-pack/legacy/plugins/ml/public/components/data_recognizer/index.ts
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
 import './data_recognizer_directive';
-import './data_recognizer';
+
+export { DataRecognizer } from './data_recognizer';
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx b/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx
index 80cb73a1f64ed..9a291cabf558f 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -15,12 +15,22 @@ import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 
 import { useUiChromeContext } from '../../../../contexts/ui/use_ui_chrome_context';
 import { CreateJobLinkCard } from '../../../../components/create_job_link_card';
+import { DataRecognizer } from '../../../../components/data_recognizer';
 
 interface Props {
   indexPattern: IndexPattern;
 }
 
 export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
+  const [recognizerResultsCount, setRecognizerResultsCount] = useState(0);
+
+  const recognizerResults = {
+    count: 0,
+    onChange() {
+      setRecognizerResultsCount(recognizerResults.count);
+    },
+  };
+
   const basePath = useUiChromeContext().getBasePath();
 
   function openAdvancedJobWizard() {
@@ -29,6 +39,9 @@ export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
     window.open(`${basePath}/app/ml#/jobs/new_job/advanced?index=${indexPattern}`, '_self');
   }
 
+  // Note we use display:none for the DataRecognizer section as it needs to be
+  // passed the recognizerResults object, and then run the recognizer check which
+  // controls whether the recognizer section is ultimately displayed.
   return (
     <EuiPanel data-test-subj="mlDataVisualizerActionsPanel">
       <EuiTitle>
@@ -40,6 +53,23 @@ export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
         </h2>
       </EuiTitle>
       <EuiSpacer size="s" />
+      <div style={recognizerResultsCount === 0 ? { display: 'none' } : {}}>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.ml.datavisualizer.actionsPanel.selectKnownConfigurationDescription"
+              defaultMessage="Select known configurations for recognized data:"
+            />
+          </p>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <DataRecognizer
+          indexPattern={indexPattern}
+          results={recognizerResults}
+          className="euiFlexGroup euiFlexGrid--gutterLarge euiFlexGroup--responsive euiFlexGroup--wrap"
+        ></DataRecognizer>
+        <EuiSpacer size="l" />
+      </div>
       <EuiText>
         <p>
           <FormattedMessage