Merge pull request #2245 from scottsut/dev

fix: Incorrect rendering of copied dashboard charts

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(