feat: use interpretation buttons in output data preview

src/components/molecules/InterpretationButtons.tsx

@@ -1,5 +1,5 @@
-import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
-import { PauseCircle, PlayCircle, StopCircle } from "@mui/icons-material";
+import { PlayCircle } from "@mui/icons-material";
 import React, { useCallback, useEffect, useState } from "react";
 import { interpretCurrentRecording, stopCurrentInterpretation } from "../../api/recording";
 import { useSocketStore } from "../../context/socket";
@@ -20,10 +20,10 @@ interface InterpretationInfo {
 const interpretationInfo: InterpretationInfo = {
   running: false,
   isPaused: false,
-}
+};
 
 export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsProps) => {
-  const [info, setInfo] = React.useState<InterpretationInfo>(interpretationInfo);
+  const [info, setInfo] = useState<InterpretationInfo>(interpretationInfo);
   const [decisionModal, setDecisionModal] = useState<{
     pair: WhereWhatPair | null,
     actionType: string,
@@ -44,52 +44,47 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
 
   const breakpointHitHandler = useCallback(() => {
     setInfo({ running: false, isPaused: true });
-    notify('warning', 'Please restart the interpretation, after updating the recording');
+    notify('warning', 'Please restart the interpretation after updating the recording');
     enableStepping(true);
-  }, [info, enableStepping]);
+  }, [enableStepping]);
 
   const decisionHandler = useCallback(
-    ({ pair, actionType, lastData }
+    ({ pair, actionType, lastData }: { pair: WhereWhatPair | null, actionType: string, lastData: { selector: string, action: string, tagName: string, innerText: string } }) => {
-      : { pair: WhereWhatPair | null, actionType: string, lastData: { selector: string, action: string, tagName: string, innerText: string } }) => {
       const { selector, action, tagName, innerText } = lastData;
-      setDecisionModal((prevState) => {
+      setDecisionModal((prevState) => ({
-        return {
+        pair,
-          pair,
+        actionType,
-          actionType,
+        selector,
-          selector,
+        action,
-          action,
+        tagName,
-          tagName,
+        innerText,
-          innerText,
+        open: true,
-          open: true,
+      }));
-        }
+    }, []);
-      })
-    }, [decisionModal]);
 
   const handleDecision = (decision: boolean) => {
     const { pair, actionType } = decisionModal;
     socket?.emit('decision', { pair, actionType, decision });
     setDecisionModal({ pair: null, actionType: '', selector: '', action: '', tagName: '', innerText: '', open: false });
-  }
+  };
 
   const handleDescription = () => {
-    switch (decisionModal.actionType) {
+    if (decisionModal.actionType === 'customAction') {
-      case 'customAction':
+      return (
-        return (
+        <>
-          <React.Fragment>
+          <Typography>
+            Do you want to use your previous selection as a condition for performing this action?
+          </Typography>
+          <Box style={{ marginTop: '4px' }}>
             <Typography>
-              Do you want to use your previous selection as a condition for performing this action?
+              Your previous action was: <b>{decisionModal.action}</b>, on an element with text <b>{decisionModal.innerText}</b>
             </Typography>
-            <Box style={{ marginTop: '4px' }}>
+          </Box>
-              <Typography>Your previous action was:
+        </>
-                <b>{decisionModal.action.charAt(0).toUpperCase() + decisionModal.action.slice(1)} </b>,
+      );
-                on an element with text
-                <b>{decisionModal.innerText} </b>
-              </Typography>
-            </Box>
-          </React.Fragment>);
-      default: return null;
     }
-  }
+    return null;
+  };
 
   useEffect(() => {
     if (socket) {
@@ -101,15 +96,11 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
       socket?.off('finished', finishedHandler);
       socket?.off('breakpointHit', breakpointHitHandler);
       socket?.off('decision', decisionHandler);
-    }
+    };
   }, [socket, finishedHandler, breakpointHitHandler]);
 
   const handlePlay = async () => {
-    if (info.isPaused) {
+    if (!info.running) {
-      socket?.emit("resume");
-      setInfo({ running: true, isPaused: false });
-      enableStepping(false);
-    } else {
       setInfo({ ...info, running: true });
       const finished = await interpretCurrentRecording();
       setInfo({ ...info, running: false });
@@ -121,40 +112,39 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
     }
   };
 
+  // pause and stop logic (do not delete - we wil bring this back!)
+  /*
+  const handlePause = async () => {
+    if (info.running) {
+      socket?.emit("pause");
+      setInfo({ running: false, isPaused: true });
+      notify('warning', 'Please restart the interpretation after updating the recording');
+      enableStepping(true);
+    }
+  };
+
   const handleStop = async () => {
     setInfo({ running: false, isPaused: false });
     enableStepping(false);
     await stopCurrentInterpretation();
   };
-
+  */
-  const handlePause = async () => {
-    if (info.running) {
-      socket?.emit("pause");
-      setInfo({ running: false, isPaused: true });
-      notify('warning', 'Please restart the interpretation, after updating the recording');
-      enableStepping(true);
-    }
-  };
 
   return (
-    <Stack direction="row" spacing={3}
+    <Stack direction="row" spacing={3} sx={{ marginTop: '10px', marginBottom: '5px', justifyContent: 'center' }}>
-      sx={{ marginTop: '10px', marginBottom: '5px', justifyContent: 'space-evenly', }} >
+      <Button
-      <IconButton disabled={!info.running} sx={{ display: 'grid', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}
+        variant="contained"
-        aria-label="pause" size="small" title="Pause" onClick={handlePause}>
+        color="primary"
-        <PauseCircle sx={{ fontSize: 30, justifySelf: 'center' }} />
+        onClick={handlePlay}
-        Pause
+        disabled={info.running}
-      </IconButton>
+        sx={{ display: 'grid' }}
-      <IconButton disabled={info.running} sx={{ display: 'grid', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}
+      >
-        aria-label="play" size="small" title="Play" onClick={handlePlay}>
+        {info.running ? 'Extracting data...almost there' : 'Get Preview of Output Data'}
-        <PlayCircle sx={{ fontSize: 30, justifySelf: 'center' }} />
+      </Button>
-        {info.isPaused ? 'Resume' : 'Start'}
+      <GenericModal
-      </IconButton>
+        onClose={() => { }}
-      <IconButton disabled={!info.running && !info.isPaused} sx={{ display: 'grid', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}
+        isOpen={decisionModal.open}
-        aria-label="stop" size="small" title="Stop" onClick={handleStop}>
+        canBeClosed={false}
-        <StopCircle sx={{ fontSize: 30, justifySelf: 'center' }} />
-        Stop
-      </IconButton>
-      <GenericModal onClose={() => { }} isOpen={decisionModal.open} canBeClosed={false}
         modalStyle={{
           position: 'absolute',
           top: '50%',
@@ -168,15 +158,14 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
           display: 'block',
           overflow: 'scroll',
           padding: '5px 25px 10px 25px',
-        }}>
+        }}
+      >
         <div style={{ padding: '15px' }}>
           <HelpIcon />
-          {
+          {handleDescription()}
-            handleDescription()
-          }
           <div style={{ float: 'right' }}>
-            <Button onClick={() => handleDecision(true)} color='success'>yes</Button>
+            <Button onClick={() => handleDecision(true)} color='success'>Yes</Button>
-            <Button onClick={() => handleDecision(false)} color='error'>no</Button>
+            <Button onClick={() => handleDecision(false)} color='error'>No</Button>
           </div>
         </div>
       </GenericModal>