fix: Start analyzing the download interface request twice

Author: SoarBlueSky

frontend/src/app/components/ChartEditor.tsx

@@ -42,7 +42,6 @@ import {
   SaveFormContext,
   useSaveFormContext,
 } from 'app/pages/MainPage/pages/VizPage/SaveFormContext';
-import { useMainSlice } from 'app/pages/MainPage/slice';
 import { IChart } from 'app/types/Chart';
 import { ChartDTO } from 'app/types/ChartDTO';
 import { makeDownloadDataTask } from 'app/utils/fetch';
@@ -103,7 +102,6 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
 }) => {
   const saveFormContextValue = useSaveFormContext();
   const { actions } = useWorkbenchSlice();
-  const { actions: mainActions } = useMainSlice();
   const dispatch = useDispatch();
   const dataset = useSelector(datasetsSelector);
   const dataview = useSelector(currentDataViewSelector);
@@ -477,7 +475,7 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
         ],
         fileName: backendChart?.name || 'chart',
         resolve: () => {
-          dispatch(mainActions.setDownloadPolling(true));
+          dispatch(actions.setChartEditorDownloadPolling(true));
         },
       }),
     );
@@ -489,7 +487,7 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
     dataChartId,
     dataview,
     dispatch,
-    mainActions,
+    actions,
     widgetId,
   ]);
 

frontend/src/app/pages/ChartWorkbenchPage/components/ChartHeaderPanel/ChartHeaderPanel.tsx

@@ -20,13 +20,15 @@ import { Button, Space } from 'antd';
 import SaveToDashboard from 'app/components/SaveToDashboard';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import useMount from 'app/hooks/useMount';
-import { backendChartSelector } from 'app/pages/ChartWorkbenchPage/slice/workbenchSlice';
+import {
+  backendChartSelector,
+  selectChartEditorDownloadPolling,
+  useWorkbenchSlice,
+} from 'app/pages/ChartWorkbenchPage/slice/workbenchSlice';
 import { DownloadListPopup } from 'app/pages/MainPage/Navbar/DownloadListPopup';
 import { loadTasks } from 'app/pages/MainPage/Navbar/service';
 import { selectHasVizFetched } from 'app/pages/MainPage/pages/VizPage/slice/selectors';
 import { getFolders } from 'app/pages/MainPage/pages/VizPage/slice/thunks';
-import { useMainSlice } from 'app/pages/MainPage/slice';
-import { selectDownloadPolling } from 'app/pages/MainPage/slice/selectors';
 import { downloadFile } from 'app/utils/fetch';
 import { FC, memo, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -61,9 +63,9 @@ const ChartHeaderPanel: FC<{
     const hasVizFetched = useSelector(selectHasVizFetched);
     const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
     const backendChart = useSelector(backendChartSelector);
-    const downloadPolling = useSelector(selectDownloadPolling);
+    const downloadPolling = useSelector(selectChartEditorDownloadPolling);
     const dispatch = useDispatch();
-    const { actions } = useMainSlice();
+    const { actions } = useWorkbenchSlice();
 
     const handleModalOk = useCallback(
       (dashboardId: string, dashboardType: string) => {
@@ -79,7 +81,7 @@ const ChartHeaderPanel: FC<{
 
     const onSetPolling = useCallback(
       (polling: boolean) => {
-        dispatch(actions.setDownloadPolling(polling));
+        dispatch(actions.setChartEditorDownloadPolling(polling));
       },
       [dispatch, actions],
     );
@@ -90,6 +92,7 @@ const ChartHeaderPanel: FC<{
         dispatch(getFolders(orgId as string));
       }
     });
+
     return (
       <Wrapper>
         <h1>{chartName}</h1>
@@ -101,7 +104,7 @@ const ChartHeaderPanel: FC<{
             onDownloadFile={item => {
               if (item.id) {
                 downloadFile(item.id).then(() => {
-                  dispatch(actions.setDownloadPolling(true));
+                  dispatch(actions.setChartEditorDownloadPolling(true));
                 });
               }
             }}

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartPresentPanel/components/Chart404Graph.tsx

@@ -61,8 +61,8 @@ export default Chart404Graph;
 const StyledChart404Graph = styled.div`
   display: flex;
   flex-flow: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   height: 100%;
   opacity: 0.3;
 `;

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

@@ -79,6 +79,7 @@ export type WorkbenchState = {
   backendChartId?: string;
   aggregation?: boolean;
   datasetLoading: boolean;
+  chartEditorDownloadPolling: boolean;
 };
 
 const initState: WorkbenchState = {
@@ -88,6 +89,7 @@ const initState: WorkbenchState = {
   dataset: {},
   aggregation: true,
   datasetLoading: false,
+  chartEditorDownloadPolling: false,
 };
 
 // Selectors
@@ -143,6 +145,11 @@ export const datasetLoadingSelector = createSelector(
   workbenchSelector,
   wb => wb.datasetLoading,
 );
+
+export const selectChartEditorDownloadPolling = createSelector(
+  workbenchSelector,
+  wb => wb.chartEditorDownloadPolling,
+);
 // Effects
 export const initWorkbenchAction = createAsyncThunk(
   'workbench/initWorkbenchAction',
@@ -443,6 +450,9 @@ const workbenchSlice = createSlice({
     resetWorkbenchState: (state, action) => {
       return initState;
     },
+    setChartEditorDownloadPolling(state, { payload }: PayloadAction<boolean>) {
+      state.chartEditorDownloadPolling = payload;
+    },
   },
   extraReducers: builder => {
     builder

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

@@ -357,7 +357,6 @@ const StyledChartPreviewBoard = styled.div`
   flex: 1;
   flex-flow: column;
   height: 100%;
-
   iframe {
     flex-grow: 1000;
   }
@@ -368,16 +367,16 @@ const PreviewBlock = styled.div`
   flex-direction: column;
   height: 100%;
   padding: ${SPACE_LG};
-  box-shadow: ${p => p.theme.shadowBlock};
   overflow: hidden;
+  box-shadow: ${p => p.theme.shadowBlock};
 `;
 
 const ChartWrapper = styled.div`
+  position: relative;
   display: flex;
   flex: 1;
   background-color: ${p => p.theme.componentBackground};
   border-radius: ${BORDER_RADIUS};
-  position: relative;
   .spinWrapper {
     width: 100%;
     height: 100%;