fix(chart): fix drill option state issue

Author: Cuiyansong

frontend/src/app/components/ChartEditor.tsx

@@ -200,12 +200,8 @@ export const ChartEditor: FC<ChartEditorProps> = ({
   }, [backendChart?.config?.chartGraphId]);
 
   useEffect(() => {
-    const drillPaths = getDrillPaths(chartConfig?.datas);
-    if (isEmptyArray(drillPaths)) {
-      drillOptionRef.current = undefined;
-    }
-    if (!isEmptyArray(drillPaths) && !drillOptionRef.current) {
-      drillOptionRef.current = new ChartDrillOption(drillPaths);
+    if (!drillOptionRef.current) {
+      initChartDrillOption(chartConfig?.datas);
     }
   }, [chartConfig?.datas, drillOptionRef]);
 
@@ -219,7 +215,7 @@ export const ChartEditor: FC<ChartEditorProps> = ({
               const option = drillOptionRef.current;
               option.drillDown(param.data.rowData);
               drillOptionRef.current = option;
-              handleDrillOptionChange(option);
+              handleDrillOptionChange?.(option);
               return;
             }
             if (
@@ -273,6 +269,7 @@ export const ChartEditor: FC<ChartEditorProps> = ({
         },
       }),
     );
+    initChartDrillOption(finalChartConfig?.datas);
   }, [dispatch, chart?.meta?.id, registerChartEvents]);
 
   const handleChartChange = (c: IChart) => {
@@ -292,29 +289,16 @@ export const ChartEditor: FC<ChartEditorProps> = ({
         },
       }),
     );
+    const drillOpt = initChartDrillOption(finalChartConfig?.datas);
     if (!expensiveQuery) {
-      dispatch(refreshDatasetAction({ drillOption: drillOptionRef?.current }));
+      dispatch(refreshDatasetAction({ drillOption: drillOpt }));
     } else {
       setAllowQuery(true);
     }
   };
 
   const handleChartConfigChange = useCallback(
     (type, payload) => {
-      const drillPaths = getDrillPaths(chartConfig?.datas);
-      if (isEmptyArray(drillPaths)) {
-        drillOptionRef.current = undefined;
-      }
-      if (
-        !isEmptyArray(drillPaths) &&
-        drillOptionRef.current
-          ?.getAllFields()
-          ?.map(p => p.uid)
-          .join('-') !== drillPaths.map(p => p.uid).join('-')
-      ) {
-        drillOptionRef.current = new ChartDrillOption(drillPaths);
-      }
-
       if (expensiveQuery) {
         dispatch(
           workbenchSlice.actions.updateChartConfig({
@@ -332,11 +316,11 @@ export const ChartEditor: FC<ChartEditorProps> = ({
           type,
           payload,
           needRefresh: payload.needRefresh,
-          drillOption: drillOptionRef?.current,
+          updateDrillOption: config => initChartDrillOption(config?.datas),
         }),
       );
     },
-    [chartConfig?.datas, dispatch, expensiveQuery],
+    [dispatch, expensiveQuery],
   );
 
   const handleDataViewChanged = useCallback(() => {
@@ -545,6 +529,25 @@ export const ChartEditor: FC<ChartEditorProps> = ({
     dispatch(refreshDatasetAction({ drillOption: option }));
   };
 
+  const initChartDrillOption = (
+    datas?: any[],
+  ): IChartDrillOption | undefined => {
+    const drillPaths = getDrillPaths(datas);
+    if (isEmptyArray(drillPaths)) {
+      drillOptionRef.current = undefined;
+    }
+    if (
+      !isEmptyArray(drillPaths) &&
+      drillOptionRef.current
+        ?.getAllFields()
+        ?.map(p => p.uid)
+        .join('-') !== drillPaths.map(p => p.uid).join('-')
+    ) {
+      drillOptionRef.current = new ChartDrillOption(drillPaths);
+    }
+    return drillOptionRef.current;
+  };
+
   return (
     <StyledChartWorkbenchPage>
       <SaveFormContext.Provider value={saveFormContextValue}>

frontend/src/app/pages/ChartWorkbenchPage/slice/thunks.ts

@@ -19,6 +19,7 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import beginViewModelMigration from 'app/migration/ViewConfig/migrationViewModelConfig';
 import { ChartDataRequestBuilder } from 'app/models/ChartDataRequestBuilder';
+import { ChartConfig } from 'app/types/ChartConfig';
 import { ChartDataRequest } from 'app/types/ChartDataRequest';
 import { IChartDrillOption } from 'app/types/ChartDrillOption';
 import { ChartDTO } from 'app/types/ChartDTO';
@@ -125,7 +126,9 @@ export const updateChartConfigAndRefreshDatasetAction = createAsyncThunk(
       type: string;
       payload: ChartConfigPayloadType;
       needRefresh?: boolean;
-      drillOption?: IChartDrillOption;
+      updateDrillOption: (
+        config?: ChartConfig,
+      ) => IChartDrillOption | undefined;
     },
     thunkAPI,
   ) => {
@@ -134,10 +137,12 @@ export const updateChartConfigAndRefreshDatasetAction = createAsyncThunk(
       await thunkAPI.dispatch(
         workbenchSlice.actions.updateShadowChartConfig(null),
       );
+      const state = thunkAPI.getState() as any;
+      const workbenchState = state.workbench as typeof initState;
+      const chartConfig = workbenchState.chartConfig;
+      const drillOpt = arg.updateDrillOption?.(chartConfig);
       if (arg.needRefresh) {
-        thunkAPI.dispatch(
-          refreshDatasetAction({ drillOption: arg.drillOption }),
-        );
+        thunkAPI.dispatch(refreshDatasetAction({ drillOption: drillOpt }));
       }
     } catch (error) {
       return rejectHandle(error, thunkAPI.rejectWithValue);