Merge pull request #282 from getmaxun/outpre-fix

feat: add output preview data reset functionality

public/locales/de.json

@@ -245,11 +245,15 @@
             "mimetype": "Medientyp: ",
             "image_below": "Bild wird unten angezeigt:",
             "separator": "--------------------------------------------------"
+        },
+        "notifications": {
+            "reset_success": "Vorschau erfolgreich zurückgesetzt"
         }
     },
     "interpretation_buttons": {
         "buttons": {
             "preview": "Vorschau der Ausgabedaten anzeigen",
+            "reset": "Zurücksetzen",
             "yes": "Ja",
             "no": "Nein"
         },

public/locales/en.json

@@ -246,11 +246,15 @@
         "mimetype": "mimetype: ",
         "image_below": "Image is rendered below:",
         "separator": "--------------------------------------------------"
+      }, 
+      "notifications": {
+        "reset_success": "Output Preview reset successfully"
       }
     },
     "interpretation_buttons": {
       "buttons": {
         "preview": "Get Preview of Output Data",
+        "reset": "Reset",
         "yes": "Yes",
         "no": "No"
       },

public/locales/es.json

@@ -251,6 +251,7 @@
   "interpretation_buttons": {
     "buttons": {
       "preview": "Obtener Vista Previa de Datos de Salida",
+      "reset": "Restablecer",
       "yes": "Sí",
       "no": "No"
     },
@@ -264,6 +265,9 @@
       "use_previous": "¿Desea usar su selección anterior como condición para realizar esta acción?",
       "previous_action": "Su acción anterior fue: ",
       "element_text": "en un elemento con texto "
+    },
+    "notifications": {
+      "reset_success": "Vista previa restablecida correctamente"
     }
   },
   "recording_page": {

public/locales/ja.json

@@ -246,11 +246,15 @@
             "mimetype": "MIMEタイプ: ",
             "image_below": "画像は以下に表示されます：",
             "separator": "--------------------------------------------------"
+        },
+        "notifications": {
+            "reset_success": "出力プレビューが正常にリセットされました"
         }
     },
     "interpretation_buttons": {
         "buttons": {
             "preview": "出力データのプレビューを取得",
+            "reset": "リセット",
             "yes": "はい",
             "no": "いいえ"
         },

public/locales/zh.json

@@ -246,11 +246,15 @@
       "mimetype": "MIME类型：",
       "image_below": "图片显示如下：",
       "separator": "--------------------------------------------------"
+    },
+    "notifications": {
+      "reset_success": "输出预览已成功重置"
     }
   },
   "interpretation_buttons": {
     "buttons": {
       "preview": "获取输出数据预览",
+      "reset": "重置",
       "yes": "是",
       "no": "否"
     },

src/components/molecules/InterpretationLog.tsx

@@ -35,7 +35,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
   const { width } = useBrowserDimensionsStore();
   const { socket } = useSocketStore();
-  const { currentWorkflowActionsState } = useGlobalInfoStore();
+  const { currentWorkflowActionsState, shouldResetInterpretationLog, notify } = useGlobalInfoStore();
 
   const toggleDrawer = (newOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
     if (
@@ -94,6 +94,14 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     setCustomValue(event.target.value);
   };
 
+  useEffect(() => {
+    if (shouldResetInterpretationLog) {
+      setLog('');
+      setTableData([]);
+      setBinaryData(null);
+    }
+  }, [shouldResetInterpretationLog]);
+
   useEffect(() => {
     socket?.on('log', handleLog);
     socket?.on('serializableCallback', handleSerializableCallback);

src/components/organisms/RightSidePanel.tsx

@@ -57,7 +57,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({});
   const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
 
-  const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState } = useGlobalInfoStore();
+  const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
   const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage } = useActionContext();
   const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField } = useBrowserSteps();
   const { id, socket } = useSocketStore();
@@ -225,8 +225,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     if (hasTextSteps) {
       socket?.emit('action', { action: 'scrapeSchema', settings });
     }
+    resetInterpretationLog();
     onFinishCapture();
-  }, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps]);
+  }, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps, resetInterpretationLog]);
 
   const getListSettingsObject = useCallback(() => {
     let settings: {

src/context/globalInfo.tsx

@@ -32,6 +32,8 @@ interface GlobalInfo {
     hasScreenshotAction: boolean;
     hasScrapeSchemaAction: boolean;
   }) => void;
+  shouldResetInterpretationLog: boolean;
+  resetInterpretationLog: () => void;
 };
 
 class GlobalInfoStore implements Partial<GlobalInfo> {
@@ -53,6 +55,7 @@ class GlobalInfoStore implements Partial<GlobalInfo> {
     hasScreenshotAction: false,
     hasScrapeSchemaAction: false,
   };
+  shouldResetInterpretationLog = false;
 };
 
 const globalInfoStore = new GlobalInfoStore();
@@ -71,6 +74,7 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
   const [recordingName, setRecordingName] = useState<string>(globalInfoStore.recordingName);
   const [recordingUrl, setRecordingUrl] = useState<string>(globalInfoStore.recordingUrl);
   const [currentWorkflowActionsState, setCurrentWorkflowActionsState] = useState(globalInfoStore.currentWorkflowActionsState);
+  const [shouldResetInterpretationLog, setShouldResetInterpretationLog] = useState<boolean>(globalInfoStore.shouldResetInterpretationLog);
 
   const notify = (severity: 'error' | 'warning' | 'info' | 'success', message: string) => {
     setNotification({ severity, message, isOpen: true });
@@ -87,6 +91,14 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
     }
   }
 
+  const resetInterpretationLog = () => {
+    setShouldResetInterpretationLog(true);
+    // Reset the flag after a short delay to allow components to respond
+    setTimeout(() => {
+      setShouldResetInterpretationLog(false);
+    }, 100);
+  }
+
   return (
     <globalInfoContext.Provider
       value={{
@@ -111,6 +123,8 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
         setRecordingUrl,
         currentWorkflowActionsState,
         setCurrentWorkflowActionsState,
+        shouldResetInterpretationLog,
+        resetInterpretationLog,
       }}
     >
       {children}