Merge branch '134-candidates-occasionally-don-t-load' into 'main'

Resolve "Candidates occasionally don't load"

Closes #134

See merge request !78

versd-ui/src/components/jobInfo.component.js

@@ -69,15 +69,22 @@ export default function JobInfo({ jobID, visible, onHide }) {
         style={{ width: "50vw" }}
         onHide={onHide}>
         <p className="m-0">
-          We processed {sourceRecordCounts} records from your data.
+          We processed {sourceRecordCounts} record
+          {sourceRecordCounts > 1 ? "s" : ""} from your data.
         </p>
-        <p className="m-0">We found {candidates.length} total candidate(s).</p>
         <p className="m-0">
-          We found candidates for only {candidateCounts.length} record(s).
+          We found {candidates.length} total candidate
+          {candidates.length > 1 ? "s" : ""}.
+        </p>
+        <p className="m-0">
+          We found candidates for only {candidateCounts.length} record
+          {candidateCounts.length > 1 ? "s" : ""}.
         </p>
 
         <p className="m-0">
-          You made {matchCounts} total match(es) for this request so far.
+          You made {matchCounts} total match
+          {matchCounts > 1 || matchCounts === 0 ? "es" : ""} for this request so
+          far.
         </p>
       </Dialog>
     </div>

versd-ui/src/components/quickMatch/candidateCards.component.js

@@ -9,7 +9,7 @@ import {
   ValueBodyTemplate,
   getLabel,
   hyperlinkTemplate,
-} from "./Utils";
+} from "../helpers";
 const AUTHORITYCONFIG = require("../../assets/authority_config.json");
 
 const CandidateTemplate = ({

versd-ui/src/components/quickMatch/fieldCard.component.js

+/** @format */
+import { getLabel, displayPercent } from "../helpers";
+const AUTHORITYCONFIG = require("../../assets/authority_config.json");
+
+export const FieldCard = ({ headings, heights }) => {
+  headings = headings.filter((element) => {
+    if (element in AUTHORITYCONFIG.fields) {
+      return !("label field" in AUTHORITYCONFIG.fields[element]);
+    } else {
+      return true;
+    }
+  });
+
+  return (
+    <div className="fieldCard">
+      <h3>Fields</h3>
+      <hr />
+
+      {[...headings].map((x, i) => (
+        <div
+          className={`card-row row-${i}`}
+          key={i}
+          style={{ height: `${x in heights ? heights[x] + 1 : "2"}em` }}>
+          <strong>{getLabel(x)}</strong>
+        </div>
+      ))}
+    </div>
+  );
+};

versd-ui/src/components/quickMatch/sourceDataCard.component.js

@@ -2,7 +2,7 @@
 import React, { useState, useRef } from "react";
 import { Button } from "primereact/button";
 import { InputText } from "primereact/inputtext";
-import { ValueBodyTemplate } from "./Utils";
+import { ValueBodyTemplate } from "../helpers";
 import { OverlayPanel } from "primereact/overlaypanel";
 
 const AUTHORITYCONFIG = require("../../assets/authority_config.json");

versd-ui/src/components/quickmatch.component.js

@@ -8,13 +8,14 @@ import { Toast } from "primereact/toast";
 
 import Skeleton from "../components/quickMatch/skeleton.component";
 import { SourceDataCard } from "./quickMatch/sourceDataCard.component";
+import { FieldCard } from "./quickMatch/fieldCard.component";
 import { CandidateCards } from "./quickMatch/candidateCards.component";
 import "../css/quickmatch.css";
 import AuthorityMappingService from "../services/authorityMapping.service";
 import CandidateService from "../services/candidate.service";
 import JobService from "../services/job.service";
 import SourceRecordService from "../services/sourceRecord.service";
-import { getLabel, displayPercent } from "./quickMatch/Utils";
+import { getLabel, displayPercent } from "./helpers";
 import { Tooltip } from "primereact/tooltip";
 const AUTHORITYCONFIG = require("../assets/authority_config.json");
 const HelpButtons = () => {
@@ -81,32 +82,6 @@ const HelpButtons = () => {
   );
 };
 
-const FieldCard = ({ headings, heights }) => {
-  headings = headings.filter((element) => {
-    if (element in AUTHORITYCONFIG.fields) {
-      return !("label field" in AUTHORITYCONFIG.fields[element]);
-    } else {
-      return true;
-    }
-  });
-
-  return (
-    <div className="fieldCard">
-      <h3>Fields</h3>
-      <hr />
-
-      {[...headings].map((x, i) => (
-        <div
-          className={`card-row row-${i}`}
-          key={i}
-          style={{ height: `${x in heights ? heights[x] + 1 : "2"}em` }}>
-          <strong>{getLabel(x)}</strong>
-        </div>
-      ))}
-    </div>
-  );
-};
-
 const KeyboardShortcutTemplate = () => {
   return (
     <ul>
@@ -161,12 +136,19 @@ const rowToCard = (row) => {
 
 const ReconciliationProgress = ({ value, totalRecords, count }) => {
   const _val = displayPercent(value, 0);
+  const recordsLeft = totalRecords - count;
+  const content =
+    recordsLeft > 1
+      ? `${recordsLeft} records left to vet!`
+      : `Only ${recordsLeft} record left to vet!!!`;
+
   return (
     <>
       <Tooltip
         target={".progressBar"}
-        content={`${totalRecords - count} Record(s) left to vet!`}
-        mouseTracks
+        content={content}
+        mouseTrack
+        mouseTrackLeft={10}
       />
       <div className="progressBar">
         <ProgressBar value={_val} />
@@ -260,10 +242,11 @@ const SummaryDialog = ({ ref, visible, setVisible, counts }) => {
   );
 };
 
-const IntroDialog = ({ ref, visible, setVisible }) => {
+const IntroDialog = () => {
+  const [visible, setVisible] = useState(true);
+
   return (
     <Dialog
-      ref={ref}
       onHide={() => {
         setVisible(false);
       }}
@@ -370,11 +353,10 @@ const QuickMatch = ({ jobID }) => {
   const prevButton = useRef(null);
   const nextButton = useRef(null);
   const summaryDialog = useRef(null);
-  const introDialog = useRef(null);
+
   const scrollContainerRef = useRef(null);
 
   const [summaryDialogVisible, setSummaryDialogVisible] = useState(false);
-  const [introDialogVisible, setIntroDialogVisible] = useState(true);
 
   const [jobName, setJobName] = useState(null);
   const [job, setJob] = useState(null);
@@ -733,10 +715,7 @@ const QuickMatch = ({ jobID }) => {
   if (recordId) {
     return (
       <div className="quickmatch">
-        <IntroDialog
-          visible={introDialogVisible}
-          setVisible={setIntroDialogVisible}
-        />
+        <IntroDialog />
         <Button
           icon="pi pi-info-circle"
           rounded