refactor(chart): refactor chart dill option ref

Author: Cuiyansong

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,8 +201,8 @@ export const ChartEditor: FC<ChartEditorProps> = ({
   }, [backendChart?.config?.chartGraphId]);
 
   useEffect(() => {
-    if (!drillOptionRef.current) {
-      initChartDrillOption(chartConfig?.datas);
+    if (!isEmptyArray(chartConfig?.datas) && !drillOptionRef.current) {
+      drillOptionRef.current = getChartDrillOption(chartConfig?.datas);
     }
   }, [chartConfig?.datas, drillOptionRef]);
 
@@ -269,7 +270,10 @@ export const ChartEditor: FC<ChartEditorProps> = ({
         },
       }),
     );
-    initChartDrillOption(finalChartConfig?.datas);
+    drillOptionRef.current = getChartDrillOption(
+      chartConfig?.datas,
+      drillOptionRef.current,
+    );
   }, [dispatch, chart?.meta?.id, registerChartEvents]);
 
   const handleChartChange = (c: IChart) => {
@@ -289,9 +293,12 @@ export const ChartEditor: FC<ChartEditorProps> = ({
         },
       }),
     );
-    const drillOpt = initChartDrillOption(finalChartConfig?.datas);
+    drillOptionRef.current = getChartDrillOption(
+      chartConfig?.datas,
+      drillOptionRef.current,
+    );
     if (!expensiveQuery) {
-      dispatch(refreshDatasetAction({ drillOption: drillOpt }));
+      dispatch(refreshDatasetAction({ drillOption: drillOptionRef?.current }));
     } else {
       setAllowQuery(true);
     }
@@ -316,7 +323,13 @@ export const ChartEditor: FC<ChartEditorProps> = ({
           type,
           payload,
           needRefresh: payload.needRefresh,
-          updateDrillOption: config => initChartDrillOption(config?.datas),
+          updateDrillOption: config => {
+            drillOptionRef.current = getChartDrillOption(
+              config?.datas,
+              drillOptionRef.current,
+            );
+            return drillOptionRef.current;
+          },
         }),
       );
     },
@@ -529,25 +542,6 @@ 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/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;
+};