From 8f4111e2040acd7a63a60a556a57264d4d00f647 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Fri, 16 Jul 2021 17:50:54 +0100
Subject: [PATCH] [ML] Fixing rare wizard detector state (#105966)

---
 .../rare_view/metric_selection_summary.tsx    | 32 ++++++++++++++-----
 .../components/rare_view/rare_view.tsx        |  2 +-
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/rare_view/metric_selection_summary.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/rare_view/metric_selection_summary.tsx
index 02566474512e..bb4b83f639be 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/rare_view/metric_selection_summary.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/rare_view/metric_selection_summary.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, useContext, useEffect, useState } from 'react';
+import React, { FC, useContext, useEffect, useState, useMemo } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 import { JobCreatorContext } from '../../../job_creator_context';
 import { RareJobCreator } from '../../../../../common/job_creator';
@@ -17,14 +17,15 @@ import { RARE_DETECTOR_TYPE } from './rare_view';
 import { DetectorDescription } from './detector_description';
 
 const DTR_IDX = 0;
-interface Props {
-  rareDetectorType: RARE_DETECTOR_TYPE;
-}
 
-export const RareDetectorsSummary: FC<Props> = ({ rareDetectorType }) => {
-  const { jobCreator: jc, chartLoader, resultsLoader, chartInterval } = useContext(
-    JobCreatorContext
-  );
+export const RareDetectorsSummary: FC = () => {
+  const {
+    jobCreator: jc,
+    chartLoader,
+    resultsLoader,
+    chartInterval,
+    jobCreatorUpdated,
+  } = useContext(JobCreatorContext);
   const jobCreator = jc as RareJobCreator;
 
   const [loadingData, setLoadingData] = useState(false);
@@ -32,6 +33,20 @@ export const RareDetectorsSummary: FC<Props> = ({ rareDetectorType }) => {
   const [eventRateChartData, setEventRateChartData] = useState<LineChartPoint[]>([]);
   const [jobIsRunning, setJobIsRunning] = useState(false);
 
+  const rareDetectorType = useMemo(() => {
+    if (jobCreator.rareField !== null) {
+      if (jobCreator.populationField === null) {
+        return RARE_DETECTOR_TYPE.RARE;
+      } else {
+        return jobCreator.frequentlyRare
+          ? RARE_DETECTOR_TYPE.FREQ_RARE_POPULATION
+          : RARE_DETECTOR_TYPE.RARE_POPULATION;
+      }
+    } else {
+      return RARE_DETECTOR_TYPE.RARE;
+    }
+  }, [jobCreatorUpdated]);
+
   function setResultsWrapper(results: Results) {
     const anomalies = results.anomalies[DTR_IDX];
     if (anomalies !== undefined) {
@@ -48,6 +63,7 @@ export const RareDetectorsSummary: FC<Props> = ({ rareDetectorType }) => {
     const resultsSubscription = resultsLoader.subscribeToResults(setResultsWrapper);
     jobCreator.subscribeToProgress(watchProgress);
     loadChart();
+
     return () => {
       resultsSubscription.unsubscribe();
     };
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/rare_view/rare_view.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/rare_view/rare_view.tsx
index d67cac8d0fc5..4d0ed3b58973 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/rare_view/rare_view.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/rare_view/rare_view.tsx
@@ -35,7 +35,7 @@ export const RareView: FC<Props> = ({ isActive, setCanProceed }) => {
   }, [rareFieldValid, settingsValid]);
 
   return isActive === false ? (
-    <RareDetectorsSummary rareDetectorType={rareDetectorType} />
+    <RareDetectorsSummary />
   ) : (
     <>
       <RareDetectors