diff --git a/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx b/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx index 5ceba851..7b34f4d7 100644 --- a/client/src/components/Pages/Structure/Input/GeneElementInput/GeneElementInput.tsx +++ b/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 = ({ const [geneText, setGeneText] = useState(""); const validated = gene !== "" && geneText == ""; const [expanded, setExpanded] = useState(!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 = ({ nomenclature: nomenclatureResponse.nomenclature, }; handleSave(index, clientGeneElement); + setPendingResponse(false) } } ); @@ -74,7 +77,7 @@ const GeneElementInput: React.FC = ({ /> ); - return ElementInputAccordion({ + return StructuralElementInputAccordion({ expanded, setExpanded, element, @@ -82,6 +85,7 @@ const GeneElementInput: React.FC = ({ inputElements, validated, icon, + pendingResponse }); }; diff --git a/client/src/components/Pages/Structure/Input/StaticElement/StaticElement.tsx b/client/src/components/Pages/Structure/Input/StaticElement/StaticElement.tsx index 9ff0d2b0..c97b963f 100644 --- a/client/src/components/Pages/Structure/Input/StaticElement/StaticElement.tsx +++ b/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 = ({ element, handleDelete, icon, }) => - CompInputAccordion({ + StructuralElementInputAccordion({ expanded: false, element, handleDelete, validated: true, icon, + pendingResponse: false }); export default StaticElement; diff --git a/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx b/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx index f47cc2ca..05b4fe92 100644 --- a/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx +++ b/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< : void; icon: JSX.Element; + pendingResponse?: boolean } export interface StructuralElementInputProps diff --git a/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx b/client/src/components/Pages/Structure/Input/TemplatedSequenceElementInput/TemplatedSequenceElementInput.tsx index c45e59f0..f7c60221 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, index, handleSave, handleDelete, icon }) => { + const [chromosome, setChromosome] = useState( element.input_chromosome || "" ); @@ -39,6 +40,8 @@ const TemplatedSequenceElementInput: React.FC< const [expanded, setExpanded] = useState(!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 }); }; diff --git a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx b/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx index 8845f9ee..f806ff8f 100644 --- a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx +++ b/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 = ({ ); 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 = ({ endingExon, startingExonOffset, endingExonOffset, - index, + index ]); const handleTxElementResponse = ( @@ -156,7 +158,6 @@ const TxSegmentCompInput: React.FC = ({ ...responseElement, ...inputParams, }; - if (!hasRequiredEnds) { finishedElement.nomenclature = "ERROR"; } else { @@ -170,6 +171,7 @@ const TxSegmentCompInput: React.FC = ({ } }); } + setPendingResponse(false) }; /** @@ -226,6 +228,7 @@ const TxSegmentCompInput: React.FC = ({ * Request construction of tx segment element from server and handle response */ const buildTranscriptSegmentElement = () => { + setPendingResponse(true) // fire constructor request switch (txInputType) { case InputType.gcg: @@ -665,7 +668,7 @@ const TxSegmentCompInput: React.FC = ({ ); - return CompInputAccordion({ + return StructuralElementInputAccordion({ expanded, setExpanded, element, @@ -673,6 +676,7 @@ const TxSegmentCompInput: React.FC = ({ inputElements, validated, icon, + pendingResponse }); };