DHFPROD-9658: Matching two URI's after a wrong match is unresponsive

Author: briantang

marklogic-data-hub-central/ui/e2e/cypress/integration/curation/curate/matching.spec.tsx

@@ -395,9 +395,37 @@ describe("Matching", () => {
     // cy.findByTestId("ruleSet-slider-ticks").find(`div[style*="left: 19.1919%;"]`).trigger("mousemove", {force: true});
     // multiSlider.getHandleName("testMultipleProperty").trigger("mouseup", {force: true});
 
+    cy.log("**Test when user clicks on test button after adding/deleting URI's in 'Test Uris'**");
+    matchingStepDetail.getUriOnlyRadio().click();
+    for (let i = 0; i < 2; i++) {
+      cy.waitUntil(() => matchingStepDetail.getUriOnlyInputField().clear().type(uris[i]));
+      matchingStepDetail.getAddUriOnlyIcon().click();
+    }
+    //test two truthy URI matches
+    matchingStepDetail.getTestMatchUriButton();
+    cy.findByLabelText("noMatchedDataView").should("have.length.lt", 1);
+    cy.get(`[id="testMatchedPanel"]`).contains(uriMatchedResults[0].ruleName).should("have.length.gt", 0);
+    cy.findByText("(Threshold: " + uriMatchedResults[0].threshold + ")").should("have.length.gt", 0);
+
+    //delete one and test two faulty URI matches
+    matchingStepDetail.getUriDeleteIcon().last().click();
+    cy.waitUntil(() => matchingStepDetail.getUriOnlyInputField().clear().type("/json/persons/faulty-metaphone.json"));
+    matchingStepDetail.getAddUriOnlyIcon().click();
+    matchingStepDetail.getTestMatchUriButton();
+    cy.findByLabelText("noMatchedDataView").should("have.length.gt", 0);
+
+    //test two truthy URI matches again
+    matchingStepDetail.getUriDeleteIcon().last().click();
+    cy.waitUntil(() => matchingStepDetail.getUriOnlyInputField().clear().type("/json/persons/first-name-double-metaphone2.json"));
+    matchingStepDetail.getAddUriOnlyIcon().click();
+    matchingStepDetail.getTestMatchUriButton();
+    cy.findByLabelText("noMatchedDataView").should("have.length.lt", 1);
+    cy.get(`[id="testMatchedPanel"]`).contains(uriMatchedResults[0].ruleName).should("have.length.gt", 0);
+    cy.findByText("(Threshold: " + uriMatchedResults[0].threshold + ")").should("have.length.gt", 0);
+
     //To test when users click on test button and no data is returned
     cy.log("**To test when users click on test button and no data is returned**");
-    cy.findByLabelText("inputUriRadio").scrollIntoView({duration: 2000});
+    cy.findByLabelText("inputUriRadio").scrollIntoView({duration: 2000}).click();
     cy.waitUntil(() => matchingStepDetail.getUriInputField().scrollIntoView().type("/json/noDataUri"));
     matchingStepDetail.getAddUriIcon().click();
     matchingStepDetail.getTestMatchUriButton();

marklogic-data-hub-central/ui/e2e/cypress/integration/explore/exploreGraphFacetConsistentNavigation.spec.tsx

@@ -29,10 +29,11 @@ describe("Test navigation with facets from graph side panel to details twice", (
     toolbar.getExploreToolbarIcon().click();
 
     cy.log("**Verify loading indicator in the graph**");
-    browsePage.getGraphLoader().should("be.visible");
+    graphExplore.getGraphLoader().should("be.visible");
     cy.log("**Select Graph view**");
     browsePage.clickGraphView();
     graphExplore.getGraphVisCanvas().should("be.visible");
+    graphExplore.getStabilizationAlert().should("be.visible");
     graphExplore.stopStabilization();
 
     cy.log("**Enter text in search field and apply facets**");

marklogic-data-hub-central/ui/e2e/cypress/support/components/matching/matching-step-detail.tsx

@@ -108,6 +108,10 @@ class MatchingStepDetail {
     return cy.findByLabelText("inputUriRadio");
   }
 
+  getUriOnlyRadio() {
+    return cy.findByLabelText("inputUriOnlyRadio");
+  }
+
   verifyURIAdded(name: string) {
     return cy.findByText(name).scrollIntoView().should("be.visible");
   }

marklogic-data-hub-central/ui/e2e/cypress/support/pages/browse.tsx

@@ -744,10 +744,6 @@ class BrowsePage {
     return cy.get(`[data-testid="merge-icon${rowNum}"]`);
   }
 
-  //loading spinner and message container
-  getGraphLoader() {
-    return cy.get(`[aria-label="spinner-message-container"]`);
-  }
 }
 
 const browsePage = new BrowsePage();

marklogic-data-hub-central/ui/e2e/cypress/support/pages/graphExplore.tsx

@@ -111,6 +111,15 @@ class GraphExplore {
   getTooltip() {
     return cy.get(`div.vis-tooltip`);
   }
+  getStabilizationAlert() {
+    return cy.get(`[aria-label="graph-stabilization-alert"]`);
+  }
+
+  //loading spinner and message container
+  getGraphLoader() {
+    return cy.get(`[aria-label="spinner-message-container"]`);
+  }
+
   getContextMenu() {
     return cy.waitUntil(() => cy.get("#contextMenu"));
   }

marklogic-data-hub-central/ui/src/components/entities/matching/matching-step-detail/matching-step-detail.module.scss

@@ -199,6 +199,10 @@
     margin-right: 0;
 }
 
+.compareTestButton {
+    width: 100px;
+}
+
 .questionCircle {
     font-size: 12px;
     vertical-align: top;

marklogic-data-hub-central/ui/src/components/entities/matching/matching-step-detail/matching-step-detail.tsx

@@ -100,6 +100,7 @@ const MatchingStepDetail: React.FC = () => {
   const [singleUriWarning2, setSingleUriWarning2] = useState(false);
   const [uriTestMatchClicked, setUriTestMatchClicked] = useState(uriTestStorage);
   const [loading, setToggleLoading] = useState(false);
+  const [compareBtnLoading, setCompareBtnLoading] = useState<any>([]);
   const [allDataSelected, setAllDataSelected] = useState(false);
   const [testUrisOnlySelected, setTestUrisOnlySelected] = useState(true);
   const [testUrisAllDataSelected, setTestUrisAllDataSelected] = useState(false);
@@ -199,8 +200,9 @@ const MatchingStepDetail: React.FC = () => {
     setMatchingActivity(matchActivity);
   };
 
-  const handlePreviewMatchingActivity = async (testMatchData, previewActivity = previewMatchedActivity, thresholds = curationOptions.activeStep.stepArtifact.thresholds, setDataFunction = setPreviewMatchedData, setActivityFunction = setPreviewMatchedActivity, setDataList = setRulesetDataList, localRulesetDataList = rulesetDataList) => {
+  const handlePreviewMatchingActivity = async (testMatchData, previewActivity = previewMatchedActivity, thresholds = curationOptions.activeStep.stepArtifact.thresholds, setDataFunction = setPreviewMatchedData, setActivityFunction = setPreviewMatchedActivity, setDataList = setRulesetDataList) => {
     const test = () => {
+      let localRulesetDataList:any = [];
       for (let i = 0; i < thresholds.length; i++) {
         let ruleset = thresholds[i].thresholdName.concat(" - ") + thresholds[i].action;
         let score = thresholds[i].score;
@@ -221,21 +223,21 @@ const MatchingStepDetail: React.FC = () => {
           localRulesetDataList.push(localData);
         }
       }
-      localRulesetDataList.shift();
+      return localRulesetDataList;
     };
     previewActivity = await previewMatchingActivity(testMatchData);
     if (previewActivity) {
       setToggleLoading(false);
+      let updatedRulesetList = await test();
       setDataFunction(previewActivity.actionPreview.length);
-      await test();
       setActivityFunction(previewActivity);
-      setDataList(localRulesetDataList);
+      setDataList(updatedRulesetList);
     }
 
   };
 
   const handlePreviewNonMatchingActivity = async (testMatchData) => {
-    await handlePreviewMatchingActivity(Object.assign({nonMatches: true}, testMatchedData), previewNonMatchedActivity, notMatchedThreshold, setPreviewNonMatchedData, setPreviewNonMatchedActivity, setRulesetNonMatchedDataList, rulesetNonMatchedDataList);
+    await handlePreviewMatchingActivity(Object.assign({nonMatches: true}, testMatchedData), previewNonMatchedActivity, notMatchedThreshold, setPreviewNonMatchedData, setPreviewNonMatchedActivity, setRulesetNonMatchedDataList);
   };
 
   const getKeysToExpandFromTable = async () => {
@@ -531,7 +533,8 @@ const MatchingStepDetail: React.FC = () => {
     setActiveMatchedUri(tmpActiveMatchedUri);
   };
 
-  const handleCompareButton = async (arr) => {
+  const handleCompareButton = async (e, rulesetName, arr) => {
+    setCompareBtnLoading([e.target.id, rulesetName]);
     setEntityProperties(curationOptions.entityDefinitionsArray[0].properties);
     const result1 = await getDocFromURI(arr[0]);
     const result2 = await getDocFromURI(arr[1]);
@@ -547,6 +550,7 @@ const MatchingStepDetail: React.FC = () => {
       let previewInstance = preview.data.value.envelope.instance;
       await setUriInfo([{result1Instance}, {result2Instance}, {previewInstance}]);
     }
+    setCompareBtnLoading(["#", "#"]);
     setCompareModalVisible(true);
     setUrisCompared(uris);
   };
@@ -1083,7 +1087,7 @@ const MatchingStepDetail: React.FC = () => {
                                           </span>
                                         </Accordion.Button>
                                         <div className={"p-2"}>
-                                          <HCButton size="sm" variant="primary" onClick={() => { handleCompareButton([actionPreviewData.uris[0], actionPreviewData.uris[1]]); }} aria-label={actionPreviewData.uris[0].substr(0, 41) + " compareButton"}>Compare</HCButton>
+                                          <HCButton size="sm" variant="primary" id={idx} className={styles.compareTestButton} onClick={(e) => { handleCompareButton(e, rulesetDataList.rulesetName, [actionPreviewData.uris[0], actionPreviewData.uris[1]]); }} loading={compareBtnLoading[0]?.toString() === idx.toString() && compareBtnLoading[1] === rulesetDataList.rulesetName ? true : false} aria-label={actionPreviewData.uris[0].substr(0, 41) + " compareButton"}>Compare</HCButton>
                                         </div>
                                       </div>
                                       {curationOptions.activeStep?.stepArtifact?.matchRulesets &&
@@ -1142,7 +1146,7 @@ const MatchingStepDetail: React.FC = () => {
                                           </span>
                                         </Accordion.Button>
                                         <div className={"p-2"}>
-                                          <HCButton size="sm" variant="primary" onClick={() => { handleCompareButton([actionPreviewData.uris[0], actionPreviewData.uris[1]]); }} aria-label={actionPreviewData.uris[0].substr(0, 41) + " compareButton"}>Compare</HCButton>
+                                          <HCButton size="sm" className={styles.compareTestButton} id={idx} variant="primary" onClick={(e) => { handleCompareButton(e, rulesetDataList.rulesetName, [actionPreviewData.uris[0], actionPreviewData.uris[1]]); }} loading={compareBtnLoading[0]?.toString() === idx.toString() && compareBtnLoading[1] === rulesetDataList.rulesetName ? true : false} aria-label={actionPreviewData.uris[0].substr(0, 41) + " compareButton"}>Compare</HCButton>
                                         </div>
                                       </div>
                                       {curationOptions.activeStep?.stepArtifact?.matchRulesets &&

marklogic-data-hub-central/ui/src/components/explore/graph-view-explore/graph-view-explore.module.scss

@@ -2,6 +2,11 @@
     padding: 10px 10px 0px 0px;
 
     .graphHeader {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .graphButtons {
         display: flex;
         justify-content: space-between;
         width: 100%;

marklogic-data-hub-central/ui/src/components/explore/graph-view-explore/graph-view-explore.tsx

@@ -1,4 +1,4 @@
-import {HCCheckbox, HCTooltip} from "@components/common";
+import {HCCheckbox, HCTooltip, HCAlert} from "@components/common";
 import React, {CSSProperties, useEffect, useContext, useState} from "react";
 import {getViewSettings, setViewSettings} from "@util/user-context";
 
@@ -215,8 +215,15 @@ const GraphViewExplore: React.FC<Props> = (props) => {
       ? <span></span>
       : (<div className={styles.graphViewExploreContainer}>
         <div className={styles.graphHeader}>
-          {graphSwitches}
-          {headerButtons}
+          <HCAlert
+            variant="info"
+            aria-label="graph-stabilization-alert"
+            showIcon
+          >{graphViewTooltips.graphStabilizationMessage}</HCAlert>
+          <div className={styles.graphButtons}>
+            {graphSwitches}
+            {headerButtons}
+          </div>
         </div>
         <div className={styles.borderBelowHeader}></div>
         <div>

marklogic-data-hub-central/ui/src/components/explore/graph-vis-explore/graph-vis-explore.tsx

@@ -111,7 +111,11 @@ const GraphVisExplore: React.FC<Props> = (props) => {
     } catch (err) {
       console.error("Error clearing the graph data before reset.");
     } finally {
-      setIsLoading(true);
+
+      //**turn this back on to investigate how to show loading while nodes are bouncing/stabilizing**/
+      // setIsLoading(true);
+      //****************************** */
+
       updateNodesData(getNodes());
       updateEdgesData(getEdges());
       setExpandedNodeData({});