diff --git a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx b/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx index 2b684e0a..537b1a9e 100644 --- a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx +++ b/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx @@ -4,17 +4,23 @@ import { TranscriptSegmentElement, TxSegmentElementResponse, } from "../../../../../services/ResponseModels"; -import React, { useEffect, useState, KeyboardEvent, useContext } from "react"; +import React, { + useEffect, + useState, + KeyboardEvent, + useContext, + ChangeEvent, +} from "react"; import { getTxSegmentElementEC, getTxSegmentElementGC, getTxSegmentNomenclature, + TxElementInputType, } from "../../../../../services/main"; import { GeneAutocomplete } from "../../../../main/shared/GeneAutocomplete/GeneAutocomplete"; import { StructuralElementInputProps } from "../StructuralElementInputProps"; import StructuralElementInputAccordion from "../StructuralElementInputAccordion"; import { FusionContext } from "../../../../../global/contexts/FusionContext"; -import StrandSwitch from "../../../../main/shared/StrandSwitch/StrandSwitch"; import HelpTooltip from "../../../../main/shared/HelpTooltip/HelpTooltip"; import ChromosomeField from "../../../../main/shared/ChromosomeField/ChromosomeField"; import TranscriptField from "../../../../main/shared/TranscriptField/TranscriptField"; @@ -24,12 +30,6 @@ interface TxSegmentElementInputProps extends StructuralElementInputProps { element: ClientTranscriptSegmentElement; } -export enum InputType { - default = "default", - gc = "genomic_coords", - ec = "exon_coords", -} - const TxSegmentCompInput: React.FC = ({ element, index, @@ -39,8 +39,8 @@ const TxSegmentCompInput: React.FC = ({ }) => { const { fusion } = useContext(FusionContext); - const [txInputType, setTxInputType] = useState( - (element.inputType as InputType) || InputType.default + const [txInputType, setTxInputType] = useState( + (element.inputType as TxElementInputType) || TxElementInputType.default ); // "Text" variables refer to helper or warning text to set under input fields @@ -84,27 +84,17 @@ const TxSegmentCompInput: React.FC = ({ 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 - of the element. This can change as the user drags the element around the structure - array, or adds other elements to the array. - */ const hasRequiredEnds = - index !== 0 && index < fusion.length - ? (txStartingGenomic && txEndingGenomic) || (startingExon && endingExon) - : index === 0 - ? txEndingGenomic || endingExon - : txStartingGenomic || startingExon; + txEndingGenomic || endingExon || txStartingGenomic || startingExon; // programming horror const inputComplete = - (txInputType === InputType.gc && + (txInputType === TxElementInputType.gc && txGene !== "" && txChrom !== "" && selectedTranscript !== "" && (txStartingGenomic !== "" || txEndingGenomic !== "")) || - (txInputType === InputType.ec && + (txInputType === TxElementInputType.ec && txAc !== "" && (startingExon !== "" || endingExon !== "")); @@ -220,15 +210,14 @@ const TxSegmentCompInput: React.FC = ({ setPendingResponse(true); // fire constructor request switch (txInputType) { - case InputType.gc: + case TxElementInputType.gc: clearGenomicCoordWarnings(); getTxSegmentElementGC( txGene, txChrom, selectedTranscript, txStartingGenomic, - txEndingGenomic, - txStrand + txEndingGenomic ).then((txSegmentResponse) => { if ( txSegmentResponse.warnings && @@ -248,7 +237,7 @@ const TxSegmentCompInput: React.FC = ({ } }); break; - case InputType.ec: + case TxElementInputType.ec: getTxSegmentElementEC( txAc, startingExon as string, @@ -394,13 +383,17 @@ const TxSegmentCompInput: React.FC = ({ ); + const handleChromosomeChange = (e: ChangeEvent) => { + setTxChrom(e.target.value); + }; + const genomicCoordinateInfo = ( <> - - - - + {renderTxGenomicCoords()} @@ -408,7 +401,7 @@ const TxSegmentCompInput: React.FC = ({ const renderTxOptions = () => { switch (txInputType) { - case InputType.gc: + case TxElementInputType.gc: return ( @@ -445,7 +438,7 @@ const TxSegmentCompInput: React.FC = ({ {genomicCoordinateInfo} ); - case InputType.ec: + case TxElementInputType.ec: return ( {txInputField} @@ -582,7 +575,7 @@ const TxSegmentCompInput: React.FC = ({ * Wrapper around input type selection to ensure unused inputs/warnings get cleared * @param selection selection from input type dropdown menu */ - const selectInputType = (selection: InputType) => { + const selectInputType = (selection: TxElementInputType) => { if (txInputType !== "default") { if (selection === "exon_coords") { clearGenomicCoordWarnings(); @@ -618,7 +611,7 @@ const TxSegmentCompInput: React.FC = ({ labelId="select-input-data" value={txInputType} onChange={(event) => - selectInputType(event.target.value as InputType) + selectInputType(event.target.value as TxElementInputType) } > diff --git a/client/src/components/Pages/Summary/Main/Summary.tsx b/client/src/components/Pages/Summary/Main/Summary.tsx index f8e2a01e..14b0605e 100644 --- a/client/src/components/Pages/Summary/Main/Summary.tsx +++ b/client/src/components/Pages/Summary/Main/Summary.tsx @@ -162,8 +162,6 @@ export const Summary: React.FC = ({ setVisibleTab }) => { setFormattedFusion(formattedFusion); }, [fusion]); - console.log(formattedFusion); - return ( <> {(!validationErrors || validationErrors.length === 0) && diff --git a/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx b/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx index 03eb336e..b6af0c1b 100644 --- a/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx +++ b/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx @@ -12,14 +12,17 @@ import { InputLabel, FormControl, } from "@material-ui/core"; -import React, { useEffect, useState } from "react"; +import React, { ChangeEvent, useEffect, useState } from "react"; import { GeneAutocomplete } from "../../main/shared/GeneAutocomplete/GeneAutocomplete"; -import { getGenomicCoords, getExonCoords } from "../../../services/main"; +import { + getGenomicCoords, + getExonCoords, + TxElementInputType, +} from "../../../services/main"; import { CoordsUtilsResponse, GenomicTxSegService, } from "../../../services/ResponseModels"; -import StrandSwitch from "../../main/shared/StrandSwitch/StrandSwitch"; import TabHeader from "../../main/shared/TabHeader/TabHeader"; import TabPaper from "../../main/shared/TabPaper/TabPaper"; import { HelpPopover } from "../../main/shared/HelpPopover/HelpPopover"; @@ -63,15 +66,14 @@ const GetCoordinates: React.FC = () => { flexDirection: "row", alignItems: "center", }, - strandSwitchLabel: { - marginLeft: "0 !important", - }, coordsCard: { margin: "10px", }, })); const classes = useStyles(); - const [inputType, setInputType] = useState("default"); + const [inputType, setInputType] = useState( + TxElementInputType.default + ); const [txAc, setTxAc] = useState(""); const [txAcText, setTxAcText] = useState(""); @@ -275,21 +277,17 @@ const GetCoordinates: React.FC = () => { } }; + const handleChromosomeChange = (e: ChangeEvent) => { + setChromosome(e.target.value); + }; + const genomicCoordinateInfo = ( <> - - - - - - + ); @@ -404,9 +402,11 @@ const GetCoordinates: React.FC = () => {