fix: Incorrect rendering of copied dashboard charts

Author: scottsut

frontend/src/app/pages/DashBoardPage/actions/widgetAction.ts

@@ -225,13 +225,12 @@ export const widgetLinkEventAction =
       widgetMap: widgetMap,
       params: undefined,
     });
-    const boardLinkWidgets = Object.entries(widgetMapMap || {})
-      .filter(([k, v]) => {
-        return targetLinkDataChartIds.includes(v.datachartId);
-      })
-      .map(([k, v]) => v);
+    const boardLinkWidgets = Object.values(widgetMapMap || {}).filter(w =>
+      targetLinkDataChartIds.includes(w.datachartId),
+    );
     boardLinkWidgets.forEach(targetWidget => {
-      const dataChart = dataChartMap?.[targetWidget.datachartId];
+      const dataChart =
+        dataChartMap[widget.dashboardId]?.[targetWidget.datachartId];
       const dimensionNames = dataChart?.config?.chartConfig?.datas?.flatMap(
         d => {
           if (
@@ -503,14 +502,19 @@ export const showJumpErrorAction =
     }
   };
 export const setWidgetSampleDataAction =
-  (args: { boardEditing: boolean; datachartId: string; wid: string }) =>
+  (args: {
+    boardId: string;
+    boardEditing: boolean;
+    datachartId: string;
+    wid: string;
+  }) =>
   (dispatch, getState) => {
-    const { boardEditing, datachartId, wid } = args;
+    const { boardId, boardEditing, datachartId, wid } = args;
     const rootState = getState() as RootState;
     const viewBoardState = rootState.board as BoardState;
     const editBoardState = rootState.editBoard as EditBoardState;
     const dataChartMap = viewBoardState.dataChartMap;
-    const curChart = dataChartMap[datachartId];
+    const curChart = dataChartMap[boardId][datachartId];
     if (!curChart) return;
     if (curChart.viewId) return;
     if (!curChart.config.sampleData) return;

frontend/src/app/pages/DashBoardPage/components/ActionProvider/WidgetActionProvider.tsx

@@ -240,6 +240,7 @@ export const WidgetActionProvider: FC<{
           dispatch(
             editChartInWidgetAction({
               orgId,
+              dashboardId: widget.dashboardId,
               widgetId: widget.id,
               chartName: widget.config.name,
               dataChartId: widget.datachartId,
@@ -270,17 +271,24 @@ export const WidgetActionProvider: FC<{
         onEditWidgetUnLock: (id: string) => {
           dispatch(editBoardStackActions.toggleLockWidget({ id, lock: false }));
         },
-        onWidgetDataUpdate: ({ computedFields, payload, widgetId }) => {
+        onWidgetChartDataConfigUpdate: ({
+          dashboardId,
+          datachartId,
+          computedFields,
+          options,
+        }) => {
           dispatch(
-            boardActions.updateDataChartGroup({
-              id: widgetId,
-              payload,
+            boardActions.updateDataChartDataConfigGroupRows({
+              dashboardId,
+              datachartId,
+              options,
             }),
           );
 
           dispatch(
-            boardActions.updateDataChartComputedFields({
-              id: widgetId,
+            boardActions.updateDataChartDataConfigComputedFields({
+              dashboardId,
+              datachartId,
               computedFields,
             }),
           );
@@ -323,14 +331,16 @@ export interface WidgetActionContextProps {
   onWidgetLinkEvent: (widget: Widget) => (params) => void;
   onUpdateWidgetSelectedItems: (widget: Widget, selectedItems) => void;
 
-  onWidgetDataUpdate: ({
+  onWidgetChartDataConfigUpdate: ({
+    dashboardId,
+    datachartId,
     computedFields,
-    payload,
-    widgetId,
+    options,
   }: {
+    dashboardId: string;
+    datachartId: string;
     computedFields: any;
-    payload: ChartConfig;
-    widgetId: string;
+    options: ChartConfig;
   }) => void;
 
   // read

frontend/src/app/pages/DashBoardPage/components/MockDataPanel/utils.ts

@@ -16,34 +16,15 @@
  * limitations under the License.
  */
 import { ORIGINAL_TYPE_MAP } from '../../constants';
-import {
-  BoardState,
-  Dashboard,
-  DataChart,
-} from '../../pages/Board/slice/types';
+import { Dashboard, DataChart } from '../../pages/Board/slice/types';
 import { Widget } from '../../types/widgetTypes';
-const emptyWidgets = [];
-export const getChartWidgets = (
-  state: { board: BoardState },
-  boardId: string,
-) => {
-  const widgetMap = state.board.widgetRecord;
-
-  if (!widgetMap[boardId]) {
-    return emptyWidgets;
-  }
-  let chartWidgets = Object.values(widgetMap[boardId]).filter(
-    widget => widget.config.type === 'chart',
-  );
-  return chartWidgets;
-};
 
 export const getBoardTplData = (
   dataMap: Record<string, { id: string; name: string; data }>,
   boardTplData: {
     board: Dashboard;
     widgetMap: Record<string, Widget>;
-    dataChartMap: Record<string, DataChart>;
+    dataChartMap: Record<string, Record<string, DataChart>>;
   },
 ) => {
   const { board, widgetMap, dataChartMap } = boardTplData;
@@ -59,7 +40,7 @@ export const getBoardTplData = (
     };
     if (newWidgetConf.type === 'chart') {
       newWidgetConf.originalType = ORIGINAL_TYPE_MAP.ownedChart;
-      const datachart = dataChartMap[w.datachartId || ''];
+      const datachart = dataChartMap[board.id][w.datachartId || ''];
 
       if (datachart) {
         let newChart = {

frontend/src/app/pages/DashBoardPage/components/WidgetProvider/WidgetChartProvider.tsx

@@ -63,20 +63,26 @@ export const WidgetChartContext = createContext<{
 });
 
 export const WidgetChartProvider: FC<{
+  boardId: string;
   boardEditing: boolean;
   widgetId: string;
-}> = memo(({ boardEditing, widgetId, children }) => {
+}> = memo(({ boardId, boardEditing, widgetId, children }) => {
   const { datachartId } = useContext(WidgetContext);
   const dispatch = useDispatch();
   useEffect(() => {
     if (!datachartId) return;
     if (!widgetId) return;
     dispatch(
-      setWidgetSampleDataAction({ boardEditing, datachartId, wid: widgetId }),
+      setWidgetSampleDataAction({
+        boardId,
+        boardEditing,
+        datachartId,
+        wid: widgetId,
+      }),
     );
-  }, [boardEditing, datachartId, dispatch, widgetId]);
+  }, [boardId, boardEditing, datachartId, dispatch, widgetId]);
   const dataChart = useSelector((state: { board: BoardState }) =>
-    selectDataChartById(state, datachartId),
+    selectDataChartById(state, boardId, datachartId),
   );
   const availableSourceFunctionsMap = useSelector(
     selectAvailableSourceFunctionsMap,

frontend/src/app/pages/DashBoardPage/components/WidgetProvider/WidgetWrapProvider.tsx

@@ -35,7 +35,11 @@ export const WidgetWrapProvider: FC<{
         widgetId={id}
       >
         <WidgetSelectionProvider boardEditing={boardEditing} widgetId={id}>
-          <WidgetChartProvider boardEditing={boardEditing} widgetId={id}>
+          <WidgetChartProvider
+            boardId={boardId}
+            boardEditing={boardEditing}
+            widgetId={id}
+          >
             {children}
           </WidgetChartProvider>
         </WidgetSelectionProvider>

frontend/src/app/pages/DashBoardPage/components/Widgets/DataChartWidget/DataChartWidgetCore.tsx

@@ -83,7 +83,8 @@ export const DataChartWidgetCore: React.FC<{}> = memo(() => {
   const dispatch = useDispatch();
   const scale = useContext(BoardScaleContext);
   const { data: dataset } = useContext(WidgetDataContext);
-  const { renderMode, orgId, queryVariables } = useContext(BoardContext);
+  const { boardId, renderMode, orgId, queryVariables } =
+    useContext(BoardContext);
   const selectedItems = useContext(WidgetSelectionContext);
   const executeTokenMap = useSelector(selectShareExecuteTokenMap);
   const widget = useContext(WidgetContext);
@@ -101,7 +102,7 @@ export const DataChartWidgetCore: React.FC<{}> = memo(() => {
     onWidgetChartClick,
     onWidgetLinkEvent,
     onWidgetGetData,
-    onWidgetDataUpdate,
+    onWidgetChartDataConfigUpdate,
     onUpdateWidgetSelectedItems,
   } = useContext(WidgetActionContext);
   const { cacheWhRef, cacheW, cacheH } = useCacheWidthHeight();
@@ -171,12 +172,12 @@ export const DataChartWidgetCore: React.FC<{}> = memo(() => {
   }, [widget]);
 
   const handleDateLevelChange = useCallback(
-    (type, payload) => {
-      const rows = getRuntimeDateLevelFields(payload.value?.rows);
+    (type, options) => {
+      const rows = getRuntimeDateLevelFields(options.value?.rows);
       const dateLevelComputedFields = rows.filter(
         v => v.category === ChartDataViewFieldCategory.DateLevelComputedField,
       );
-      const replacedConfig = payload.value.replacedConfig;
+      const replacedConfig = options.value.replacedConfig;
       // TODO delete computedFields,
       const computedFields = getRuntimeComputedFields(
         dateLevelComputedFields,
@@ -185,18 +186,20 @@ export const DataChartWidgetCore: React.FC<{}> = memo(() => {
         true,
       );
       if (dataChart?.id) {
-        onWidgetDataUpdate({
+        onWidgetChartDataConfigUpdate({
+          dashboardId: boardId,
+          datachartId: dataChart.id,
           computedFields,
-          payload,
-          widgetId: dataChart.id,
+          options,
         });
       }
       onWidgetGetData(widgetRef.current);
     },
     [
-      onWidgetDataUpdate,
+      boardId,
       dataChart?.config?.computedFields,
       dataChart?.id,
+      onWidgetChartDataConfigUpdate,
       onWidgetGetData,
     ],
   );

frontend/src/app/pages/DashBoardPage/pages/Board/slice/asyncActions.ts

@@ -115,7 +115,12 @@ export const handleServerBoardAction =
       }),
     );
     dispatch(boardActions.setViewMap(viewViews));
-    dispatch(boardActions.setDataChartToMap(allDataCharts));
+    dispatch(
+      boardActions.setDataChartToMap({
+        dashboardId: dashboard.id,
+        dataCharts: allDataCharts,
+      }),
+    );
     dispatch(
       boardActions.setWidgetMapState({
         boardId: dashboard.id,
@@ -207,7 +212,7 @@ export const getBoardDownloadParams =
     let requestParams = getBoardChartRequests({
       widgetMap,
       viewMap,
-      dataChartMap,
+      dashboardDataChartMap: dataChartMap[boardId],
     }) as ChartDataRequest[];
 
     return { requestParams, fileName };

frontend/src/app/pages/DashBoardPage/pages/Board/slice/index.ts

@@ -49,15 +49,15 @@ import {
 import { BoardInfo, BoardState } from './types';
 
 export const boardInit: BoardState = {
-  boardRecord: {} as Record<string, Dashboard>,
-  boardInfoRecord: {} as Record<string, BoardInfo>,
-  widgetRecord: {} as Record<string, Record<string, Widget>>,
-  widgetInfoRecord: {} as Record<string, Record<string, WidgetInfo>>,
-  widgetDataMap: {} as Record<string, WidgetData | undefined>,
-  dataChartMap: {} as Record<string, DataChart>,
-  viewMap: {} as Record<string, ChartDataView>, // View
-  availableSourceFunctionsMap: {} as Record<string, string[]>,
-  selectedItems: {} as Record<string, SelectedItem[]>,
+  boardRecord: {},
+  boardInfoRecord: {},
+  widgetRecord: {},
+  widgetInfoRecord: {},
+  widgetDataMap: {},
+  dataChartMap: {},
+  viewMap: {},
+  availableSourceFunctionsMap: {},
+  selectedItems: {},
 };
 // boardActions
 const boardSlice = createSlice({
@@ -94,10 +94,17 @@ const boardSlice = createSlice({
       }
       state.widgetInfoRecord[boardId] = widgetInfoMap;
     },
-    setDataChartToMap(state, action: PayloadAction<DataChart[]>) {
-      const dataCharts = action.payload;
+    setDataChartToMap(
+      state,
+      {
+        payload: { dashboardId, dataCharts },
+      }: PayloadAction<{ dashboardId: string; dataCharts: DataChart[] }>,
+    ) {
       dataCharts.forEach(dc => {
-        state.dataChartMap[dc.id] = dc;
+        if (!state.dataChartMap[dashboardId]) {
+          state.dataChartMap[dashboardId] = {};
+        }
+        state.dataChartMap[dashboardId][dc.id] = dc;
       });
     },
 
@@ -109,12 +116,13 @@ const boardSlice = createSlice({
     },
 
     clearBoardStateById(state, action: PayloadAction<string>) {
-      const boardId = action.payload;
-      delete state.boardRecord[boardId];
-      delete state.boardInfoRecord[boardId];
-      delete state.widgetRecord[boardId];
-      delete state.widgetInfoRecord[boardId];
-      // can not del :dataCharts、views
+      const dashboardId = action.payload;
+      delete state.boardRecord[dashboardId];
+      delete state.boardInfoRecord[dashboardId];
+      delete state.widgetRecord[dashboardId];
+      delete state.widgetInfoRecord[dashboardId];
+      delete state.dataChartMap[dashboardId];
+      // can't del: views
     },
     setGroupWidgetsById(
       state,
@@ -371,35 +379,43 @@ const boardSlice = createSlice({
         state.widgetRecord[boardId][widget.id] = widget;
       });
     },
-    updateDataChartGroup(
+    updateDataChartDataConfigGroupRows(
       state,
-      action: PayloadAction<{ id: string; payload }>,
+      {
+        payload: { dashboardId, datachartId, options },
+      }: PayloadAction<{ dashboardId: string; datachartId: string; options }>,
     ) {
-      const dataChart = state.dataChartMap[action.payload.id];
+      const dataChart = state.dataChartMap[dashboardId][datachartId];
 
       if (dataChart?.config) {
         const index = dataChart?.config?.chartConfig?.datas?.findIndex(
           section => section.type === ChartDataSectionType.Group,
         );
-        if (index !== undefined && dataChart.config.chartConfig.datas) {
-          dataChart.config.chartConfig.datas[index].rows =
-            action.payload.payload?.value?.rows;
+        if (
+          index !== undefined &&
+          index >= 0 &&
+          dataChart.config.chartConfig.datas
+        ) {
+          dataChart.config.chartConfig.datas[index].rows = options?.value?.rows;
         }
-        state.dataChartMap[action.payload.id] = dataChart;
+        state.dataChartMap[dashboardId][datachartId] = dataChart;
       }
     },
-    updateDataChartComputedFields(
+    updateDataChartDataConfigComputedFields(
       state,
-      action: PayloadAction<{
-        id: string;
+      {
+        payload: { dashboardId, datachartId, computedFields },
+      }: PayloadAction<{
+        dashboardId: string;
+        datachartId: string;
         computedFields: any;
       }>,
     ) {
-      const dataChart = state.dataChartMap[action.payload.id];
+      const dataChart = state.dataChartMap[dashboardId][datachartId];
 
       if (dataChart?.config) {
-        dataChart.config.computedFields = action.payload.computedFields;
-        state.dataChartMap[action.payload.id] = dataChart;
+        dataChart.config.computedFields = computedFields;
+        state.dataChartMap[dashboardId][datachartId] = dataChart;
       }
     },
     changeSelectedItems(