feat: add better error messaging

cancervariants · Sep 23, 2024 · 0ad1d2f · 0ad1d2f
1 parent d15a82c
commit 0ad1d2f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx b/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx
@@ -1,4 +1,3 @@
-import { Tooltip, makeStyles, CircularProgress } from "@material-ui/core";
 import { styled } from "@mui/material/styles";
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import Card from "@mui/material/Card";
@@ -13,6 +12,15 @@ 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 { makeStyles, Typography } from "@material-ui/core";
 
 const useStyles = makeStyles(() => ({
   cardHeaderAction: {
@@ -42,6 +50,7 @@ interface StructuralElementInputAccordionProps
   setExpanded?: React.Dispatch<React.SetStateAction<boolean>>;
   inputElements?: JSX.Element;
   validated: boolean;
+  errors?: string[];
   icon: JSX.Element;
   pendingResponse?: boolean;
 }
@@ -71,10 +80,13 @@ const StructuralElementInputAccordion: React.FC<
   handleDelete,
   inputElements,
   validated,
+  errors,
   icon,
   pendingResponse,
 }) => {
   const classes = useStyles();
+  console.log(errors);
+  console.log(validated);
 
   return (
     <Card>
@@ -121,20 +133,25 @@ const StructuralElementInputAccordion: React.FC<
           root: classes.cardActionsRoot,
         }}
       >
-        {validated ? (
+        {errors?.length === 0 && validated ? (
           <Tooltip title="Validation successful">
             <CheckCircleIcon
               className="input-correct"
               style={{ color: green[500] }}
             />
           </Tooltip>
         ) : (
-          <Tooltip title="Invalid component">
-            <ErrorIcon
-              className="input-incorrect"
-              style={{ color: red[500] }}
-            />
-          </Tooltip>
+          <>
+            {errors && errors.length ? (
+              <Alert severity="error">
+                {errors?.map((e) => {
+                  return <Typography variant="body2">{e}</Typography>;
+                })}
+              </Alert>
+            ) : (
+              <></>
+            )}
+          </>
         )}
         {inputElements ? (
           <ExpandMore

diff --git a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx b/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx
@@ -33,7 +33,6 @@ interface TxSegmentElementInputProps extends StructuralElementInputProps {
 
 const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
   element,
-  index,
   handleSave,
   handleDelete,
   icon,
@@ -51,6 +50,8 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
         : null
     );
 
+  const [errors, setErrors] = useState<string[]>([]);
+
   // "Text" variables refer to helper or warning text to set under input fields
   // TODO: this needs refactored so badly
   const [txAc, setTxAc] = useState(element.inputTx || "");
@@ -234,6 +235,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
             txSegmentResponse.warnings &&
             txSegmentResponse.warnings?.length > 0
           ) {
+            setErrors(txSegmentResponse.warnings);
             CheckGenomicCoordWarning(txSegmentResponse.warnings);
           } else {
             const inputParams = {
@@ -244,6 +246,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
               inputGenomicStart: txStartingGenomic,
               inputGenomicEnd: txEndingGenomic,
             };
+            setErrors([]);
             handleTxElementResponse(txSegmentResponse, inputParams);
           }
         });
@@ -278,10 +281,13 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
                 setEndingExonText("Invalid");
               }
             }
+            setPendingResponse(false);
+            setErrors(txSegmentResponse.warnings);
           } else {
             setTxAcText("");
             setStartingExonText("");
             setEndingExonText("");
+            setErrors([]);
             const inputParams = {
               inputType: txInputType,
               inputTx: txAc,
@@ -678,6 +684,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
     handleDelete,
     inputElements,
     validated,
+    errors,
     icon,
     pendingResponse,
   });