[Bug] performance improvement

dashboards-observability/public/components/event_analytics/explorer/explorer.tsx

@@ -320,6 +320,7 @@ export const Explorer = ({
     const curQuery = queryRef.current;
     const rawQueryStr = buildQuery(appBasedRef.current, curQuery![RAW_QUERY]);
     const curIndex = getIndexPatternFromRawQuery(rawQueryStr);
+
     if (isEmpty(rawQueryStr)) return;
 
     if (isEmpty(curIndex)) {
@@ -328,7 +329,6 @@ export const Explorer = ({
     }
 
     let curTimestamp: string = curQuery![SELECTED_TIMESTAMP];
-
     if (isEmpty(curTimestamp)) {
       const defaultTimestamp = await getDefaultTimestampByIndexPattern(curIndex);
       if (isEmpty(defaultTimestamp.default_timestamp)) {
@@ -415,6 +415,99 @@ export const Explorer = ({
     }
   };
 
+  // for testing purpose only: fix for multiple rerenders in case of update chart
+  const fetchDataUpdateChart = async (
+    startingTime?: string | undefined,
+    endingTime?: string | undefined,
+    updatedQuery?: any
+  ) => {
+    const curQuery = updatedQuery.query;
+    const rawQueryStr = curQuery[RAW_QUERY];
+    const curIndex = getIndexPatternFromRawQuery(rawQueryStr);
+    if (isEmpty(rawQueryStr)) return;
+
+    if (isEmpty(curIndex)) {
+      setToast('Query does not include valid index.', 'danger');
+      return;
+    }
+
+    let curTimestamp: string = curQuery![SELECTED_TIMESTAMP];
+    if (isEmpty(curTimestamp)) {
+      const defaultTimestamp = await getDefaultTimestampByIndexPattern(curIndex);
+      if (isEmpty(defaultTimestamp.default_timestamp)) {
+        setToast(defaultTimestamp.message, 'danger');
+        return;
+      }
+      curTimestamp = defaultTimestamp.default_timestamp;
+      if (defaultTimestamp.hasSchemaConflict) {
+        setToast(defaultTimestamp.message, 'danger');
+      }
+    }
+
+    if (isEqual(typeof startingTime, 'undefined') && isEqual(typeof endingTime, 'undefined')) {
+      startingTime = curQuery![SELECTED_DATE_RANGE][0];
+      endingTime = curQuery![SELECTED_DATE_RANGE][1];
+    }
+
+    // compose final query
+    const finalQuery = composeFinalQuery(
+      curQuery,
+      startingTime!,
+      endingTime!,
+      curTimestamp,
+      isLiveTailOnRef.current
+    );
+
+    await dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          finalQuery,
+          [SELECTED_TIMESTAMP]: curTimestamp,
+          [RAW_QUERY]: rawQueryStr,
+        },
+      })
+    );
+
+    // search
+    if (finalQuery.match(PPL_STATS_REGEX)) {
+      getVisualizations();
+    } else {
+      findAutoInterval(startTime, endTime);
+      if (isLiveTailOnRef.current) {
+        getLiveTail(undefined, (error) => {
+          const formattedError = formatError(error.name, error.message, error.body.message);
+          notifications.toasts.addError(formattedError, {
+            title: 'Error fetching events',
+          });
+        });
+      } else {
+        getEvents(undefined, (error) => {
+          const formattedError = formatError(error.name, error.message, error.body.message);
+          notifications.toasts.addError(formattedError, {
+            title: 'Error fetching events',
+          });
+        });
+      }
+      getCountVisualizations(minInterval);
+    }
+
+    // for comparing usage if for the same tab, user changed index from one to another
+    if (!isLiveTailOnRef.current) {
+      setPrevIndex(curTimestamp);
+      if (!queryRef.current!.isLoaded) {
+        dispatch(
+          changeQuery({
+            tabId,
+            query: {
+              isLoaded: true,
+            },
+          })
+        );
+      }
+    }
+  };
+
   const isIndexPatternChanged = (currentQuery: string, prevTabQuery: string) =>
     !isEqual(getIndexPatternFromRawQuery(currentQuery), getIndexPatternFromRawQuery(prevTabQuery));
 
@@ -1293,6 +1386,7 @@ export const Explorer = ({
         handleQueryChange,
         setTempQuery,
         fetchData,
+        fetchDataUpdateChart,
         explorerFields,
         explorerData,
         http,

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx

@@ -69,7 +69,9 @@ export const DataConfigPanelItem = ({
   queryManager,
 }: DataConfigPanelProps) => {
   const dispatch = useDispatch();
-  const { tabId, handleQueryChange, fetchData, curVisId } = useContext<any>(TabContext);
+  const { tabId, handleQueryChange, fetchData, fetchDataUpdateChart, curVisId } = useContext<any>(
+    TabContext
+  );
   const { data } = visualizations;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
   const {
@@ -204,6 +206,7 @@ export const DataConfigPanelItem = ({
     setIsAddConfigClicked(false);
   };
 
+  // updateChart is fixed for multiple rerenders and this is only for testing
   const updateChart = (updatedConfigList = configList) => {
     if (visualizations.vis.name === VIS_CHART_TYPES.Histogram) {
       dispatch(
@@ -226,37 +229,14 @@ export const DataConfigPanelItem = ({
         .queryBuilder()
         .build(data.query.rawQuery, composeAggregations(updatedConfigList, statsTokens));
 
-      batch(async () => {
-        await handleQueryChange(newQuery);
-        await dispatch(
-          changeQuery({
-            tabId,
-            query: {
-              ...data.query,
-              [RAW_QUERY]: newQuery,
-            },
-          })
-        );
-        await fetchData();
-        await dispatch(
-          changeVizConfig({
-            tabId,
-            vizId: visualizations.vis.name,
-            data: {
-              dataConfig: {
-                ...userConfigs.dataConfig,
-                [GROUPBY]: updatedConfigList[GROUPBY],
-                [AGGREGATIONS]: updatedConfigList[AGGREGATIONS],
-                [BREAKDOWNS]: updatedConfigList[BREAKDOWNS],
-                [SPAN]:
-                  !isEmpty(updatedConfigList[GROUPBY]) && !isEmpty(updatedConfigList[AGGREGATIONS])
-                    ? updatedConfigList?.span
-                    : undefined,
-              },
-            },
-          })
-        );
-      });
+      const updatedQuery = {
+        tabId,
+        query: {
+          ...data.query,
+          [RAW_QUERY]: newQuery,
+        },
+      };
+      fetchDataUpdateChart(undefined, undefined, updatedQuery);
     }
   };