Merge pull request #17 from gwu-libraries/fix-refetch-query

Temp fix (page refresh) to reloading, need to set up subscriptions

Author: alepbloyd

react/src/components/SideBar.tsx

@@ -31,11 +31,17 @@ function SideBar() {
       doi: doiSearch,
       investigationId: investigationId,
     },
-    onCompleted: (data) => {},
+    onCompleted: (data) => {
+      {
+        {
+          window.location.reload();
+        }
+      }
+    },
     onError: (data) => {
       console.log(data);
     },
-    refetchQueries: [USE_INVESTIGATION_GRAPH],
+    // refetchQueries: [USE_INVESTIGATION_GRAPH],
   });
 
   let doiInputHandler = (e) => {
@@ -55,11 +61,17 @@ function SideBar() {
       bodyText: noteBodyText,
       investigationId: investigationId,
     },
-    onCompleted: (data) => {},
+    onCompleted: (data) => {
+      {
+        {
+          window.location.reload();
+        }
+      }
+    },
     onError: (data) => {
       console.log(data);
     },
-    refetchQueries: [USE_INVESTIGATION_GRAPH],
+    // refetchQueries: [USE_INVESTIGATION_GRAPH],
   });
 
   return (
@@ -82,12 +94,12 @@ function SideBar() {
       ></input>
       <button onClick={() => addAuthor()}>Add Author</button> */}
 
-      <input
+      {/* <input
         className="border-4 border-solid border-red-500"
         value={noteBodyText}
         onChange={noteTextInputHandler}
       ></input>
-      <button onClick={() => addNote()}>Add Sticky Note</button>
+      <button onClick={() => addNote()}>Add Sticky Note</button> */}
     </>
   );
 }

react/src/components/graph/InvestigationGraph.tsx

@@ -31,7 +31,6 @@ function InvestigationGraph({
     []
   );
 
-
   const initialNodes = [];
   const initialEdges = [];
 
@@ -70,20 +69,21 @@ function InvestigationGraph({
   for (let i = 0; i <= workEdges.length - 1; i++) {
     if (workEdges[i].visible) {
       initialEdges.push({
-        source: `work-${workEdges[i].citationNode.id}`,
-        target: `work-${workEdges[i].referenceNode.id}`,
+        target: `work-${workEdges[i].citationNode.id}`,
+        source: `work-${workEdges[i].referenceNode.id}`,
         id: `workedge-${workEdges[i].id}`,
         label: "citation/reference",
         style: {
           strokeWidth: 2,
           stroke: "#FF0072",
         },
-        markerStart: {
+        markerEnd: {
           type: MarkerType.ArrowClosed,
           width: 20,
           height: 20,
           color: "#FF0072",
         },
+        animated: true,
       });
     }
   }
@@ -114,7 +114,6 @@ function InvestigationGraph({
         edges={edges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
-        // onConnect={onConnect}
         nodeTypes={nodeTypes}
         nodesDraggable={true}
         fitView

react/src/components/graph/nodes/AuthorNode.tsx

@@ -25,11 +25,17 @@ function AuthorNode({ data }) {
 
   const [addAuthorWorks] = useMutation(ADD_AUTHOR_WORKS, {
     errorPolicy: "ignore",
-    onCompleted: (data) => {},
+    onCompleted: (data) => {
+      {
+        {
+          window.location.reload();
+        }
+      }
+    },
     onError: (data) => {
       console.log(data);
     },
-    refetchQueries: [USE_INVESTIGATION_GRAPH],
+    // refetchQueries: [USE_INVESTIGATION_GRAPH],
   });
 
   useEffect(() => {

react/src/components/graph/nodes/NoteNode.tsx

@@ -26,7 +26,7 @@ function NoteNode({
       investigationId: investigationId,
       noteNodeId: id
     },
-    refetchQueries: [USE_INVESTIGATION_GRAPH] // this doesn't seem to work for trigger refresh of graph, not sure why? It works in root node
+    // refetchQueries: [USE_INVESTIGATION_GRAPH] // this doesn't seem to work for trigger refresh of graph, not sure why? It works in root node
   })
 
   return (

react/src/components/graph/nodes/WorkDetails.tsx

@@ -33,11 +33,17 @@ function WorkDetails({
   const { investigationId } = useParams();
   const [addAuthor] = useMutation(CREATE_AUTHOR_NODE, {
     errorPolicy: "ignore",
-    onCompleted: (data) => {},
+    onCompleted: (data) => {
+      {
+        {
+          window.location.reload();
+        }
+      }
+    },
     onError: (data) => {
       console.log(data);
     },
-    refetchQueries: [USE_INVESTIGATION_GRAPH],
+    // refetchQueries: [USE_INVESTIGATION_GRAPH],
   });
 
   return (
@@ -50,7 +56,9 @@ function WorkDetails({
       >
         <tr className="border border-slate-700">
           <td
-            colSpan={Math.max(authors.length, keywords.length, topics.length) + 1}
+            colSpan={
+              Math.max(authors.length, keywords.length, topics.length) + 1
+            }
           >
             {abstract}
           </td>

react/src/components/graph/nodes/WorkNode.tsx

@@ -57,15 +57,29 @@ function WorkNode({ data }) {
       openalexId: data.workData.work.openalexId,
       investigationId: investigationId,
     },
-    refetchQueries: [USE_INVESTIGATION_GRAPH],
+    onCompleted: (data) => {
+      {
+        {
+          window.location.reload();
+        }
+      }
+    },
+    // refetchQueries: [USE_INVESTIGATION_GRAPH],
   });
 
   const [addCitations] = useMutation(ADD_CITATIONS, {
     variables: {
       openalexId: data.workData.work.openalexId,
       investigationId: investigationId,
     },
-    refetchQueries: [USE_INVESTIGATION_GRAPH],
+    onCompleted: (data) => {
+      {
+        {
+          window.location.reload();
+        }
+      }
+    },
+    // refetchQueries: [USE_INVESTIGATION_GRAPH],
   });
 
   useEffect(() => {
@@ -84,8 +98,8 @@ function WorkNode({ data }) {
       }}
       ref={noderef}
     >
-      <Handle type="source" position={Position.Top} id="top-handle" />
-      <Handle type="target" position={Position.Bottom} id="bottom-handle" />
+      <Handle type="target" position={Position.Top} id="top-handle" />
+      <Handle type="source" position={Position.Bottom} id="bottom-handle" />
       <label htmlFor="text">{data.workData.work.title}</label>
       <button onClick={() => addReferences()}>Show References</button>
       <p></p>