Merge pull request #273 from jdi-testing/issue_207

handle container scroll
jdi-testing · Aug 9, 2021 · 243d145 · 243d145
2 parents 797fd19 + dd1aca7
commit 243d145
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "name": "JDN",
   "description": "",
   "devtools_page": "index.html",
-  "version": "3.0.34",
+  "version": "3.0.35",
   "permissions": [
     "activeTab",
     "tabs",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdi-react-extension",
-  "version": "3.0.34",
+  "version": "3.0.35",
   "description": "jdi react extension",
   "scripts": {
     "start": "npm run webpack",

diff --git a/src/js/blocks/autoFind/AutoFind.jsx b/src/js/blocks/autoFind/AutoFind.jsx
@@ -26,6 +26,7 @@ const AutoFind = ({ classes }) => {
       unreachableNodes,
       availableForGeneration,
       xpathStatus,
+      unactualPrediction,
     },
     {
       identifyElements,
@@ -122,13 +123,21 @@ const AutoFind = ({ classes }) => {
             description={`${unreachableNodes.length} controls are unreachable due to DOM updates.`}
           />
         ) : null}
+        {unactualPrediction ?
+          (<Alert
+            type="warning"
+            showIcon
+            description={`Prediction is not actual anymore. Please, remove highlight and re-run identification.`}
+          />)
+          : null
+        }
       </Content>
       <Footer className={classes.footer}>
         <div>
           <a
             hidden={!allowRemoveElements}
             onClick={handleReportProblem}>
-              Report Problem
+            Report Problem
           </a>
         </div>
         backend ver. {backendVer}

diff --git a/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx b/src/js/blocks/autoFind/autoFindProvider/AutoFindProvider.jsx
@@ -46,6 +46,7 @@ const AutoFindProvider = inject("mainModel")(
     const [xpathStatus, setXpathStatus] = useState(
       xpathGenerationStatus.noStatus
     );
+    const [unactualPrediction, setUnactualPrediction] = useState(false);
 
     connector.onerror = () => {
       setStatus(autoFindStatus.error);
@@ -60,6 +61,7 @@ const AutoFindProvider = inject("mainModel")(
       setUnreachableNodes([]);
       setAvailableForGeneration([]);
       setXpathStatus(xpathGenerationStatus.noStatus);
+      setUnactualPrediction(false);
     };
 
     const toggleElementGeneration = (id) => {
@@ -157,24 +159,26 @@ const AutoFindProvider = inject("mainModel")(
       HIGHLIGHT_OFF: clearElementsState,
       REMOVE_ELEMENT: hideElement,
       CHANGE_TYPE: changeType,
+      PREDICTION_IS_UNACTUAL: () => setUnactualPrediction(true),
     };
 
     useEffect(() => {
       if (predictedElements) {
         const onHighlighted = () => {
           setStatus(autoFindStatus.success);
           setAvailableForGeneration(
-            _.unionBy(
-              availableForGeneration,
-              predictedElements.filter(
+            _.chain(predictedElements)
+              .map(predicted => {
+                const el = _.find(availableForGeneration, { element_id: predicted.element_id });
+                return { ...el, ...predicted };
+              })
+              .filter(
                 (e) =>
                   e.predicted_probability >= perception &&
                   !e.skipGeneration &&
                   !e.hidden &&
                   !unreachableNodes.includes(e.element_id)
-              ),
-              'element_id'
-            )
+              ).value()
           );
         }
 
@@ -229,6 +233,7 @@ const AutoFindProvider = inject("mainModel")(
         unreachableNodes,
         availableForGeneration,
         xpathStatus,
+        unactualPrediction,
       },
       {
         identifyElements,

diff --git a/src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.js b/src/js/blocks/autoFind/autoFindProvider/contentScripts/highlight.js
@@ -31,7 +31,7 @@ export const highlightOnPage = () => {
     });
 
     const div = document.getElementById(element.element_id);
-    div.remove();
+    if (div) div.remove();
   };
 
   const assignType = (element) => {
@@ -73,7 +73,23 @@ export const highlightOnPage = () => {
     highlightElements.push(element);
   };
 
-  let nodes; // not to run querySelector() on every scroll/resize
+  const clearContainer = (parent) => {
+    nodes.forEach(node => {
+      if (parent.contains(node)) {
+        const id = node.getAttribute('jdn-hash');
+        predictedElements.find(elem => elem.element_id === id).hidden = true;
+        chrome.runtime.sendMessage({
+          message: "REMOVE_ELEMENT",
+          param: id,
+        });
+        chrome.runtime.sendMessage({
+          message: "PREDICTION_IS_UNACTUAL"
+        })
+      };
+    });
+  };
+
+  let nodes;
   let predictedElements;
   let perception;
   const findAndHighlight = (param) => {
@@ -107,9 +123,10 @@ export const highlightOnPage = () => {
   };
 
   let timer;
-  const scrollListenerCallback = () => {
+  const scrollListenerCallback = ({ target }) => {
     if (timer) clearTimeout(timer);
     timer = setTimeout(() => {
+      if (target !== document) clearContainer(target);
       findAndHighlight();
     }, 300);
   };
@@ -155,7 +172,7 @@ export const highlightOnPage = () => {
   const events = ["scroll", "resize"];
   const removeEventListeners = () => {
     events.forEach((eventName) => {
-      document.removeEventListener(eventName, scrollListenerCallback);
+      document.removeEventListener(eventName, scrollListenerCallback, true);
     });
     document.removeEventListener("click", clickListener);
   };
@@ -171,7 +188,7 @@ export const highlightOnPage = () => {
 
   const setDocumentListeners = () => {
     events.forEach((eventName) => {
-      document.addEventListener(eventName, scrollListenerCallback);
+      document.addEventListener(eventName, scrollListenerCallback, true);
     });
 
     document.addEventListener("click", clickListener);