refactor(backend,taxonomy-editor-frontend): Handle background task on…

… frontend

backend/editor/api.py

@@ -122,6 +122,8 @@ class StatusFilter(str, Enum):
 
     OPEN = "OPEN"
     CLOSED = "CLOSED"
+    LOADING = "LOADING"
+    FAILED = "FAILED"
 
 
 @app.exception_handler(RequestValidationError)

backend/editor/entries.py

@@ -86,9 +86,6 @@ async def parse_taxonomy(self, filename):
         """
         Helper function to call the Open Food Facts Python Taxonomy Parser
         """
-        # Close current transaction to use the session variable in parser
-        await get_current_transaction().commit()
-
         with SyncTransactionCtx() as session:
             # Create parser object and pass current session to it
             parser_object = parser.Parser(session)
@@ -110,6 +107,9 @@ async def import_from_github(self, description):
         filename = self.taxonomy_name + ".txt"
         base_url += filename
         try:
+            async with TransactionCtx():
+                await self.create_project(description)  # Creates a "project node" in neo4j
+
             with tempfile.TemporaryDirectory(prefix="taxonomy-") as tmpdir:
                 # File to save the downloaded taxonomy
                 filepath = f"{tmpdir}/{filename}"
@@ -120,10 +120,12 @@ async def import_from_github(self, description):
                 status = await self.parse_taxonomy(filepath)  # Parse the taxonomy
 
             async with TransactionCtx():
-                await self.create_project(description)  # Creates a "project node" in neo4j
+                await self.set_project_status(status="OPEN")
 
             return status
         except Exception as e:
+            async with TransactionCtx():
+                await self.set_project_status(status="FAILED")
             raise TaxonomyImportError() from e
 
     async def upload_taxonomy(self, filepath, description):
@@ -244,7 +246,7 @@ async def create_project(self, description):
             "taxonomy_name": self.taxonomy_name,
             "branch_name": self.branch_name,
             "description": description,
-            "status": "OPEN",
+            "status": "LOADING",
         }
         await get_current_transaction().run(query, params)
 

taxonomy-editor-frontend/src/pages/go-to-project/index.tsx

@@ -29,22 +29,23 @@ const GoToProject = ({ clearNavBarLinks }: Props) => {
   const navigate = useNavigate();
 
   const { data, isPending, isError } = useFetch<ProjectsAPIResponse>(
-    `${API_URL}projects?status=OPEN`
+    `${API_URL}projects`
   );
 
   useEffect(() => {
     let newProjects: ProjectType[] = [];
 
     if (data) {
       const backendProjects = data.map(
-        ({ id, branch_name, taxonomy_name, description, errors_count }) => {
+        ({ id, branch_name, taxonomy_name, description, errors_count, status }) => {
           return {
             id, // needed by MaterialTable as key
             projectName: id,
             taxonomyName: toTitleCase(taxonomy_name),
             branchName: branch_name,
             description: description,
             errors_count: errors_count,
+            status: status
           };
         }
       );
@@ -117,6 +118,7 @@ const GoToProject = ({ clearNavBarLinks }: Props) => {
                 }
               },
             },
+            { title: "Status", field: "status" },
           ]}
           options={{
             actionsColumnIndex: -1,

taxonomy-editor-frontend/src/pages/root-nodes/index.tsx

@@ -84,7 +84,7 @@ const RootNodes = ({
     );
   }
 
-  if (isPending || !nodes) {
+  if (isPending || !nodes || nodes.length === 0) {
     return (
       <Box
         sx={{
@@ -93,6 +93,10 @@ const RootNodes = ({
         }}
       >
         <CircularProgress />
+        <Typography sx={{ m: 5 }} variant="h6">
+          Taxonomy parsing may take several minutes, depending on the complexity of the taxonomy being imported.<br/>
+          Kindly refresh the page to view the updated status of the project.
+        </Typography>
       </Box>
     );
   }

taxonomy-editor-frontend/src/pages/startproject/index.tsx

@@ -42,6 +42,7 @@ const StartProject = ({ clearNavBarLinks }) => {
     const baseUrl = createBaseURL(toSnakeCase(taxonomyName), branchName);
     setLoading(true);
     const dataToBeSent = { description: description };
+    let errorMessage : string = "Unable to import";
 
     fetch(`${baseUrl}import`, {
       method: "POST",
@@ -51,12 +52,13 @@ const StartProject = ({ clearNavBarLinks }) => {
       .then(async (response) => {
         const responseBody = await response.json();
         if (!response.ok) {
-          throw new Error(responseBody?.detail ?? "Unable to import");
+          errorMessage = responseBody?.detail ?? "Unable to import";
+          throw new Error(errorMessage);
         }
         navigate(`/${toSnakeCase(taxonomyName)}/${branchName}/entry`);
       })
       .catch(() => {
-        setErrorMessage("Unable to import");
+        setErrorMessage(errorMessage);
       })
       .finally(() => setLoading(false));
   };