feat: add better error messaging

cancervariants · Sep 24, 2024 · 122af83 · 122af83
1 parent 0ad1d2f
commit 122af83
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx b/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx
@@ -22,11 +22,13 @@ const GeneElementInput: React.FC<GeneElementInputProps> = ({
   handleDelete,
   icon,
 }) => {
+  const [errors, setErrors] = useState<string[]>([]);
   const [gene, setGene] = useState<string>(element.gene?.label || "");
   const [geneText, setGeneText] = useState<string>("");
   const validated = gene !== "" && geneText == "";
   const [expanded, setExpanded] = useState<boolean>(!validated);
   const [pendingResponse, setPendingResponse] = useState(false);
+  const geneNotFound = "Gene not found";
 
   useEffect(() => {
     if (validated) buildGeneElement();
@@ -39,11 +41,14 @@ const GeneElementInput: React.FC<GeneElementInputProps> = ({
         geneElementResponse.warnings &&
         geneElementResponse.warnings.length > 0
       ) {
-        setGeneText("Gene not found");
+        setGeneText(geneNotFound);
+        setErrors([geneNotFound]);
+        setPendingResponse(false);
       } else if (
         geneElementResponse.element &&
         geneElementResponse.element.gene
       ) {
+        setErrors([]);
         getGeneNomenclature(geneElementResponse.element).then(
           (nomenclatureResponse: NomenclatureResponse) => {
             if (
@@ -81,6 +86,7 @@ const GeneElementInput: React.FC<GeneElementInputProps> = ({
     handleDelete,
     inputElements,
     validated,
+    errors,
     icon,
     pendingResponse,
   });

diff --git a/client/src/components/Pages/Structure/Input/LinkerElementInput/LinkerElementInput.tsx b/client/src/components/Pages/Structure/Input/LinkerElementInput/LinkerElementInput.tsx
@@ -70,6 +70,7 @@ const LinkerElementInput: React.FC<LinkerElementInputProps> = ({
     handleDelete,
     inputElements,
     validated,
+    errors: linkerError ? ["Invalid linker sequence"] : [],
     icon,
   });
 };

diff --git a/...nt/src/components/Pages/Structure/Input/RegulatoryElementInput/RegulatoryElementInput.tsx b/...nt/src/components/Pages/Structure/Input/RegulatoryElementInput/RegulatoryElementInput.tsx
@@ -65,6 +65,8 @@ const RegulatoryElementInput: React.FC<RegulatoryElementInputProps> = ({
   const validated = gene !== "" && geneText == "" && elementClass !== "default";
   const [expanded, setExpanded] = useState<boolean>(!validated);
 
+  const [errors, setErrors] = useState<string[]>([]);
+
   useEffect(() => {
     if (validated) handleAdd();
   }, [gene, geneText, elementClass]);
@@ -73,16 +75,19 @@ const RegulatoryElementInput: React.FC<RegulatoryElementInputProps> = ({
     if (elementClass === "default") return;
     getRegulatoryElement(elementClass, gene).then((reResponse) => {
       if (reResponse.warnings && reResponse.warnings.length > 0) {
-        throw new Error(reResponse.warnings[0]);
+        setErrors(reResponse.warnings);
+        return;
       }
       getRegElementNomenclature(reResponse.regulatoryElement).then(
         (nomenclatureResponse) => {
           if (
             nomenclatureResponse.warnings &&
             nomenclatureResponse.warnings.length > 0
           ) {
-            throw new Error(nomenclatureResponse.warnings[0]);
+            setErrors(nomenclatureResponse.warnings);
+            return;
           }
+          setErrors([]);
           const newRegElement: ClientRegulatoryElement = {
             ...reResponse.regulatoryElement,
             elementId: element.elementId,
@@ -104,6 +109,7 @@ const RegulatoryElementInput: React.FC<RegulatoryElementInputProps> = ({
     setElementClass("default");
     setGene("");
     setGeneText("");
+    setErrors([]);
   };
 
   const inputElements = (
@@ -127,6 +133,7 @@ const RegulatoryElementInput: React.FC<RegulatoryElementInputProps> = ({
     handleDelete: handleDeleteElement,
     inputElements,
     validated,
+    errors,
     icon,
   });
 };

diff --git a/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx b/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx
@@ -7,19 +7,12 @@ import CardActions from "@mui/material/CardActions";
 import Collapse from "@mui/material/Collapse";
 import DeleteIcon from "@material-ui/icons/Delete";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorIcon from "@mui/icons-material/Error";
 import EditIcon from "@material-ui/icons/Edit";
 import { red, green } from "@material-ui/core/colors";
 import "./StructuralElementInputAccordion.scss";
 import { BaseStructuralElementProps } from "./StructuralElementInputProps";
 import React from "react";
-import {
-  Alert,
-  CircularProgress,
-  List,
-  ListItem,
-  Tooltip,
-} from "@mui/material";
+import { Alert, CircularProgress, Tooltip } from "@mui/material";
 import { makeStyles, Typography } from "@material-ui/core";
 
 const useStyles = makeStyles(() => ({
@@ -85,8 +78,6 @@ const StructuralElementInputAccordion: React.FC<
   pendingResponse,
 }) => {
   const classes = useStyles();
-  console.log(errors);
-  console.log(validated);
 
   return (
     <Card>

diff --git a/...nts/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx b/...nts/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx
@@ -18,6 +18,7 @@ interface TemplatedSequenceElementInputProps
 const TemplatedSequenceElementInput: React.FC<
   TemplatedSequenceElementInputProps
 > = ({ element, handleSave, handleDelete, icon }) => {
+  const [errors, setErrors] = useState<string[]>([]);
   const [chromosome, setChromosome] = useState<string>(
     element.inputChromosome || ""
   );
@@ -72,10 +73,12 @@ const TemplatedSequenceElementInput: React.FC<
       ) {
         // TODO visible error handling
         setInputError("element validation unsuccessful");
+        setErrors(templatedSequenceResponse.warnings);
         setPendingResponse(false);
         return;
       } else if (templatedSequenceResponse.element) {
         setInputError("");
+        setErrors([]);
         getTemplatedSequenceNomenclature(
           templatedSequenceResponse.element
         ).then((nomenclatureResponse) => {
@@ -175,6 +178,7 @@ const TemplatedSequenceElementInput: React.FC<
     handleDelete,
     inputElements,
     validated,
+    errors,
     icon,
     pendingResponse,
   });