[ML] Use useMemo() for DataLoader.

elastic · Jul 14, 2020 · 3883477 · 3883477
1 parent b794e97
commit 3883477
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/.../public/application/data_frame_analytics/pages/analytics_creation/hooks/use_index_data.ts b/.../public/application/data_frame_analytics/pages/analytics_creation/hooks/use_index_data.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { EuiDataGridColumn } from '@elastic/eui';
 
@@ -106,9 +106,12 @@ export const useIndexData = (
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [indexPattern.title, JSON.stringify([query, pagination, sortingColumns])]);
 
+ const dataLoader = useMemo(() => new DataLoader(indexPattern, toastNotifications), [
+ indexPattern,
+ ]);
+
  const fetchColumnChartsData = async function () {
  try {
- const dataLoader = new DataLoader(indexPattern, toastNotifications);
  const columnChartsData = await dataLoader.loadFieldHistograms(
  columns
  .filter((cT) => dataGrid.visibleColumns.includes(cT.id))

diff --git a/...ges/analytics_exploration/components/exploration_results_table/use_exploration_results.ts b/...ges/analytics_exploration/components/exploration_results_table/use_exploration_results.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { EuiDataGridColumn } from '@elastic/eui';
 
@@ -73,10 +73,15 @@ export const useExplorationResults = (
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [jobConfig && jobConfig.id, dataGrid.pagination, searchQuery, dataGrid.sortingColumns]);
 
+ const dataLoader = useMemo(
+ () =>
+ indexPattern !== undefined ? new DataLoader(indexPattern, toastNotifications) : undefined,
+ [indexPattern]
+ );
+
  const fetchColumnChartsData = async function () {
  try {
- if (jobConfig !== undefined && indexPattern !== undefined) {
- const dataLoader = new DataLoader(indexPattern, toastNotifications);
+ if (jobConfig !== undefined && dataLoader !== undefined) {
  const columnChartsData = await dataLoader.loadFieldHistograms(
  columns
  .filter((cT) => dataGrid.visibleColumns.includes(cT.id))

diff --git a/..._analytics/pages/analytics_exploration/components/outlier_exploration/use_outlier_data.ts b/..._analytics/pages/analytics_exploration/components/outlier_exploration/use_outlier_data.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { EuiDataGridColumn } from '@elastic/eui';
 
@@ -80,10 +80,17 @@ export const useOutlierData = (
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [jobConfig && jobConfig.id, dataGrid.pagination, searchQuery, dataGrid.sortingColumns]);
 
+ const dataLoader = useMemo(
+ () =>
+ indexPattern !== undefined
+ ? new DataLoader(indexPattern, getToastNotifications())
+ : undefined,
+ [indexPattern]
+ );
+
  const fetchColumnChartsData = async function () {
  try {
- if (jobConfig !== undefined && indexPattern !== undefined) {
- const dataLoader = new DataLoader(indexPattern, getToastNotifications());
+ if (jobConfig !== undefined && dataLoader !== undefined) {
  const columnChartsData = await dataLoader.loadFieldHistograms(
  columns
  .filter((cT) => dataGrid.visibleColumns.includes(cT.id))

diff --git a/x-pack/plugins/ml/public/application/datavisualizer/index_based/page.tsx b/x-pack/plugins/ml/public/application/datavisualizer/index_based/page.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, Fragment, useEffect, useState } from 'react';
+import React, { FC, Fragment, useEffect, useMemo, useState } from 'react';
 import { merge } from 'rxjs';
 import { i18n } from '@kbn/i18n';
 
@@ -108,7 +108,10 @@ export const Page: FC = () => {
  autoRefreshSelector: true,
  });
 
- const dataLoader = new DataLoader(currentIndexPattern, getToastNotifications());
+ const dataLoader = useMemo(() => new DataLoader(currentIndexPattern, getToastNotifications()), [
+ currentIndexPattern,
+ ]);
+
  const [globalState, setGlobalState] = useUrlState('_g');
  useEffect(() => {
  if (globalState?.time !== undefined) {