Merge pull request #1215 from Cuiyansong/master

Fix Drill Option State Issue

Author: xieliuduo

frontend/src/app/components/ChartEditor.tsx

@@ -22,7 +22,6 @@ import { DownloadFileType } from 'app/constants';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import useMount from 'app/hooks/useMount';
 import { ChartDataRequestBuilder } from 'app/models/ChartDataRequestBuilder';
-import { ChartDrillOption } from 'app/models/ChartDrillOption';
 import ChartManager from 'app/models/ChartManager';
 import workbenchSlice, {
   useWorkbenchSlice,
@@ -52,9 +51,11 @@ import {
 import { IChart } from 'app/types/Chart';
 import { IChartDrillOption } from 'app/types/ChartDrillOption';
 import { ChartDTO } from 'app/types/ChartDTO';
-import { getDrillPaths } from 'app/utils/chartHelper';
 import { makeDownloadDataTask } from 'app/utils/fetch';
-import { transferChartConfigs } from 'app/utils/internalChartHelper';
+import {
+  getChartDrillOption,
+  transferChartConfigs,
+} from 'app/utils/internalChartHelper';
 import { CommonFormTypes } from 'globalConstants';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -200,12 +201,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 (!isEmptyArray(chartConfig?.datas) && !drillOptionRef.current) {
+      drillOptionRef.current = getChartDrillOption(chartConfig?.datas);
     }
   }, [chartConfig?.datas, drillOptionRef]);
 
@@ -219,7 +216,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 +270,10 @@ export const ChartEditor: FC<ChartEditorProps> = ({
         },
       }),
     );
+    drillOptionRef.current = getChartDrillOption(
+      chartConfig?.datas,
+      drillOptionRef.current,
+    );
   }, [dispatch, chart?.meta?.id, registerChartEvents]);
 
   const handleChartChange = (c: IChart) => {
@@ -292,6 +293,10 @@ export const ChartEditor: FC<ChartEditorProps> = ({
         },
       }),
     );
+    drillOptionRef.current = getChartDrillOption(
+      chartConfig?.datas,
+      drillOptionRef.current,
+    );
     if (!expensiveQuery) {
       dispatch(refreshDatasetAction({ drillOption: drillOptionRef?.current }));
     } else {
@@ -301,20 +306,6 @@ export const ChartEditor: FC<ChartEditorProps> = ({
 
   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 +323,17 @@ export const ChartEditor: FC<ChartEditorProps> = ({
           type,
           payload,
           needRefresh: payload.needRefresh,
-          drillOption: drillOptionRef?.current,
+          updateDrillOption: config => {
+            drillOptionRef.current = getChartDrillOption(
+              config?.datas,
+              drillOptionRef.current,
+            );
+            return drillOptionRef.current;
+          },
         }),
       );
     },
-    [chartConfig?.datas, dispatch, expensiveQuery],
+    [dispatch, expensiveQuery],
   );
 
   const handleDataViewChanged = useCallback(() => {

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);

frontend/src/app/pages/MainPage/pages/VizPage/ChartPreview/ChartPreview.tsx

@@ -24,20 +24,18 @@ import { VizHeader } from 'app/components/VizHeader';
 import { useCacheWidthHeight } from 'app/hooks/useCacheWidthHeight';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import { ChartDataRequestBuilder } from 'app/models/ChartDataRequestBuilder';
-import { ChartDrillOption } from 'app/models/ChartDrillOption';
 import ChartManager from 'app/models/ChartManager';
 import ChartDrillContext from 'app/pages/ChartWorkbenchPage/contexts/ChartDrillContext';
 import { useMainSlice } from 'app/pages/MainPage/slice';
 import { IChart } from 'app/types/Chart';
 import { IChartDrillOption } from 'app/types/ChartDrillOption';
-import { getDrillPaths } from 'app/utils/chartHelper';
 import { generateShareLinkAsync, makeDownloadDataTask } from 'app/utils/fetch';
+import { getChartDrillOption } from 'app/utils/internalChartHelper';
 import { FC, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import { BORDER_RADIUS, SPACE_LG } from 'styles/StyleConstants';
-import { isEmptyArray } from 'utils/object';
 import { useSaveAsViz } from '../hooks/useSaveAsViz';
 import { useVizSlice } from '../slice';
 import {
@@ -118,19 +116,10 @@ const ChartPreviewBoard: FC<{
         setVersion(newChartPreview.version);
         setChartPreview(newChartPreview);
 
-        const drillPaths = getDrillPaths(newChartPreview?.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);
-        }
+        drillOptionRef.current = getChartDrillOption(
+          newChartPreview?.chartConfig?.datas,
+          drillOptionRef?.current,
+        );
 
         if (
           !chart ||

frontend/src/app/pages/SharePage/ChartForShare.tsx

@@ -21,15 +21,13 @@ import ChartDrillPaths from 'app/components/ChartDrill/ChartDrillPaths';
 import { ChartIFrameContainer } from 'app/components/ChartIFrameContainer';
 import useMount from 'app/hooks/useMount';
 import useResizeObserver from 'app/hooks/useResizeObserver';
-import { ChartDrillOption } from 'app/models/ChartDrillOption';
 import ChartManager from 'app/models/ChartManager';
 import { IChart } from 'app/types/Chart';
 import { IChartDrillOption } from 'app/types/ChartDrillOption';
-import { getDrillPaths } from 'app/utils/chartHelper';
+import { getChartDrillOption } from 'app/utils/internalChartHelper';
 import { FC, memo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
-import { isEmptyArray } from 'utils/object';
 import ChartDrillContext from '../ChartWorkbenchPage/contexts/ChartDrillContext';
 import ControllerPanel from '../MainPage/pages/VizPage/ChartPreview/components/ControllerPanel';
 import {
@@ -77,19 +75,10 @@ const ChartForShare: FC<{
     if (!chartPreview) {
       return;
     }
-    const drillPaths = getDrillPaths(chartPreview?.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);
-    }
+    drillOptionRef.current = getChartDrillOption(
+      chartPreview?.chartConfig?.datas,
+      drillOptionRef?.current,
+    );
     dispatch(fetchShareDataSetByPreviewChartAction({ preview: chartPreview }));
     registerChartEvents(chart);
   });

frontend/src/app/utils/chartHelper.ts

@@ -1564,18 +1564,3 @@ export const getDrillableRows = (
       return config.rows || [];
     });
 };
-
-/**
- * Get all Drill Paths
- *
- * @param {ChartDataConfig[]} configs
- * @return {*}  {ChartDataSectionField[]}
- */
-export const getDrillPaths = (
-  configs?: ChartDataConfig[],
-): ChartDataSectionField[] => {
-  return (configs || [])
-    ?.filter(c => c.type === ChartDataSectionType.GROUP)
-    ?.filter(d => Boolean(d.drillable))
-    ?.flatMap(r => r.rows || []);
-};

frontend/src/app/utils/internalChartHelper.ts

@@ -22,6 +22,7 @@ import {
   ChartDataViewFieldCategory,
   DataViewFieldType,
 } from 'app/constants';
+import { ChartDrillOption } from 'app/models/ChartDrillOption';
 import {
   ChartConfig,
   ChartDataConfig,
@@ -33,6 +34,7 @@ import {
   ChartStyleConfigDTO,
 } from 'app/types/ChartConfigDTO';
 import { ChartDataViewMeta } from 'app/types/ChartDataViewMeta';
+import { IChartDrillOption } from 'app/types/ChartDrillOption';
 import {
   cond,
   curry,
@@ -602,3 +604,45 @@ export const buildDragItem = (item, children: any[] = []) => {
     children: children.map(c => buildDragItem(c)),
   };
 };
+
+/**
+ * Get all Drill Paths
+ *
+ * @param {ChartDataConfig[]} configs
+ * @return {*}  {ChartDataSectionField[]}
+ */
+const getDrillPaths = (
+  configs?: ChartDataConfig[],
+): ChartDataSectionField[] => {
+  return (configs || [])
+    ?.filter(c => c.type === ChartDataSectionType.GROUP)
+    ?.filter(d => Boolean(d.drillable))
+    ?.flatMap(r => r.rows || []);
+};
+
+/**
+ * Create or Update Chart Drill Option
+ *
+ * @param {ChartDataConfig[]} [datas]
+ * @param {IChartDrillOption} [drillOption]
+ * @return {*}  {(IChartDrillOption | undefined)}
+ */
+export const getChartDrillOption = (
+  datas?: ChartDataConfig[],
+  drillOption?: IChartDrillOption,
+): IChartDrillOption | undefined => {
+  const newDrillPaths = getDrillPaths(datas);
+  if (isEmptyArray(newDrillPaths)) {
+    return undefined;
+  }
+  if (
+    !isEmptyArray(newDrillPaths) &&
+    drillOption
+      ?.getAllFields()
+      ?.map(p => p.uid)
+      .join('-') !== newDrillPaths.map(p => p.uid).join('-')
+  ) {
+    return new ChartDrillOption(newDrillPaths);
+  }
+  return drillOption;
+};