From f554086785811e8646882a5b0da00efa83c843a3 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:07:29 +0530 Subject: [PATCH 01/22] feat(wip): del pair --- src/components/organisms/RightSidePanel.tsx | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index b938dbb8..21f5308b 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -20,6 +20,7 @@ import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import { emptyWorkflow } from "../../shared/constants"; import { getActiveWorkflow } from "../../api/workflow"; +import DeleteIcon from '@mui/icons-material/Delete'; const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => { getActiveWorkflow(id).then( @@ -52,6 +53,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const [showCaptureScreenshot, setShowCaptureScreenshot] = useState(true); const [showCaptureText, setShowCaptureText] = useState(true); const [captureStage, setCaptureStage] = useState<'initial' | 'pagination' | 'limit' | 'complete'>('initial'); + const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({}); const { lastAction, notify } = useGlobalInfoStore(); const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode } = useActionContext(); @@ -110,6 +112,24 @@ export const RightSidePanel: React.FC = ({ onFinishCapture setShowCaptureText(!(hasScrapeListAction || hasScreenshotAction)); }, [workflow]); + const handleMouseEnter = (id: number) => { + setHoverStates(prev => ({ ...prev, [id]: true })); + }; + + const handleMouseLeave = (id: number) => { + setHoverStates(prev => ({ ...prev, [id]: false })); + }; + + const handlePairDelete = () => { + // deletePair(index - 1).then((updatedWorkflow) => { + // updateWorkflow(updatedWorkflow); + // }).catch((error) => { + // console.error(error); + // }); + // }; + console.log("handlePairDelete") + } + const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { if (listId !== undefined && fieldKey !== undefined) { // Prevent editing if the field is confirmed @@ -453,12 +473,22 @@ export const RightSidePanel: React.FC = ({ onFinishCapture margin="normal" error={!!errors[step.id]} helperText={errors[step.id]} + onMouseEnter={() => handleMouseEnter(step.id)} + onMouseLeave={() => handleMouseLeave(step.id)} InputProps={{ readOnly: confirmedTextSteps[step.id], startAdornment: ( + ), + endAdornment: confirmedTextSteps[step.id] && hoverStates[step.id] && ( + + handlePairDelete()} + sx={{ cursor: 'pointer', color: 'red' }} + /> + ) }} /> From c678351f5c813f439c3b2d305abcb237e6336eec Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:17:43 +0530 Subject: [PATCH 02/22] feat: del on Box instead of TextField --- src/components/organisms/RightSidePanel.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 21f5308b..ef18b621 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -1,5 +1,5 @@ import React, { useState, useCallback, useEffect } from 'react'; -import { Button, Paper, Box, TextField } from "@mui/material"; +import { Button, Paper, Box, TextField, IconButton } from "@mui/material"; import EditIcon from '@mui/icons-material/Edit'; import TextFieldsIcon from '@mui/icons-material/TextFields'; import DocumentScannerIcon from '@mui/icons-material/DocumentScanner'; @@ -461,10 +461,24 @@ export const RightSidePanel: React.FC = ({ onFinishCapture {browserSteps.map(step => ( - + handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> { step.type === 'text' && ( <> + {confirmedTextSteps[step.id] && hoverStates[step.id] && ( + handlePairDelete()} + sx={{ + position: 'absolute', + top: 5, + right: 5, + color: 'red', + p: 0 + }} + > + + + )} Date: Thu, 10 Oct 2024 07:18:02 +0530 Subject: [PATCH 03/22] chore: lint --- src/components/organisms/RightSidePanel.tsx | 46 ++++++++++----------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index ef18b621..d4152fea 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -121,14 +121,14 @@ export const RightSidePanel: React.FC = ({ onFinishCapture }; const handlePairDelete = () => { - // deletePair(index - 1).then((updatedWorkflow) => { - // updateWorkflow(updatedWorkflow); - // }).catch((error) => { - // console.error(error); - // }); - // }; - console.log("handlePairDelete") - } + // deletePair(index - 1).then((updatedWorkflow) => { + // updateWorkflow(updatedWorkflow); + // }).catch((error) => { + // console.error(error); + // }); + // }; + console.log("handlePairDelete") + } const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { if (listId !== undefined && fieldKey !== undefined) { @@ -465,20 +465,20 @@ export const RightSidePanel: React.FC = ({ onFinishCapture { step.type === 'text' && ( <> - {confirmedTextSteps[step.id] && hoverStates[step.id] && ( - handlePairDelete()} - sx={{ - position: 'absolute', - top: 5, - right: 5, - color: 'red', - p: 0 - }} - > - - - )} + {confirmedTextSteps[step.id] && hoverStates[step.id] && ( + handlePairDelete()} + sx={{ + position: 'absolute', + top: 5, + right: 5, + color: 'red', + p: 0 + }} + > + + + )} = ({ onFinishCapture ), endAdornment: confirmedTextSteps[step.id] && hoverStates[step.id] && ( - handlePairDelete()} sx={{ cursor: 'pointer', color: 'red' }} /> From 609e5943a8ff2f8284e7f15d4b60547489a7d001 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:27:14 +0530 Subject: [PATCH 04/22] feat: align del icon to box --- src/components/organisms/RightSidePanel.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index d4152fea..4b876ca6 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -461,7 +461,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture {browserSteps.map(step => ( - handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> + handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> { step.type === 'text' && ( <> @@ -470,11 +470,12 @@ export const RightSidePanel: React.FC = ({ onFinishCapture onClick={() => handlePairDelete()} sx={{ position: 'absolute', - top: 5, - right: 5, - color: 'red', - p: 0 - }} + top: -10, + right: -10, + color: 'red', + p: 0, + zIndex: 1, + }} > From ff099741a5a6e1338321e48190a8247e458ae9a9 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:27:37 +0530 Subject: [PATCH 05/22] chore: prettier --- src/components/organisms/RightSidePanel.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 4b876ca6..0bfacfc9 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -470,12 +470,12 @@ export const RightSidePanel: React.FC = ({ onFinishCapture onClick={() => handlePairDelete()} sx={{ position: 'absolute', - top: -10, - right: -10, - color: 'red', - p: 0, - zIndex: 1, - }} + top: -10, + right: -10, + color: 'red', + p: 0, + zIndex: 1, + }} > From 4fc9b02b3223d97b5715b99ec954bd2a271e01c7 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:28:08 +0530 Subject: [PATCH 06/22] feat: -rm del icon from TextField --- src/components/organisms/RightSidePanel.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 0bfacfc9..2873a808 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -488,22 +488,12 @@ export const RightSidePanel: React.FC = ({ onFinishCapture margin="normal" error={!!errors[step.id]} helperText={errors[step.id]} - onMouseEnter={() => handleMouseEnter(step.id)} - onMouseLeave={() => handleMouseLeave(step.id)} InputProps={{ readOnly: confirmedTextSteps[step.id], startAdornment: ( - ), - endAdornment: confirmedTextSteps[step.id] && hoverStates[step.id] && ( - - handlePairDelete()} - sx={{ cursor: 'pointer', color: 'red' }} - /> - ) }} /> From 5fc0d7a7d4425bae8b753ca36f15864f9e8da91b Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:35:01 +0530 Subject: [PATCH 07/22] feat: set del icon font size 40 --- src/components/organisms/RightSidePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 2873a808..3ec50815 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -477,7 +477,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture zIndex: 1, }} > - + )} Date: Thu, 10 Oct 2024 07:36:17 +0530 Subject: [PATCH 08/22] feat: increase top & right to -5px --- src/components/organisms/RightSidePanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 3ec50815..8b0aa034 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -470,8 +470,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture onClick={() => handlePairDelete()} sx={{ position: 'absolute', - top: -10, - right: -10, + top: -15, + right: -15, color: 'red', p: 0, zIndex: 1, From 617537416568bbd980a3883e8b93de108343da47 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:40:11 +0530 Subject: [PATCH 09/22] feat: wrap del icon inside circle --- src/components/organisms/RightSidePanel.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 8b0aa034..dd130444 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -475,6 +475,9 @@ export const RightSidePanel: React.FC = ({ onFinishCapture color: 'red', p: 0, zIndex: 1, + boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)', + backgroundColor: 'white', + borderRadius: '50%', }} > From 81011535b65ece43239ef7672c556aec35c92d76 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:40:31 +0530 Subject: [PATCH 10/22] feat: set boxShadow to 5px --- src/components/organisms/RightSidePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index dd130444..8117cec8 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -475,7 +475,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture color: 'red', p: 0, zIndex: 1, - boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.2)', + boxShadow: '5px', backgroundColor: 'white', borderRadius: '50%', }} From b191a45c6b9eda6bceca92f1f0d18f3d673e8ea3 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 07:41:58 +0530 Subject: [PATCH 11/22] feat: increase box margin 13px --- src/components/organisms/RightSidePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 8117cec8..7eed37e2 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -461,7 +461,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture {browserSteps.map(step => ( - handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> + handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> { step.type === 'text' && ( <> From 42a5a25be67017c3bdb72159110fac90c5a95b5b Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 16:18:16 +0530 Subject: [PATCH 12/22] feat: map browsersteps to workflow.workflow --- src/components/organisms/RightSidePanel.tsx | 248 +++++++++++--------- 1 file changed, 133 insertions(+), 115 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 7eed37e2..68dcc315 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -120,15 +120,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture setHoverStates(prev => ({ ...prev, [id]: false })); }; - const handlePairDelete = () => { - // deletePair(index - 1).then((updatedWorkflow) => { - // updateWorkflow(updatedWorkflow); - // }).catch((error) => { - // console.error(error); - // }); - // }; - console.log("handlePairDelete") - } + const handlePairDelete = () => {} const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { if (listId !== undefined && fieldKey !== undefined) { @@ -459,135 +451,161 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} - - {browserSteps.map(step => ( - handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> - { - step.type === 'text' && ( - <> - {confirmedTextSteps[step.id] && hoverStates[step.id] && ( - handlePairDelete()} - sx={{ - position: 'absolute', - top: -15, - right: -15, - color: 'red', - p: 0, - zIndex: 1, - boxShadow: '5px', - backgroundColor: 'white', - borderRadius: '50%', - }} - > - - - )} + {workflow.workflow && workflow.workflow.map((pair, i, workflow) => ( + + {browserSteps.map((step) => ( + handleMouseEnter(step.id)} + onMouseLeave={() => handleMouseLeave(step.id)} + > + {step.type === 'text' && ( + <> + {confirmedTextSteps[step.id] && hoverStates[step.id] && ( + handlePairDelete()} + sx={{ + position: 'absolute', + top: -15, + right: -15, + color: 'red', + p: 0, + zIndex: 1, + boxShadow: '5px', + backgroundColor: 'white', + borderRadius: '50%', + }} + > + + + )} + handleTextLabelChange(step.id, e.target.value)} + fullWidth + margin="normal" + error={!!errors[step.id]} + helperText={errors[step.id]} + InputProps={{ + readOnly: confirmedTextSteps[step.id], + startAdornment: ( + + + + ), + }} + /> + + + + ), + }} + /> + {!confirmedTextSteps[step.id] && ( + + + + + )} + + )} + {step.type === 'screenshot' && ( + + + + {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} + + + )} + {step.type === 'list' && ( + <> + List Selected Successfully + {Object.entries(step.fields).map(([key, field]) => ( + handleTextLabelChange(step.id, e.target.value)} + label="Field Label" + value={field.label || ''} + onChange={(e) => + handleTextLabelChange(field.id, e.target.value, step.id, key) + } fullWidth margin="normal" - error={!!errors[step.id]} - helperText={errors[step.id]} InputProps={{ - readOnly: confirmedTextSteps[step.id], + readOnly: confirmedListTextFields[field.id]?.[key], startAdornment: ( - ) + ), }} /> - ) + ), }} /> - {!confirmedTextSteps[step.id] && ( + {!confirmedListTextFields[step.id]?.[key] && ( - - + + )} - - )} - {step.type === 'screenshot' && ( - - - - {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} - - - )} - {step.type === 'list' && ( - <> - List Selected Successfully - {Object.entries(step.fields).map(([key, field]) => ( - - handleTextLabelChange(field.id, e.target.value, step.id, key)} - fullWidth - margin="normal" - InputProps={{ - readOnly: confirmedListTextFields[field.id]?.[key], - startAdornment: ( - - - - ) - }} - /> - - - - ) - }} - /> - {!confirmedListTextFields[step.id]?.[key] && ( - - - - - )} - - ))} - - )} - - ))} - + + ))} + + )} + + ))} + + ))} + ); }; \ No newline at end of file From cb418f98249b0af9b373666226c652bf1fb2e9eb Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 16:21:24 +0530 Subject: [PATCH 13/22] feat: map only confirmed browserSteps to workflow --- src/components/organisms/RightSidePanel.tsx | 50 ++++++--------------- 1 file changed, 13 insertions(+), 37 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 68dcc315..c6d81c4e 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -451,9 +451,19 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} - {workflow.workflow && workflow.workflow.map((pair, i, workflow) => ( + { + workflow.workflow.map((pair, i, workflow) => ( - {browserSteps.map((step) => ( + {browserSteps.filter(step => { + if (step.type === 'text') { + return confirmedTextSteps[step.id]; // Check if text step is confirmed + } else if (step.type === 'list') { + return Object.values(confirmedListTextFields[step.id] || {}).some(Boolean); // Check if any list fields are confirmed + } else if (step.type === 'screenshot') { + return true; // Assuming all screenshot steps are considered confirmed by default + } + return false; // Default case + }).map((step) => ( = ({ onFinishCapture > {step.type === 'text' && ( <> - {confirmedTextSteps[step.id] && hoverStates[step.id] && ( + {hoverStates[step.id] && ( handlePairDelete()} sx={{ @@ -517,23 +527,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture ), }} /> - {!confirmedTextSteps[step.id] && ( - - - - - )} )} {step.type === 'screenshot' && ( @@ -580,23 +573,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture ), }} /> - {!confirmedListTextFields[step.id]?.[key] && ( - - - - - )} ))} From 11974a52f18ce07d9cda67290de6930f8bbc5ae5 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 16:21:39 +0530 Subject: [PATCH 14/22] chore: lint --- src/components/organisms/RightSidePanel.tsx | 258 ++++++++++---------- 1 file changed, 129 insertions(+), 129 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index c6d81c4e..2e46d323 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -120,7 +120,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture setHoverStates(prev => ({ ...prev, [id]: false })); }; - const handlePairDelete = () => {} + const handlePairDelete = () => { } const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { if (listId !== undefined && fieldKey !== undefined) { @@ -452,135 +452,135 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} { - workflow.workflow.map((pair, i, workflow) => ( - - {browserSteps.filter(step => { - if (step.type === 'text') { - return confirmedTextSteps[step.id]; // Check if text step is confirmed - } else if (step.type === 'list') { - return Object.values(confirmedListTextFields[step.id] || {}).some(Boolean); // Check if any list fields are confirmed - } else if (step.type === 'screenshot') { - return true; // Assuming all screenshot steps are considered confirmed by default - } - return false; // Default case - }).map((step) => ( - handleMouseEnter(step.id)} - onMouseLeave={() => handleMouseLeave(step.id)} - > - {step.type === 'text' && ( - <> - {hoverStates[step.id] && ( - handlePairDelete()} - sx={{ - position: 'absolute', - top: -15, - right: -15, - color: 'red', - p: 0, - zIndex: 1, - boxShadow: '5px', - backgroundColor: 'white', - borderRadius: '50%', - }} - > - - - )} - handleTextLabelChange(step.id, e.target.value)} - fullWidth - margin="normal" - error={!!errors[step.id]} - helperText={errors[step.id]} - InputProps={{ - readOnly: confirmedTextSteps[step.id], - startAdornment: ( - - - - ), + workflow.workflow.map((pair, i, workflow) => ( + + {browserSteps.filter(step => { + if (step.type === 'text') { + return confirmedTextSteps[step.id]; // Check if text step is confirmed + } else if (step.type === 'list') { + return Object.values(confirmedListTextFields[step.id] || {}).some(Boolean); // Check if any list fields are confirmed + } else if (step.type === 'screenshot') { + return true; // Assuming all screenshot steps are considered confirmed by default + } + return false; // Default case + }).map((step) => ( + - - - - ), - }} - /> - - )} - {step.type === 'screenshot' && ( - - - - {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} - - - )} - {step.type === 'list' && ( - <> - List Selected Successfully - {Object.entries(step.fields).map(([key, field]) => ( - - - handleTextLabelChange(field.id, e.target.value, step.id, key) - } - fullWidth - margin="normal" - InputProps={{ - readOnly: confirmedListTextFields[field.id]?.[key], - startAdornment: ( - - - - ), - }} - /> - - - - ), - }} - /> - - ))} - - )} - - ))} - - ))} + onMouseEnter={() => handleMouseEnter(step.id)} + onMouseLeave={() => handleMouseLeave(step.id)} + > + {step.type === 'text' && ( + <> + {hoverStates[step.id] && ( + handlePairDelete()} + sx={{ + position: 'absolute', + top: -15, + right: -15, + color: 'red', + p: 0, + zIndex: 1, + boxShadow: '5px', + backgroundColor: 'white', + borderRadius: '50%', + }} + > + + + )} + handleTextLabelChange(step.id, e.target.value)} + fullWidth + margin="normal" + error={!!errors[step.id]} + helperText={errors[step.id]} + InputProps={{ + readOnly: confirmedTextSteps[step.id], + startAdornment: ( + + + + ), + }} + /> + + + + ), + }} + /> + + )} + {step.type === 'screenshot' && ( + + + + {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} + + + )} + {step.type === 'list' && ( + <> + List Selected Successfully + {Object.entries(step.fields).map(([key, field]) => ( + + + handleTextLabelChange(field.id, e.target.value, step.id, key) + } + fullWidth + margin="normal" + InputProps={{ + readOnly: confirmedListTextFields[field.id]?.[key], + startAdornment: ( + + + + ), + }} + /> + + + + ), + }} + /> + + ))} + + )} + + ))} + + ))} ); From d81e2684ce38e1d9a9731b8176b57440ab5d99e1 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 16:27:38 +0530 Subject: [PATCH 15/22] fix: revert changes --- src/components/organisms/RightSidePanel.tsx | 216 ++++++++++---------- 1 file changed, 107 insertions(+), 109 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 2e46d323..110bdce8 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -120,7 +120,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture setHoverStates(prev => ({ ...prev, [id]: false })); }; - const handlePairDelete = () => { } + const handlePairDelete = () => {} const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { if (listId !== undefined && fieldKey !== undefined) { @@ -451,137 +451,135 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} - { - workflow.workflow.map((pair, i, workflow) => ( - - {browserSteps.filter(step => { - if (step.type === 'text') { - return confirmedTextSteps[step.id]; // Check if text step is confirmed - } else if (step.type === 'list') { - return Object.values(confirmedListTextFields[step.id] || {}).some(Boolean); // Check if any list fields are confirmed - } else if (step.type === 'screenshot') { - return true; // Assuming all screenshot steps are considered confirmed by default - } - return false; // Default case - }).map((step) => ( - handleMouseEnter(step.id)} - onMouseLeave={() => handleMouseLeave(step.id)} - > - {step.type === 'text' && ( - <> - {hoverStates[step.id] && ( - handlePairDelete()} - sx={{ - position: 'absolute', - top: -15, - right: -15, - color: 'red', - p: 0, - zIndex: 1, - boxShadow: '5px', - backgroundColor: 'white', - borderRadius: '50%', - }} - > - - - )} + + {browserSteps.map(step => ( + handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> + { + step.type === 'text' && ( + <> + {confirmedTextSteps[step.id] && hoverStates[step.id] && ( + handlePairDelete()} + sx={{ + position: 'absolute', + top: -15, + right: -15, + color: 'red', + p: 0, + zIndex: 1, + boxShadow: '5px', + backgroundColor: 'white', + borderRadius: '50%', + }} + > + + + )} + handleTextLabelChange(step.id, e.target.value)} + fullWidth + margin="normal" + error={!!errors[step.id]} + helperText={errors[step.id]} + InputProps={{ + readOnly: confirmedTextSteps[step.id], + startAdornment: ( + + + + ) + }} + /> + + + + ) + }} + /> + {!confirmedTextSteps[step.id] && ( + + + + + )} + + )} + {step.type === 'screenshot' && ( + + + + {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} + + + )} + {step.type === 'list' && ( + <> + List Selected Successfully + {Object.entries(step.fields).map(([key, field]) => ( + handleTextLabelChange(step.id, e.target.value)} + label="Field Label" + value={field.label || ''} + onChange={(e) => handleTextLabelChange(field.id, e.target.value, step.id, key)} fullWidth margin="normal" - error={!!errors[step.id]} - helperText={errors[step.id]} InputProps={{ - readOnly: confirmedTextSteps[step.id], + readOnly: confirmedListTextFields[field.id]?.[key], startAdornment: ( - ), + ) }} /> - ), + ) }} /> - - )} - {step.type === 'screenshot' && ( - - - - {`Take ${step.fullPage ? 'Fullpage' : 'Visible Part'} Screenshot`} - - - )} - {step.type === 'list' && ( - <> - List Selected Successfully - {Object.entries(step.fields).map(([key, field]) => ( - - - handleTextLabelChange(field.id, e.target.value, step.id, key) - } - fullWidth - margin="normal" - InputProps={{ - readOnly: confirmedListTextFields[field.id]?.[key], - startAdornment: ( - - - - ), - }} - /> - - - - ), - }} - /> + {!confirmedListTextFields[step.id]?.[key] && ( + + + - ))} - - )} - - ))} + )} + + ))} + + )} ))} - + ); }; \ No newline at end of file From 97528f725c81c71fa28d4bb0db35496138469833 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 17:11:38 +0530 Subject: [PATCH 16/22] temp: show all pairs --- src/components/organisms/RightSidePanel.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 110bdce8..6c189073 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -21,6 +21,7 @@ import RadioGroup from '@mui/material/RadioGroup'; import { emptyWorkflow } from "../../shared/constants"; import { getActiveWorkflow } from "../../api/workflow"; import DeleteIcon from '@mui/icons-material/Delete'; +import { Pair } from '../molecules/Pair'; const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => { getActiveWorkflow(id).then( @@ -452,6 +453,23 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} + { + workflow.workflow.map((pair, i) => { + const activeId = workflow.workflow.length - i; + return ( + {}} + isActive={activeId === i + 1} + key={workflow.workflow.length - i} + index={workflow.workflow.length - i} + pair={pair} + updateWorkflow={setWorkflow} + numberOfPairs={workflow.workflow.length} + handleSelectPairForEdit={() => {}} + /> + ); + }) + } {browserSteps.map(step => ( handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> { From 307e63db31559bba834d733c7dcd68822ffbd17f Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 17:12:13 +0530 Subject: [PATCH 17/22] fix: remove data.workflow.length --- src/components/organisms/RightSidePanel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 6c189073..415d990d 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -63,7 +63,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const workflowHandler = useCallback((data: WorkflowFile) => { setWorkflow(data); - //setRecordingLength(data.workflow.length); }, [workflow]) useEffect(() => { From 4e9effd23ad33c8d171ffbedbe626689baf8d07e Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 17:56:49 +0530 Subject: [PATCH 18/22] wip: delay socket event emissions --- src/components/organisms/RightSidePanel.tsx | 77 ++++++++++++++------- 1 file changed, 52 insertions(+), 25 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 415d990d..6f961695 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -55,6 +55,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const [showCaptureText, setShowCaptureText] = useState(true); const [captureStage, setCaptureStage] = useState<'initial' | 'pagination' | 'limit' | 'complete'>('initial'); const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({}); + const [pendingEvents, setPendingEvents] = useState>([]); + const [isEmittingEvents, setIsEmittingEvents] = useState(false); const { lastAction, notify } = useGlobalInfoStore(); const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode } = useActionContext(); @@ -122,6 +124,35 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const handlePairDelete = () => {} + const addPendingEvent = (action: string, settings: any) => { + setPendingEvents(prev => [...prev, { action, settings }]); + }; + + const emitPendingEvents = useCallback(() => { + if (pendingEvents.length === 0) { + notify('info', 'No pending events to emit'); + return; + } + + setIsEmittingEvents(true); + + const emitEvents = async () => { + for (const event of pendingEvents) { + await new Promise((resolve) => { + socket?.emit('action', event, () => { + resolve(); + }); + }); + } + setPendingEvents([]); + setIsEmittingEvents(false); + onFinishCapture(); + }; + + emitEvents(); + }, [pendingEvents, socket, onFinishCapture]); + + const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { if (listId !== undefined && fieldKey !== undefined) { // Prevent editing if the field is confirmed @@ -208,10 +239,11 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const settings = getTextSettingsObject(); const hasTextSteps = browserSteps.some(step => step.type === 'text'); if (hasTextSteps) { - socket?.emit('action', { action: 'scrapeSchema', settings }); - } - onFinishCapture(); - }, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps]); + // socket?.emit('action', { action: 'scrapeSchema', settings }); + addPendingEvent('scrapeSchema', settings); + } + //onFinishCapture(); + }, [stopGetText, getTextSettingsObject, browserSteps, confirmedTextSteps, addPendingEvent]); const getListSettingsObject = useCallback(() => { let settings: { @@ -263,13 +295,14 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const stopCaptureAndEmitGetListSettings = useCallback(() => { const settings = getListSettingsObject(); if (settings) { - socket?.emit('action', { action: 'scrapeList', settings }); + // socket?.emit('action', { action: 'scrapeList', settings }); + addPendingEvent('scrapeList', settings) } else { notify('error', 'Unable to create list settings. Make sure you have defined a field for the list.'); } handleStopGetList(); - onFinishCapture(); - }, [stopGetList, getListSettingsObject, socket, notify, handleStopGetList]); + //onFinishCapture(); + }, [stopGetList, getListSettingsObject, addPendingEvent, notify, handleStopGetList]); const handleConfirmListCapture = useCallback(() => { switch (captureStage) { @@ -362,7 +395,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture caret: 'hide', scale: 'device', }; - socket?.emit('action', { action: 'screenshot', settings: screenshotSettings }); + // socket?.emit('action', { action: 'screenshot', settings: screenshotSettings }); + addPendingEvent('screenshot', screenshotSettings) addScreenshotStep(fullPage); stopGetScreenshot(); }; @@ -452,23 +486,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} - { - workflow.workflow.map((pair, i) => { - const activeId = workflow.workflow.length - i; - return ( - {}} - isActive={activeId === i + 1} - key={workflow.workflow.length - i} - index={workflow.workflow.length - i} - pair={pair} - updateWorkflow={setWorkflow} - numberOfPairs={workflow.workflow.length} - handleSelectPairForEdit={() => {}} - /> - ); - }) - } {browserSteps.map(step => ( handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)}> { @@ -596,6 +613,16 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} ))} + {pendingEvents.length > 0 && ( + + )} ); From e73a0a0a4f4610be146f667a4d8b9be53d0e71f8 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 18:19:23 +0530 Subject: [PATCH 19/22] feat: emission status --- src/components/organisms/RightSidePanel.tsx | 26 +++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 6f961695..32c983de 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -57,6 +57,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({}); const [pendingEvents, setPendingEvents] = useState>([]); const [isEmittingEvents, setIsEmittingEvents] = useState(false); + const [emissionStatus, setEmissionStatus] = useState<'idle' | 'emitting' | 'done'>('idle'); const { lastAction, notify } = useGlobalInfoStore(); const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode } = useActionContext(); @@ -135,6 +136,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture } setIsEmittingEvents(true); + setEmissionStatus('emitting'); const emitEvents = async () => { for (const event of pendingEvents) { @@ -146,6 +148,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture } setPendingEvents([]); setIsEmittingEvents(false); + setEmissionStatus('done'); onFinishCapture(); }; @@ -238,10 +241,14 @@ export const RightSidePanel: React.FC = ({ onFinishCapture stopGetText(); const settings = getTextSettingsObject(); const hasTextSteps = browserSteps.some(step => step.type === 'text'); - if (hasTextSteps) { - // socket?.emit('action', { action: 'scrapeSchema', settings }); + // if (hasTextSteps) { + // // socket?.emit('action', { action: 'scrapeSchema', settings }); + // addPendingEvent('scrapeSchema', settings); + // } + const textSteps = browserSteps.filter(step => step.type === 'text' && confirmedTextSteps[step.id]); + textSteps.forEach(step => { addPendingEvent('scrapeSchema', settings); - } + }); //onFinishCapture(); }, [stopGetText, getTextSettingsObject, browserSteps, confirmedTextSteps, addPendingEvent]); @@ -279,6 +286,15 @@ export const RightSidePanel: React.FC = ({ onFinishCapture return settings; }, [browserSteps, paginationType, limitType, customLimit]); + useEffect(() => { + if (emissionStatus === 'done') { + const timer = setTimeout(() => { + setEmissionStatus('idle'); + }, 3000); // Reset status after 3 seconds + return () => clearTimeout(timer); + } + }, [emissionStatus]); + const resetListState = useCallback(() => { setShowPaginationOptions(false); updatePaginationType(''); @@ -620,7 +636,9 @@ export const RightSidePanel: React.FC = ({ onFinishCapture onClick={emitPendingEvents} disabled={isEmittingEvents} > - {isEmittingEvents ? 'Emitting Events...' : 'Emit Socket Events'} + {emissionStatus === 'idle' && 'Emit Socket Events'} + {emissionStatus === 'emitting' && 'Emitting Events...'} + {emissionStatus === 'done' && 'Emission Complete'} )} From 6e14704a43b381f8a28b87d35553b1785fc6b77b Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 18:20:40 +0530 Subject: [PATCH 20/22] chore: remove Pair --- src/components/organisms/RightSidePanel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 32c983de..af952e09 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -21,7 +21,6 @@ import RadioGroup from '@mui/material/RadioGroup'; import { emptyWorkflow } from "../../shared/constants"; import { getActiveWorkflow } from "../../api/workflow"; import DeleteIcon from '@mui/icons-material/Delete'; -import { Pair } from '../molecules/Pair'; const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => { getActiveWorkflow(id).then( From f9d4867432e76309db7db540de84491379d99c44 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 18:34:04 +0530 Subject: [PATCH 21/22] fix: revert changes --- src/components/organisms/RightSidePanel.tsx | 85 ++++----------------- 1 file changed, 13 insertions(+), 72 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index af952e09..75035dd3 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -54,9 +54,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const [showCaptureText, setShowCaptureText] = useState(true); const [captureStage, setCaptureStage] = useState<'initial' | 'pagination' | 'limit' | 'complete'>('initial'); const [hoverStates, setHoverStates] = useState<{ [id: string]: boolean }>({}); - const [pendingEvents, setPendingEvents] = useState>([]); - const [isEmittingEvents, setIsEmittingEvents] = useState(false); - const [emissionStatus, setEmissionStatus] = useState<'idle' | 'emitting' | 'done'>('idle'); const { lastAction, notify } = useGlobalInfoStore(); const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode } = useActionContext(); @@ -65,6 +62,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const workflowHandler = useCallback((data: WorkflowFile) => { setWorkflow(data); + //setRecordingLength(data.workflow.length); }, [workflow]) useEffect(() => { @@ -122,38 +120,9 @@ export const RightSidePanel: React.FC = ({ onFinishCapture setHoverStates(prev => ({ ...prev, [id]: false })); }; - const handlePairDelete = () => {} - - const addPendingEvent = (action: string, settings: any) => { - setPendingEvents(prev => [...prev, { action, settings }]); - }; - - const emitPendingEvents = useCallback(() => { - if (pendingEvents.length === 0) { - notify('info', 'No pending events to emit'); - return; - } - - setIsEmittingEvents(true); - setEmissionStatus('emitting'); - - const emitEvents = async () => { - for (const event of pendingEvents) { - await new Promise((resolve) => { - socket?.emit('action', event, () => { - resolve(); - }); - }); - } - setPendingEvents([]); - setIsEmittingEvents(false); - setEmissionStatus('done'); - onFinishCapture(); - }; - - emitEvents(); - }, [pendingEvents, socket, onFinishCapture]); - + const handlePairDelete = () => { + + } const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { if (listId !== undefined && fieldKey !== undefined) { @@ -240,16 +209,11 @@ export const RightSidePanel: React.FC = ({ onFinishCapture stopGetText(); const settings = getTextSettingsObject(); const hasTextSteps = browserSteps.some(step => step.type === 'text'); - // if (hasTextSteps) { - // // socket?.emit('action', { action: 'scrapeSchema', settings }); - // addPendingEvent('scrapeSchema', settings); - // } - const textSteps = browserSteps.filter(step => step.type === 'text' && confirmedTextSteps[step.id]); - textSteps.forEach(step => { - addPendingEvent('scrapeSchema', settings); - }); - //onFinishCapture(); - }, [stopGetText, getTextSettingsObject, browserSteps, confirmedTextSteps, addPendingEvent]); + if (hasTextSteps) { + socket?.emit('action', { action: 'scrapeSchema', settings }); + } + onFinishCapture(); + }, [stopGetText, getTextSettingsObject, socket, browserSteps, confirmedTextSteps]); const getListSettingsObject = useCallback(() => { let settings: { @@ -285,15 +249,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture return settings; }, [browserSteps, paginationType, limitType, customLimit]); - useEffect(() => { - if (emissionStatus === 'done') { - const timer = setTimeout(() => { - setEmissionStatus('idle'); - }, 3000); // Reset status after 3 seconds - return () => clearTimeout(timer); - } - }, [emissionStatus]); - const resetListState = useCallback(() => { setShowPaginationOptions(false); updatePaginationType(''); @@ -310,14 +265,13 @@ export const RightSidePanel: React.FC = ({ onFinishCapture const stopCaptureAndEmitGetListSettings = useCallback(() => { const settings = getListSettingsObject(); if (settings) { - // socket?.emit('action', { action: 'scrapeList', settings }); - addPendingEvent('scrapeList', settings) + socket?.emit('action', { action: 'scrapeList', settings }); } else { notify('error', 'Unable to create list settings. Make sure you have defined a field for the list.'); } handleStopGetList(); - //onFinishCapture(); - }, [stopGetList, getListSettingsObject, addPendingEvent, notify, handleStopGetList]); + onFinishCapture(); + }, [stopGetList, getListSettingsObject, socket, notify, handleStopGetList]); const handleConfirmListCapture = useCallback(() => { switch (captureStage) { @@ -410,8 +364,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture caret: 'hide', scale: 'device', }; - // socket?.emit('action', { action: 'screenshot', settings: screenshotSettings }); - addPendingEvent('screenshot', screenshotSettings) + socket?.emit('action', { action: 'screenshot', settings: screenshotSettings }); addScreenshotStep(fullPage); stopGetScreenshot(); }; @@ -628,18 +581,6 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} ))} - {pendingEvents.length > 0 && ( - - )} ); From db42ff1b730c49950c836effa82e4e8ac46143dd Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Thu, 10 Oct 2024 18:34:25 +0530 Subject: [PATCH 22/22] chore: lint --- src/components/organisms/RightSidePanel.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx index 75035dd3..5863fdb1 100644 --- a/src/components/organisms/RightSidePanel.tsx +++ b/src/components/organisms/RightSidePanel.tsx @@ -120,9 +120,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture setHoverStates(prev => ({ ...prev, [id]: false })); }; - const handlePairDelete = () => { - - } + const handlePairDelete = () => {} const handleTextLabelChange = (id: number, label: string, listId?: number, fieldKey?: string) => { if (listId !== undefined && fieldKey !== undefined) { @@ -469,9 +467,9 @@ export const RightSidePanel: React.FC = ({ onFinishCapture color: 'red', p: 0, zIndex: 1, - boxShadow: '5px', - backgroundColor: 'white', - borderRadius: '50%', + boxShadow: '5px', + backgroundColor: 'white', + borderRadius: '50%', }} >