Lots of fixes for small state transitions and styling. Getting ready …

…for beta release of 2.0.0
JSv4 · Jun 15, 2024 · f1cc056 · f1cc056
1 parent 9c58d78
commit f1cc056
Show file tree

Hide file tree

Showing 9 changed files with 170 additions and 274 deletions.
diff --git a/config/graphql/mutations.py b/config/graphql/mutations.py
@@ -195,6 +195,7 @@ def mutate(root, info, datacell_id):
             pk = from_global_id(datacell_id)[1]
             obj = Datacell.objects.get(pk=pk)
             obj.approved_by = info.context.user
+            obj.rejected_by = None
             obj.save()
             message = "SUCCESS!"
 
@@ -226,6 +227,7 @@ def mutate(root, info, datacell_id):
             pk = from_global_id(datacell_id)[1]
             obj = Datacell.objects.get(pk=pk)
             obj.rejected_by = info.context.user
+            obj.approved_by = None
             obj.save()
             message = "SUCCESS!"
 

diff --git a/frontend/src/components/widgets/modals/EditExtractModal.tsx b/frontend/src/components/widgets/modals/EditExtractModal.tsx
@@ -5,6 +5,8 @@ import {
   Button,
   Modal,
   Icon,
+  Dimmer,
+  Loader,
 } from "semantic-ui-react";
 import {
   ColumnType,
@@ -45,9 +47,7 @@ import { CreateColumnModal } from "./CreateColumnModal";
 import {
   addingColumnToExtract,
   editingColumnForExtract,
-  showEditExtractModal,
 } from "../../../graphql/cache";
-import { EditColumnModal } from "./EditColumnModal";
 
 interface EditExtractModalProps {
   ext: ExtractType | null;
@@ -163,7 +163,7 @@ export const EditExtractModal = ({
     });
   };
 
-  const [createColumn] = useMutation<
+  const [createColumn, { loading: create_column_loading }] = useMutation<
     RequestCreateColumnOutputType,
     RequestCreateColumnInputType
   >(REQUEST_CREATE_COLUMN, {
@@ -192,6 +192,8 @@ export const EditExtractModal = ({
     error,
     data: extract_data,
     refetch,
+    startPolling,
+    stopPolling,
   } = useQuery<RequestGetExtractOutput, RequestGetExtractInput>(
     REQUEST_GET_EXTRACT,
     {
@@ -202,7 +204,7 @@ export const EditExtractModal = ({
     }
   );
 
-  const [updateColumn] = useMutation<
+  const [updateColumn, { loading: update_column_loading }] = useMutation<
     RequestUpdateColumnOutputType,
     RequestUpdateColumnInputType
   >(REQUEST_UPDATE_COLUMN, {
@@ -235,21 +237,55 @@ export const EditExtractModal = ({
     },
   });
 
-  const [startExtract] = useMutation<
+  const [startExtract, { loading: start_extract_loading }] = useMutation<
     RequestStartExtractOutputType,
     RequestStartExtractInputType
   >(REQUEST_START_EXTRACT, {
     onCompleted: (data) => {
       toast.success("SUCCESS! Started extract.");
-      setExtract((e) => {
-        return { ...e, ...data.startExtract.obj };
+      setExtract((old_extract) => {
+        return { ...old_extract, ...data.startExtract.obj };
       });
+      startPolling(30000);
     },
     onError: (err) => {
       toast.error("ERROR! Could not start extract.");
+      stopPolling();
     },
   });
 
+  // Setup long-polling (or stop it) for incomplete jobs that are running
+  useEffect(() => {
+    if (extract_data && extract_data.extract.started) {
+      // Start polling every 30 seconds
+      startPolling(30000);
+
+      // Set up a timeout to stop polling after 10 minutes
+      const timeoutId = setTimeout(() => {
+        stopPolling();
+        toast.info(
+          "Job is taking too long... polling paused after 10 minutes."
+        );
+      }, 600000);
+
+      // Clean up the timeout when the component unmounts or the extract changes
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [extract_data, startPolling, stopPolling]);
+
+  useEffect(() => {
+    if (
+      extract_data &&
+      (extract_data.extract.stacktrace !== null ||
+        extract_data.extract.finished !== null)
+    ) {
+      // Stop polling when the extract has failed or finished
+      stopPolling();
+    }
+  }, [extract_data, stopPolling]);
+
   useEffect(() => {
     if (extract) {
       refetch();
@@ -307,6 +343,23 @@ export const EditExtractModal = ({
           justifyContent: "center",
         }}
       >
+        {start_extract_loading ? (
+          <Dimmer>
+            <Loader>Running...</Loader>
+          </Dimmer>
+        ) : (
+          <></>
+        )}
+        {loading ||
+        update_column_loading ||
+        add_docs_loading ||
+        remove_docs_loading ? (
+          <Dimmer>
+            <Loader>Loading...</Loader>
+          </Dimmer>
+        ) : (
+          <></>
+        )}
         <ModalHeader>Editing Extract {extract.name}</ModalHeader>
         <ModalContent style={{ flex: 1 }}>
           <div
@@ -349,6 +402,7 @@ export const EditExtractModal = ({
             onAddDocIds={handleAddDocIdsToExtract}
             onRemoveDocIds={handleRemoveDocIdsFromExtract}
             onRemoveColumnId={handleDeleteColumnIdFromExtract}
+            refetch={() => refetch({ id: extract.id })}
             extract={extract}
             cells={cells}
             rows={rows}

diff --git a/frontend/src/extracts/ExtractDataGrid.tsx b/frontend/src/extracts/ExtractDataGrid.tsx
diff --git a/frontend/src/extracts/datagrid/DataCell.tsx b/frontend/src/extracts/datagrid/DataCell.tsx
@@ -18,6 +18,7 @@ import {
   selectedAnnotation,
 } from "../../graphql/cache";
 import { Server } from "http";
+import _ from "lodash";
 
 interface ExtractDatacellProps {
   cellData: DatacellType;
@@ -62,8 +63,7 @@ export const ExtractDatacell = ({
   onReject,
   onEdit,
 }: ExtractDatacellProps): JSX.Element => {
-  console.log("Celldata", cellData);
-
+  const [color, setColor] = useState<string>("gray");
   const [modalOpen, setModalOpen] = useState(false);
   const [editData, setEditData] = useState<Record<string, any> | null>(null);
   const [viewSourceAnnotations, setViewSourceAnnotations] = useState<
@@ -85,43 +85,36 @@ export const ExtractDatacell = ({
     }
   }, [viewSourceAnnotations]);
 
-  const viewOnly =
-    readOnly || (cellData.started && !(cellData.failed || cellData.completed));
-
   useEffect(() => {
     setEditData(cellData.correctedData ?? cellData.data ?? {});
   }, [cellData]);
 
-  const handleEditClick = () => {
-    setModalOpen(true);
-  };
-
-  const handleSave = () => {
-    if (editData && onEdit) {
-      onEdit(cellData.id, editData);
-    }
-    setModalOpen(false);
-  };
-
   const handleCancel = () => {
     setEditData(null);
     setModalOpen(false);
   };
 
-  let color = "light gray";
-  if (cellData.failed) {
-    color = "red";
-  } else if (cellData.started && cellData.completed) {
-    if (cellData.correctedData) {
-      color = "yellow";
-    } else if (cellData.rejectedBy) {
-      color = "light red";
-    } else if (cellData.approvedBy) {
-      color = "green";
-    } else {
-      color = "light green";
+  useEffect(() => {
+    console.log("Calculate color on new cellData!");
+    let calculated_color = "light gray";
+    if (cellData.failed) {
+      calculated_color = "red";
+    } else if (cellData.started && cellData.completed) {
+      console.log("Try to determine ");
+      if (
+        cellData.correctedData !== "{}" &&
+        !_.isEmpty(cellData.correctedData)
+      ) {
+        calculated_color = "yellow";
+      } else if (cellData.rejectedBy) {
+        calculated_color = "red";
+      } else if (cellData.approvedBy) {
+        calculated_color = "green";
+      }
     }
-  }
+    console.log("Calculated color", cellData, calculated_color);
+    setColor(calculated_color);
+  }, [cellData]);
 
   const renderJsonPreview = (data: Record<string, any>) => {
     const jsonString = JSON.stringify(data, null, 2);
@@ -135,13 +128,9 @@ export const ExtractDatacell = ({
     );
   };
 
-  const handleJsonChange = (newData: Record<string, any>) => {
-    setEditData(newData);
-  };
-
   return (
     <>
-      <Table.Cell key={cellData.id} style={{ color }}>
+      <Table.Cell key={cellData.id} style={{ backgroundColor: color }}>
         {cellData.started && !cellData.completed ? (
           <Dimmer active>
             <Loader />