From 122af8333dd6ec16e88ff509320c043fa5f800b0 Mon Sep 17 00:00:00 2001 From: Katie Stahl Date: Tue, 24 Sep 2024 09:13:32 -0400 Subject: [PATCH] feat: add better error messaging --- .../Input/GeneElementInput/GeneElementInput.tsx | 8 +++++++- .../Input/LinkerElementInput/LinkerElementInput.tsx | 1 + .../RegulatoryElementInput/RegulatoryElementInput.tsx | 11 +++++++++-- .../Input/StructuralElementInputAccordion.tsx | 11 +---------- .../TemplatedSequenceElementInput.tsx | 4 ++++ 5 files changed, 22 insertions(+), 13 deletions(-) diff --git a/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx b/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx index 1db935cf..a17a90a2 100644 --- 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 = ({ handleDelete, icon, }) => { + const [errors, setErrors] = useState([]); const [gene, setGene] = useState(element.gene?.label || ""); const [geneText, setGeneText] = useState(""); const validated = gene !== "" && geneText == ""; const [expanded, setExpanded] = useState(!validated); const [pendingResponse, setPendingResponse] = useState(false); + const geneNotFound = "Gene not found"; useEffect(() => { if (validated) buildGeneElement(); @@ -39,11 +41,14 @@ const GeneElementInput: React.FC = ({ 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 = ({ 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 index e35f4252..120dfd14 100644 --- 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 = ({ handleDelete, inputElements, validated, + errors: linkerError ? ["Invalid linker sequence"] : [], icon, }); }; diff --git a/client/src/components/Pages/Structure/Input/RegulatoryElementInput/RegulatoryElementInput.tsx b/client/src/components/Pages/Structure/Input/RegulatoryElementInput/RegulatoryElementInput.tsx index fa52cce7..bf383260 100644 --- a/client/src/components/Pages/Structure/Input/RegulatoryElementInput/RegulatoryElementInput.tsx +++ b/client/src/components/Pages/Structure/Input/RegulatoryElementInput/RegulatoryElementInput.tsx @@ -65,6 +65,8 @@ const RegulatoryElementInput: React.FC = ({ const validated = gene !== "" && geneText == "" && elementClass !== "default"; const [expanded, setExpanded] = useState(!validated); + const [errors, setErrors] = useState([]); + useEffect(() => { if (validated) handleAdd(); }, [gene, geneText, elementClass]); @@ -73,7 +75,8 @@ const RegulatoryElementInput: React.FC = ({ 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) => { @@ -81,8 +84,10 @@ const RegulatoryElementInput: React.FC = ({ 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 = ({ setElementClass("default"); setGene(""); setGeneText(""); + setErrors([]); }; const inputElements = ( @@ -127,6 +133,7 @@ const RegulatoryElementInput: React.FC = ({ 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 index 2d5dddae..c0bed313 100644 --- 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 ( diff --git a/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx b/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx index 8611f7af..b4ef0f3f 100644 --- a/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx +++ b/client/src/components/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([]); const [chromosome, setChromosome] = useState( 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, });