Merge pull request #26 from amhsirak/develop

fix: `getList` highlighter race condition

server/src/workflow-management/classes/Generator.ts

@@ -485,12 +485,12 @@ export class WorkflowGenerator {
     const generalSelector = await getNonUniqueSelectors(page, coordinates)
     const childSelectors = await getChildSelectors(page, generalSelector.generalSelector);
 
-    console.log('Non Unique Selectors [DEBUG]:', generalSelector);
+    console.log(`Get List value while generating selector`, this.getList);
-    console.log('Child Selectors [DEBUG]:', childSelectors);
 
     const selectorBasedOnCustomAction = (this.getList === true)
       ? await getNonUniqueSelectors(page, coordinates)
       : await getSelectors(page, coordinates);
+      
     const bestSelector = getBestSelectorForAction(
       {
         type: action,
@@ -522,13 +522,13 @@ export class WorkflowGenerator {
         if (this.listSelector !== '') {
           const childSelectors = await getChildSelectors(page, this.listSelector || '');
           this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo, childSelectors })
+        } else {
+          this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo });
         }
       } else {
         this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo });
       }
     }
-    // reset getList after usage
-    this.getList = false;
   }
 
   /**

src/components/organisms/BrowserWindow.tsx

@@ -112,28 +112,29 @@ export const BrowserWindow = () => {
 
     const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] }) => {
         if (getList === true) {
-            socket?.emit('setGetList', { getList: true });
             if (listSelector) {
                 socket?.emit('listSelector', { selector: listSelector });
                 if (paginationMode) {
-                    // Pagination mode: only set highlighterData if type is not empty, 'none', 'scrollDown', or 'scrollUp'
+                    // only set highlighterData if type is not empty, 'none', 'scrollDown', or 'scrollUp'
-                    if (paginationType !== '' && paginationType !== 'scrollDown' && paginationType !== 'scrollUp' && paginationType !== 'none') {
+                    if (paginationType !== '' && !['none', 'scrollDown', 'scrollUp'].includes(paginationType)) {
                         setHighlighterData(data);
                     } else {
                         setHighlighterData(null);
                     }
                 } else if (data.childSelectors && data.childSelectors.includes(data.selector)) {
-                    // !Pagination mode: highlight only valid child elements within the listSelector
+                    // highlight only valid child elements within the listSelector
                     setHighlighterData(data);
                 } else {
-                    // If not a valid child in normal mode, clear the highlighter
+                    // if !valid child in normal mode, clear the highlighter
                     setHighlighterData(null);
                 }
             } else {
-                setHighlighterData(data); // Set highlighterData for the initial listSelector selection
+                // set highlighterData for the initial listSelector selection
+                setHighlighterData(data);
             }
         } else {
-            setHighlighterData(data); // For non-list steps
+            // for non-list steps
+            setHighlighterData(data);
         }
     }, [highlighterData, getList, socket, listSelector, paginationMode, paginationType]);
 

src/context/browserActions.tsx

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { useSocketStore } from './socket';
 
 export type PaginationType = 'scrollDown' | 'scrollUp' | 'clickNext' | 'clickLoadMore' | 'none' | '';
 export type LimitType = '10' | '100' | 'custom' | '';
@@ -39,6 +40,8 @@ export const ActionProvider = ({ children }: { children: ReactNode }) => {
     const [limitType, setLimitType] = useState<LimitType>('');
     const [customLimit, setCustomLimit] = useState<string>('');
 
+    const {socket} = useSocketStore();
+
     const updatePaginationType = (type: PaginationType) => setPaginationType(type);
     const updateLimitType = (type: LimitType) => setLimitType(type);
     const updateCustomLimit = (limit: string) => setCustomLimit(limit);
@@ -52,9 +55,14 @@ export const ActionProvider = ({ children }: { children: ReactNode }) => {
     const startGetText = () => setGetText(true);
     const stopGetText = () => setGetText(false);
 
-    const startGetList = () => setGetList(true);
+    const startGetList = () => {
+        setGetList(true);
+        socket?.emit('setGetList', { getList: true });
+    }
+        
     const stopGetList = () => {
         setGetList(false);
+        socket?.emit('setGetList', { getList: false });
         setPaginationType('');
         setLimitType('');
         setCustomLimit('');