Add prior knowledge functionality

asreview · Apr 25, 2024 · 9b53dea · 9b53dea
1 parent e85da6a
commit 9b53dea
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 55 deletions.
diff --git a/asreview/webapp/src/ProjectComponents/ReviewComponents/RecordCard.js b/asreview/webapp/src/ProjectComponents/ReviewComponents/RecordCard.js
@@ -72,7 +72,7 @@ const RecordCard = ({
 }) => {
   const [readMoreOpen, toggleReadMore] = useToggle();
 
-  console.log(record);
+  // console.log(record);
 
   const isNotTrained =
     record?.state?.query_strategy === "top-down" ||

diff --git a/asreview/webapp/src/ProjectComponents/SetupComponents/PriorCard.js b/asreview/webapp/src/ProjectComponents/SetupComponents/PriorCard.js
@@ -1,5 +1,6 @@
 import { useContext } from "react";
-import { useQuery } from "react-query";
+import React from "react";
+import { useQuery, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
 
 import {
@@ -18,7 +19,6 @@ import {
 import { ProjectContext } from "ProjectContext";
 import { ProjectAPI } from "api";
 import { historyFilterOptions } from "globals.js";
-import { useToggle } from "hooks/useToggle";
 import { AddPriorKnowledge } from "./SearchComponents";
 
 const PriorCard = ({
@@ -27,10 +27,12 @@ const PriorCard = ({
   editable = true,
 }) => {
   const project_id = useContext(ProjectContext);
+  const queryClient = useQueryClient();
 
   const navigate = useNavigate();
 
-  const [onAddPrior, toggleAddPrior] = useToggle();
+  const [openPriorSearch, setOpenPriorSearch] = React.useState(false);
+  const [priorType, setPriorType] = React.useState("records");
 
   const handleClickViewPrior = () => {
     navigate(`/projects/${project_id}/history`);
@@ -43,11 +45,19 @@ const PriorCard = ({
     ["fetchLabeledStats", { project_id: project_id }],
     ProjectAPI.fetchLabeledStats,
     {
-      enabled: project_id !== null,
       refetchOnWindowFocus: false,
     },
   );
 
+  const onClosePriorSearch = () => {
+    // Reset the fetchLabeledStats query
+    queryClient.resetQueries("fetchLabeledStats");
+
+    setOpenPriorSearch(false);
+  };
+
+  console.log("render card", data);
+
   return (
     <Card>
       <CardHeader
@@ -75,7 +85,8 @@ const PriorCard = ({
             row
             aria-labelledby="prior-type-radio"
             name="prior-type"
-            defaultValue="records"
+            defaultValue={priorType}
+            onChange={(event) => setPriorType(event.target.value)}
           >
             <FormControlLabel
               value="records"
@@ -90,43 +101,49 @@ const PriorCard = ({
           </RadioGroup>
         </FormControl>
       </CardContent>
-      <CardContent>
-        {(data?.n_inclusions === 0 || data?.n_exclusions === 0) && (
-          <Typography>
-            Search for one or more relevant records and label them relevant.
-            It's also possible to label irrelevant records.
-          </Typography>
-        )}
-        {data?.n_inclusions !== 0 && data?.n_exclusions !== 0 && (
-          <Typography>
-            {`${data?.n_prior_inclusions} relevant and ${data?.n_prior_exclusions} irrelevant records`}
-          </Typography>
-        )}
-      </CardContent>
-      <CardContent>
-        <Button
-          id={"add-prior-search"}
-          onClick={toggleAddPrior}
-          variant="contained"
-          disabled={editable}
-          sx={{ mr: 2 }}
-        >
-          Search
-        </Button>
-
-        <Button
-          id={"add-prior-view"}
-          onClick={handleClickViewPrior}
-          disabled={data?.n_inclusions === 0 && data?.n_exclusions === 0}
-        >
-          View ({data?.n_inclusions + data?.n_exclusions})
-        </Button>
-      </CardContent>
+
+      {priorType === "records" && (
+        <>
+          <CardContent>
+            {(data?.n_inclusions === 0 || data?.n_exclusions === 0) && (
+              <Typography>
+                Search for one or more relevant records and label them relevant.
+                It's also possible to label irrelevant records.
+              </Typography>
+            )}
+            {data?.n_inclusions !== 0 && data?.n_exclusions !== 0 && (
+              <Typography>
+                {`${data?.n_prior_inclusions} relevant and ${data?.n_prior_exclusions} irrelevant records`}
+              </Typography>
+            )}
+          </CardContent>
+
+          <CardContent>
+            <Button
+              id={"add-prior-search"}
+              onClick={() => setOpenPriorSearch(true)}
+              variant="contained"
+              disabled={!editable}
+              sx={{ mr: 2 }}
+            >
+              Search
+            </Button>
+
+            <Button
+              id={"add-prior-view"}
+              onClick={handleClickViewPrior}
+              disabled={data?.n_inclusions === 0 && data?.n_exclusions === 0}
+            >
+              View ({data?.n_inclusions + data?.n_exclusions})
+            </Button>
+          </CardContent>
+        </>
+      )}
 
       <AddPriorKnowledge
-        open={onAddPrior}
+        open={openPriorSearch}
         mobileScreen={mobileScreen}
-        toggleAddPrior={toggleAddPrior}
+        onClose={onClosePriorSearch}
       />
     </Card>
   );

diff --git a/asreview/webapp/src/ProjectComponents/SetupComponents/SearchComponents/AddPriorKnowledge.js b/asreview/webapp/src/ProjectComponents/SetupComponents/SearchComponents/AddPriorKnowledge.js
@@ -20,18 +20,7 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
   overflowY: "hidden",
 }));
 
-const AddPriorKnowledge = ({ open, toggleAddPrior, mobileScreen }) => {
-  const project_id = useContext(ProjectContext);
-
-  const { data } = useQuery(
-    ["fetchLabeledStats", { project_id: project_id }],
-    ProjectAPI.fetchLabeledStats,
-    {
-      enabled: open && project_id !== null,
-      refetchOnWindowFocus: false,
-    },
-  );
-
+const AddPriorKnowledge = ({ open, onClose, mobileScreen }) => {
   return (
     <StyledDialog
       hideBackdrop
@@ -43,13 +32,14 @@ const AddPriorKnowledge = ({ open, toggleAddPrior, mobileScreen }) => {
         sx: { height: !mobileScreen ? "calc(100% - 64px)" : "100%" },
       }}
       TransitionComponent={Fade}
+      onClose={onClose}
     >
       <DialogTitle>Search prior knowledge</DialogTitle>
       <DialogContent>
-        <PriorSearch n_prior={data?.n_prior} />
+        <PriorSearch />
       </DialogContent>
       <DialogActions>
-        <Button onClick={toggleAddPrior}>Return</Button>
+        <Button onClick={onClose}>Return</Button>
       </DialogActions>
     </StyledDialog>
   );

diff --git a/asreview/webapp/src/ProjectComponents/SetupComponents/SearchComponents/PriorSearch.js b/asreview/webapp/src/ProjectComponents/SetupComponents/SearchComponents/PriorSearch.js
@@ -97,7 +97,9 @@ const PriorSearch = ({}) => {
     }
   };
 
-  const afterDecision = () => {};
+  const afterDecision = () => {
+    console.log("afterDecision - close the card");
+  };
 
   return (
     <Root>