feat: parsing errors page (#186)

* feat: show error count in table * add errors page to navbar * add error page * link to errors page * review * merge main and update import utils * review
openfoodfacts · Jan 24, 2023 · 68b64ec · 68b64ec
1 parent f778e1b
commit 68b64ec
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 2 deletions.
diff --git a/taxonomy-editor-frontend/src/App.js b/taxonomy-editor-frontend/src/App.js
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import ResponsiveAppBar from "./components/ResponsiveAppBar";
 import Entry from "./pages/allentries";
 import EditEntry from "./pages/editentry";
+import Errors from "./pages/errors";
 import ExportTaxonomy from "./pages/export";
 import GotoProject from "./pages/gotoproject";
 import Home from "./pages/home";
@@ -51,6 +52,10 @@ function App() {
               path=":taxonomyName/:branchName/search"
               element={<SearchNode setDisplayedPages={setDisplayedPages} />}
             />
+            <Route
+              path=":taxonomyName/:branchName/errors"
+              element={<Errors setDisplayedPages={setDisplayedPages} />}
+            />
           </Routes>
         </div>
       </Router>

diff --git a/taxonomy-editor-frontend/src/pages/allentries/index.jsx b/taxonomy-editor-frontend/src/pages/allentries/index.jsx
@@ -59,6 +59,7 @@ const Entry = ({ setDisplayedPages }) => {
       setDisplayedPages([
         { url: urlPrefix + "entry", translationKey: "Nodes" },
         { url: urlPrefix + "search", translationKey: "Search" },
+        { url: urlPrefix + "errors", translationKey: "Errors" },
         { url: urlPrefix + "export", translationKey: "Export" },
       ]);
     },

diff --git a/taxonomy-editor-frontend/src/pages/editentry/index.jsx b/taxonomy-editor-frontend/src/pages/editentry/index.jsx
@@ -24,6 +24,7 @@ const EditEntry = ({ setDisplayedPages }) => {
       setDisplayedPages([
         { url: urlPrefix + "entry", translationKey: "Nodes" },
         { url: urlPrefix + "search", translationKey: "Search" },
+        { url: urlPrefix + "errors", translationKey: "Errors" },
         { url: urlPrefix + "export", translationKey: "Export" },
       ]);
     },

diff --git a/taxonomy-editor-frontend/src/pages/errors/index.jsx b/taxonomy-editor-frontend/src/pages/errors/index.jsx
@@ -0,0 +1,117 @@
+import useFetch from "../../components/useFetch";
+import { toTitleCase } from "../../utils";
+import { createBaseURL } from "../editentry/createURL";
+import { useParams } from "react-router-dom";
+import {
+  Box,
+  Typography,
+  Table,
+  TableCell,
+  TableBody,
+  TableHead,
+  TableContainer,
+} from "@mui/material";
+import MaterialTable from "@material-table/core";
+import { useState, useEffect } from "react";
+
+const Errors = ({ setDisplayedPages }) => {
+  const { taxonomyName, branchName } = useParams();
+  const baseUrl = createBaseURL(taxonomyName, branchName);
+  const urlPrefix = `${taxonomyName}/${branchName}/`;
+  const [errors, setErrors] = useState([]);
+  const {
+    data: errorData,
+    isPending,
+    isError,
+  } = useFetch(`${baseUrl}parsing_errors`);
+
+  useEffect(() => {
+    if (!errorData) return;
+    const newErrors = errorData.errors.map((error, index) => ({
+      id: index + 1,
+      error: error,
+    }));
+    setErrors(newErrors);
+  }, [errorData]);
+
+  useEffect(
+    function addLinksToNavbar() {
+      setDisplayedPages([
+        { url: urlPrefix + "entry", translationKey: "Nodes" },
+        { url: urlPrefix + "search", translationKey: "Search" },
+        { url: urlPrefix + "errors", translationKey: "Errors" },
+        { url: urlPrefix + "export", translationKey: "Export" },
+      ]);
+    },
+    [urlPrefix, setDisplayedPages]
+  );
+
+  if (isError) {
+    return (
+      <Box>
+        <Typography variant="h5">Unable to load errors.</Typography>
+      </Box>
+    );
+  }
+  if (isPending) {
+    return (
+      <Box>
+        <Typography variant="h5">Loading...</Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <TableContainer sx={{ ml: 2, width: 375, mt: 2 }}>
+        <Table style={{ border: "solid", borderWidth: 1.5 }}>
+          <TableHead>
+            <TableCell align="left">
+              <Typography variant="h6">Taxonony Name</Typography>
+            </TableCell>
+            <TableCell align="left">
+              <Typography variant="h6">Branch Name</Typography>
+            </TableCell>
+          </TableHead>
+          <TableBody>
+            <TableCell align="left" component="td" scope="row">
+              <Typography variant="body1">
+                {toTitleCase(taxonomyName)}
+              </Typography>
+            </TableCell>
+            <TableCell align="left" component="td" scope="row">
+              <Typography variant="body1">{branchName}</Typography>
+            </TableCell>
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <Box
+        sx={{
+          width: 500,
+          ml: 2,
+          mt: 2,
+          border: "solid",
+          borderWidth: 1.5,
+        }}
+      >
+        <MaterialTable
+          data={errors}
+          columns={[
+            {
+              title: "No.",
+              field: "id",
+              width: "10%",
+            },
+            { title: "Error", field: "error" },
+          ]}
+          title="Errors"
+          options={{
+            tableLayout: "fixed",
+          }}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default Errors;
diff --git a/taxonomy-editor-frontend/src/pages/export/index.jsx b/taxonomy-editor-frontend/src/pages/export/index.jsx
@@ -35,6 +35,7 @@ const ExportTaxonomy = ({ setDisplayedPages }) => {
     setDisplayedPages([
       { url: urlPrefix + "entry", translationKey: "Nodes" },
       { url: urlPrefix + "search", translationKey: "Search" },
+      { url: urlPrefix + "errors", translationKey: "Errors" },
       { url: urlPrefix + "export", translationKey: "Export" },
     ]);
   }, [urlPrefix, setDisplayedPages]);

diff --git a/taxonomy-editor-frontend/src/pages/gotoproject/index.jsx b/taxonomy-editor-frontend/src/pages/gotoproject/index.jsx
@@ -1,4 +1,4 @@
-import { Typography, Box, Grid } from "@mui/material";
+import { Typography, Box, Grid, Link as MuiLink } from "@mui/material";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import useFetch from "../../components/useFetch";
@@ -31,6 +31,7 @@ const GotoProject = () => {
           taxonomyName: toTitleCase(projectNode["taxonomy_name"]),
           branchName: projectNode["branch_name"],
           description: projectNode["description"],
+          errors_count: projectNode["errors_count"],
         });
       });
     }
@@ -65,7 +66,25 @@ const GotoProject = () => {
             { title: "Project", field: "projectName" },
             { title: "Taxonomy", field: "taxonomyName" },
             { title: "Branch", field: "branchName" },
-            { title: "Description", field: "description", width: "15vw" },
+            { title: "Description", field: "description", width: "10vw" },
+            {
+              title: "Errors",
+              field: "errors_count",
+              render: (rowData) => {
+                if (rowData["errors_count"] > 0) {
+                  return (
+                    <MuiLink
+                      color="error"
+                      href={`/${toSnakeCase(rowData["taxonomyName"])}/${
+                        rowData["branchName"]
+                      }/errors`}
+                    >
+                      {rowData["errors_count"] + " errors"}
+                    </MuiLink>
+                  );
+                }
+              },
+            },
           ]}
           options={{
             actionsColumnIndex: -1,

diff --git a/taxonomy-editor-frontend/src/pages/search/index.jsx b/taxonomy-editor-frontend/src/pages/search/index.jsx
@@ -24,6 +24,7 @@ const SearchNode = ({ setDisplayedPages }) => {
       setDisplayedPages([
         { url: urlPrefix + "entry", translationKey: "Nodes" },
         { url: urlPrefix + "search", translationKey: "Search" },
+        { url: urlPrefix + "errors", translationKey: "Errors" },
         { url: urlPrefix + "export", translationKey: "Export" },
       ]);
     },