[ML][data visualizer]: Fix choropleth map disappears when time range …

…is changed (#181933) Fixes #181932 --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Apr 29, 2024 · 4d35334 · 4d35334
1 parent 70fb22d
commit 4d35334
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 23 deletions.
diff --git a/...ation/common/components/stats_table/components/field_data_expanded_row/choropleth_map.tsx b/...ation/common/components/stats_table/components/field_data_expanded_row/choropleth_map.tsx
@@ -95,7 +95,7 @@ export const getChoroplethTopValuesLayer = (
 };
 
 interface Props {
-  stats: FieldVisStats | undefined;
+  stats: FieldVisStats;
   suggestion: EMSTermJoinConfig;
 }
 
@@ -106,15 +106,13 @@ export const ChoroplethMap: FC<Props> = ({ stats, suggestion }) => {
     },
   } = useDataVisualizerKibana();
 
-  const { fieldName, isTopValuesSampled, topValues, sampleCount } = stats!;
+  const { fieldName, isTopValuesSampled, topValues, sampleCount } = stats;
 
   const layerList: VectorLayerDescriptor[] = useMemo(
     () => [getChoroplethTopValuesLayer(fieldName || '', topValues || [], suggestion)],
     [suggestion, fieldName, topValues]
   );
 
-  if (!stats) return null;
-
   const totalDocuments = stats.totalDocuments ?? sampleCount ?? 0;
 
   const countsElement = totalDocuments ? (

diff --git a/...tion/common/components/stats_table/components/field_data_expanded_row/keyword_content.tsx b/...tion/common/components/stats_table/components/field_data_expanded_row/keyword_content.tsx
@@ -6,7 +6,7 @@
  */
 
 import type { FC } from 'react';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { EMSTermJoinConfig } from '@kbn/maps-plugin/public';
 import type { FieldDataRowProps } from '../../types/field_data_row';
 import { TopValues } from '../../../top_values';
@@ -17,31 +17,41 @@ import { ChoroplethMap } from './choropleth_map';
 import { ErrorMessageContent } from './error_message';
 
 export const KeywordContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) => {
-  const [EMSSuggestion, setEMSSuggestion] = useState<EMSTermJoinConfig | null | undefined>();
+  const [suggestion, setSuggestion] = useState<EMSTermJoinConfig | null>(null);
   const { stats, fieldName } = config;
   const fieldFormat = 'fieldFormat' in config ? config.fieldFormat : undefined;
   const {
     services: { maps: mapsPlugin },
   } = useDataVisualizerKibana();
 
-  const loadEMSTermSuggestions = useCallback(async () => {
+  useEffect(() => {
     if (!mapsPlugin) return;
-    const suggestion: EMSTermJoinConfig | null = await mapsPlugin.suggestEMSTermJoinConfig({
-      sampleValues: Array.isArray(stats?.topValues)
-        ? stats?.topValues.map((value) => value.key)
-        : [],
-      sampleValuesColumnName: fieldName || '',
-    });
-    setEMSSuggestion(suggestion);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fieldName]);
+    if (!stats?.topValues) {
+      setSuggestion(null);
+      return;
+    }
 
-  useEffect(
-    function getInitialEMSTermSuggestion() {
-      loadEMSTermSuggestions();
-    },
-    [loadEMSTermSuggestions]
-  );
+    let ignore = false;
+    mapsPlugin
+      .suggestEMSTermJoinConfig({
+        sampleValues: stats.topValues.map((value) => value.key),
+        sampleValuesColumnName: fieldName || '',
+      })
+      .then((nextSuggestion) => {
+        if (!ignore) {
+          setSuggestion(nextSuggestion);
+        }
+      })
+      .catch(() => {
+        if (!ignore) {
+          setSuggestion(null);
+        }
+      });
+
+    return () => {
+      ignore = true;
+    };
+  }, [fieldName, mapsPlugin, stats?.topValues]);
 
   return (
     <ExpandedRowContent dataTestSubj={'dataVisualizerKeywordContent'}>
@@ -65,7 +75,7 @@ export const KeywordContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) =
         />
       ) : null}
 
-      {EMSSuggestion && stats && <ChoroplethMap stats={stats} suggestion={EMSSuggestion} />}
+      {suggestion && stats && <ChoroplethMap stats={stats} suggestion={suggestion} />}
     </ExpandedRowContent>
   );
 };