Issue 256

client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx

@@ -9,7 +9,7 @@ import {
   getGeneElement,
   getGeneNomenclature,
 } from "../../../../../services/main";
-import ElementInputAccordion from "../StructuralElementInputAccordion";
+import StructuralElementInputAccordion from "../StructuralElementInputAccordion";
 
 interface GeneElementInputProps extends StructuralElementInputProps {
   element: ClientGeneElement;
@@ -28,12 +28,14 @@ const GeneElementInput: React.FC<GeneElementInputProps> = ({
   const [geneText, setGeneText] = useState<string>("");
   const validated = gene !== "" && geneText == "";
   const [expanded, setExpanded] = useState<boolean>(!validated);
+  const [pendingResponse, setPendingResponse] = useState(false);
 
   useEffect(() => {
     if (validated) buildGeneElement();
   }, [gene, geneText]);
 
   const buildGeneElement = () => {
+    setPendingResponse(true)
     getGeneElement(gene).then((geneElementResponse) => {
       if (
         geneElementResponse.warnings &&
@@ -56,6 +58,7 @@ const GeneElementInput: React.FC<GeneElementInputProps> = ({
                 nomenclature: nomenclatureResponse.nomenclature,
               };
               handleSave(index, clientGeneElement);
+              setPendingResponse(false)
             }
           }
         );
@@ -74,14 +77,15 @@ const GeneElementInput: React.FC<GeneElementInputProps> = ({
     />
   );
 
-  return ElementInputAccordion({
+  return StructuralElementInputAccordion({
     expanded,
     setExpanded,
     element,
     handleDelete,
     inputElements,
     validated,
     icon,
+    pendingResponse
   });
 };
 

client/src/components/Pages/Structure/Input/StaticElement/StaticElement.tsx

@@ -1,17 +1,18 @@
 import { BaseStructuralElementProps } from "../StructuralElementInputProps";
-import CompInputAccordion from "../StructuralElementInputAccordion";
+import StructuralElementInputAccordion from "../StructuralElementInputAccordion";
 
 const StaticElement: React.FC<BaseStructuralElementProps> = ({
   element,
   handleDelete,
   icon,
 }) =>
-  CompInputAccordion({
+  StructuralElementInputAccordion({
     expanded: false,
     element,
     handleDelete,
     validated: true,
     icon,
+    pendingResponse: false
   });
 
 export default StaticElement;

client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, makeStyles } from "@material-ui/core";
+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";
@@ -43,6 +43,7 @@ interface StructuralElementInputAccordionProps
   inputElements?: JSX.Element;
   validated: boolean;
   icon: JSX.Element;
+  pendingResponse?: boolean;
 }
 
 interface ExpandMoreProps extends IconButtonProps {
@@ -71,6 +72,7 @@ const StructuralElementInputAccordion: React.FC<
   inputElements,
   validated,
   icon,
+  pendingResponse
 }) => {
   const classes = useStyles();
 
@@ -79,6 +81,8 @@ const StructuralElementInputAccordion: React.FC<
       <CardHeader
         avatar={icon}
         action={
+          pendingResponse ?
+          <CircularProgress style={{width: "1.25em", height: "1.25em", padding: "8px"}} /> :
           <Tooltip title="Delete element">
             <IconButton
               style={{ cursor: "pointer" }}

client/src/components/Pages/Structure/Input/StructuralElementInputProps.tsx

@@ -4,6 +4,7 @@ export interface BaseStructuralElementProps {
   element: ClientElementUnion;
   handleDelete?: (id?: string) => void;
   icon: JSX.Element;
+  pendingResponse?: boolean
 }
 
 export interface StructuralElementInputProps

client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx

@@ -18,6 +18,7 @@ interface TemplatedSequenceElementInputProps
 const TemplatedSequenceElementInput: React.FC<
   TemplatedSequenceElementInputProps
 > = ({ element, index, handleSave, handleDelete, icon }) => {
+
   const [chromosome, setChromosome] = useState<string>(
     element.input_chromosome || ""
   );
@@ -39,6 +40,8 @@ const TemplatedSequenceElementInput: React.FC<
 
   const [expanded, setExpanded] = useState<boolean>(!validated);
 
+  const [pendingResponse, setPendingResponse] = useState(false);
+
   useEffect(() => {
     if (inputComplete) {
       buildTemplatedSequenceElement();
@@ -64,6 +67,7 @@ const TemplatedSequenceElementInput: React.FC<
       ) {
         // TODO visible error handling
         setInputError("element validation unsuccessful");
+        setPendingResponse(false)
         return;
       } else if (templatedSequenceResponse.element) {
         setInputError("");
@@ -83,6 +87,7 @@ const TemplatedSequenceElementInput: React.FC<
           }
         });
       }
+      setPendingResponse(false)
     });
   };
 
@@ -162,6 +167,7 @@ const TemplatedSequenceElementInput: React.FC<
     inputElements,
     validated,
     icon,
+    pendingResponse
   });
 };
 

client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx

@@ -19,7 +19,7 @@ import {
 } from "../../../../../services/main";
 import { GeneAutocomplete } from "../../../../main/shared/GeneAutocomplete/GeneAutocomplete";
 import { StructuralElementInputProps } from "../StructuralElementInputProps";
-import CompInputAccordion from "../StructuralElementInputAccordion";
+import StructuralElementInputAccordion from "../StructuralElementInputAccordion";
 import { FusionContext } from "../../../../../global/contexts/FusionContext";
 import StrandSwitch from "../../../../main/shared/StrandSwitch/StrandSwitch";
 import HelpTooltip from "../../../../main/shared/HelpTooltip/HelpTooltip";
@@ -85,6 +85,8 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
   );
   const [endingExonOffsetText, setEndingExonOffsetText] = useState("");
 
+  const [pendingResponse, setPendingResponse] = useState(false);
+
   /*
   Depending on this element's location in the structure array, the user
   needs to provide some kind of coordinate input for either one or both ends
@@ -142,7 +144,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
     endingExon,
     startingExonOffset,
     endingExonOffset,
-    index,
+    index
   ]);
 
   const handleTxElementResponse = (
@@ -156,7 +158,6 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
       ...responseElement,
       ...inputParams,
     };
-
     if (!hasRequiredEnds) {
       finishedElement.nomenclature = "ERROR";
     } else {
@@ -170,6 +171,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
         }
       });
     }
+    setPendingResponse(false)
   };
 
   /**
@@ -226,6 +228,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
    * Request construction of tx segment element from server and handle response
    */
   const buildTranscriptSegmentElement = () => {
+    setPendingResponse(true)
     // fire constructor request
     switch (txInputType) {
       case InputType.gcg:
@@ -665,14 +668,15 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
     </>
   );
 
-  return CompInputAccordion({
+  return StructuralElementInputAccordion({
     expanded,
     setExpanded,
     element,
     handleDelete,
     inputElements,
     validated,
     icon,
+    pendingResponse
   });
 };