Skip to content

Commit

Permalink
feat!: update tx segment element with updated cool-seq-tool structure…
Browse files Browse the repository at this point in the history 
… changes (#314)

* feat!: update tx segment element with updated cool-seq-tool structure changes

* fix: tx segment element bugs

* update response models

* feat: update variable names with cool-seq-tool updates

* feat: update calls to fusor and cool-seq-tool with updated params

* update fusor version

* updating fusor version

* wip: fixing tests from cool-seq-tool and fusor updates

* tests: updating tests with fusor changes

* fixing test examples and adding checks for correct start/end on sequence locations

* update reqs

* fix: bug where chromosome field was not editable

* removing editable field for now since it's not working as designed, will revisit at a later date

* changing validation for tx segment elemetn since they only require either a start or end now, regardless of position in the structure

* refactor: remove ability to change strand, since it's auto populated

* removing strand switch

* fix: ability to change strand for templated sequence

---------

Co-authored-by: Kori Kuzma <[email protected]>
  • Loading branch information
@katiestahl @korikuzma
katiestahl and korikuzma authored Aug 27, 2024
1 parent 94d6d6b commit 5ad0ec1
Show file tree
Hide file tree
Showing 16 changed files with 335 additions and 285 deletions.
71 changes: 32 additions & 39 deletions client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,24 @@ import {
TranscriptSegmentElement,
TxSegmentElementResponse,
} from "../../../../../services/ResponseModels";
import React, { useEffect, useState, KeyboardEvent, useContext } from "react";
import React, {
useEffect,
useState,
KeyboardEvent,
useContext,
ChangeEvent,
} from "react";
import {
getTxSegmentElementECT,
getTxSegmentElementGCG,
getTxSegmentElementGCT,
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";
Expand All @@ -30,13 +36,6 @@ interface TxSegmentElementInputProps extends StructuralElementInputProps {
element: ClientTranscriptSegmentElement;
}

export enum InputType {
default = "default",
gcg = "genomic_coords_gene",
gct = "genomic_coords_tx",
ect = "exon_coords_tx",
}

const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
element,
index,
Expand All @@ -46,8 +45,8 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
}) => {
const { fusion } = useContext(FusionContext);

const [txInputType, setTxInputType] = useState<InputType>(
(element.inputType as InputType) || InputType.default
const [txInputType, setTxInputType] = useState<TxElementInputType>(
(element.inputType as TxElementInputType) || TxElementInputType.default
);

// "Text" variables refer to helper or warning text to set under input fields
Expand Down Expand Up @@ -89,30 +88,20 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({

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.gcg &&
(txInputType === TxElementInputType.gcg &&
txGene !== "" &&
txChrom !== "" &&
(txStartingGenomic !== "" || txEndingGenomic !== "")) ||
(txInputType === InputType.gct &&
(txInputType === TxElementInputType.gct &&
txAc !== "" &&
txChrom !== "" &&
(txStartingGenomic !== "" || txEndingGenomic !== "")) ||
(txInputType === InputType.ect &&
(txInputType === TxElementInputType.ect &&
txAc !== "" &&
(startingExon !== "" || endingExon !== ""));

Expand Down Expand Up @@ -233,7 +222,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
setPendingResponse(true);
// fire constructor request
switch (txInputType) {
case InputType.gcg:
case TxElementInputType.gcg:
clearGenomicCoordWarnings();
getTxSegmentElementGCG(
txGene,
Expand Down Expand Up @@ -261,14 +250,13 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
}
});
break;
case InputType.gct:
case TxElementInputType.gct:
clearGenomicCoordWarnings();
getTxSegmentElementGCT(
txAc,
txChrom,
txStartingGenomic,
txEndingGenomic,
txStrand
txEndingGenomic
).then((txSegmentResponse) => {
if (
txSegmentResponse.warnings &&
Expand All @@ -290,7 +278,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
}
});
break;
case InputType.ect:
case TxElementInputType.ect:
getTxSegmentElementECT(
txAc,
startingExon as string,
Expand Down Expand Up @@ -436,21 +424,26 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
</Box>
);

const handleChromosomeChange = (e: ChangeEvent<HTMLInputElement>) => {
setTxChrom(e.target.value);
};

const genomicCoordinateInfo = (
<>
<Box className="mid-inputs">
<ChromosomeField fieldValue={txChrom} errorText={txChromText} />
<Box mt="18px" width="125px">
<StrandSwitch setStrand={setTxStrand} selectedStrand={txStrand} />
</Box>
<ChromosomeField
fieldValue={txChrom}
errorText={txChromText}
onChange={handleChromosomeChange}
/>
</Box>
<Box className="bottom-inputs">{renderTxGenomicCoords()}</Box>
</>
);

const renderTxOptions = () => {
switch (txInputType) {
case InputType.gcg:
case TxElementInputType.gcg:
return (
<Box>
<Box className="mid-inputs" minWidth="255px">
Expand All @@ -467,14 +460,14 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
{genomicCoordinateInfo}
</Box>
);
case InputType.gct:
case TxElementInputType.gct:
return (
<Box>
{txInputField}
{genomicCoordinateInfo}
</Box>
);
case InputType.ect:
case TxElementInputType.ect:
return (
<Box>
{txInputField}
Expand Down Expand Up @@ -611,7 +604,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
* 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_tx") {
clearGenomicCoordWarnings();
Expand Down Expand Up @@ -644,7 +637,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
<Select
value={txInputType}
onChange={(event) =>
selectInputType(event.target.value as InputType)
selectInputType(event.target.value as TxElementInputType)
}
>
<MenuItem value="default" disabled>
Expand Down
2 changes: 0 additions & 2 deletions client/src/components/Pages/Summary/Main/Summary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,6 @@ export const Summary: React.FC<Props> = ({ setVisibleTab }) => {
setFormattedFusion(formattedFusion);
}, [fusion]);

console.log(formattedFusion);

return (
<>
{(!validationErrors || validationErrors.length === 0) &&
Expand Down
89 changes: 49 additions & 40 deletions client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,17 @@ import {
Box,
Link,
} 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,
GenomicData,
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";
Expand Down Expand Up @@ -60,15 +63,14 @@ const GetCoordinates: React.FC = () => {
flexDirection: "row",
alignItems: "center",
},
strandSwitchLabel: {
marginLeft: "0 !important",
},
coordsCard: {
margin: "10px",
},
}));
const classes = useStyles();
const [inputType, setInputType] = useState<string>("default");
const [inputType, setInputType] = useState<TxElementInputType>(
TxElementInputType.default
);

const [txAc, setTxAc] = useState<string>("");
const [txAcText, setTxAcText] = useState("");
Expand All @@ -93,7 +95,7 @@ const GetCoordinates: React.FC = () => {
const [exonStartOffset, setExonStartOffset] = useState<string>("");
const [exonEndOffset, setExonEndOffset] = useState<string>("");

const [results, setResults] = useState<GenomicData | null>(null);
const [results, setResults] = useState<GenomicTxSegService | null>(null);
const [error, setError] = useState<string>("");

// programming horror
Expand Down Expand Up @@ -178,7 +180,7 @@ const GetCoordinates: React.FC = () => {
});
} else {
clearWarnings();
setResults(coordsResponse.coordinates_data as GenomicData);
setResults(coordsResponse.coordinates_data as GenomicTxSegService);
}
};

Expand All @@ -193,12 +195,12 @@ const GetCoordinates: React.FC = () => {
exonEndOffset
).then((coordsResponse) => handleResponse(coordsResponse));
} else if (inputType == "genomic_coords_gene") {
getExonCoords(chromosome, start, end, strand, gene).then(
(coordsResponse) => handleResponse(coordsResponse)
getExonCoords(chromosome, start, end, gene).then((coordsResponse) =>
handleResponse(coordsResponse)
);
} else if (inputType == "genomic_coords_tx") {
getExonCoords(chromosome, start, end, strand, "", txAc).then(
(coordsResponse) => handleResponse(coordsResponse)
getExonCoords(chromosome, start, end, "", txAc).then((coordsResponse) =>
handleResponse(coordsResponse)
);
}
};
Expand All @@ -215,25 +217,38 @@ const GetCoordinates: React.FC = () => {
const renderResults = (): React.ReactFragment => {
if (inputValid) {
if (results) {
const txSegStart = results.seg_start;
const txSegEnd = results.seg_end;

const genomicStart =
txSegStart?.genomic_location.start ||
txSegStart?.genomic_location.end;
const genomicEnd =
txSegEnd?.genomic_location.start || txSegEnd?.genomic_location.end;

return (
<Table>
{renderRow("Gene", results.gene)}
{renderRow("Chromosome", results.chr)}
{results.start ? renderRow("Genomic start", results.start) : null}
{results.end ? renderRow("Genomic end", results.end) : null}
{renderRow("Chromosome", results.genomic_ac)}
{genomicStart != null
? renderRow("Genomic start", genomicStart)
: null}
{genomicEnd != null ? renderRow("Genomic end", genomicEnd) : null}
{results.strand
? renderRow("Strand", results.strand === 1 ? "+" : "-")
: null}
{renderRow("Transcript", results.transcript)}
{results.exon_start
? renderRow("Exon start", results.exon_start)
{renderRow("Transcript", results.tx_ac)}
{txSegStart?.exon_ord != null
? renderRow("Exon start", txSegStart.exon_ord)
: null}
{txSegStart?.offset != null
? renderRow("Exon start offset", txSegStart.offset)
: null}
{results.exon_start_offset
? renderRow("Exon start offset", results.exon_start_offset)
{txSegEnd?.exon_ord != null
? renderRow("Exon end", txSegEnd.exon_ord)
: null}
{results.exon_end ? renderRow("Exon end", results.exon_end) : null}
{results.exon_end_offset
? renderRow("Exon end offset", results.exon_end_offset)
{txSegEnd?.offset != null
? renderRow("Exon end offset", txSegEnd.offset)
: null}
</Table>
);
Expand All @@ -247,24 +262,18 @@ const GetCoordinates: React.FC = () => {
}
};

const handleChromosomeChange = (e: ChangeEvent<HTMLInputElement>) => {
setChromosome(e.target.value);
};

const genomicCoordinateInfo = (
<>
<Box display="flex" justifyContent="space-between" width="100%">
<ChromosomeField
fieldValue={chromosome}
errorText={chromosomeText}
onChange={handleChromosomeChange}
/>
<Box mt="18px">
<Box className={classes.strand} width="125px">
<StrandSwitch
setStrand={setStrand}
selectedStrand={strand}
switchClasses={{
labelPlacementStart: classes.strandSwitchLabel,
}}
/>
</Box>
</Box>
</Box>
</>
);
Expand Down Expand Up @@ -391,16 +400,16 @@ const GetCoordinates: React.FC = () => {
value={inputType}
onChange={(event) => setInputType(event.target.value as string)}
>
<MenuItem value="default" disabled>
<MenuItem value={TxElementInputType.default} disabled>
Select input data
</MenuItem>
<MenuItem value="genomic_coords_gene">
<MenuItem value={TxElementInputType.gcg}>
Genomic coordinates, gene
</MenuItem>
<MenuItem value="genomic_coords_tx">
<MenuItem value={TxElementInputType.gct}>
Genomic coordinates, transcript
</MenuItem>
<MenuItem value="exon_coords_tx">
<MenuItem value={TxElementInputType.ect}>
Exon coordinates, transcript
</MenuItem>
</Select>
Expand Down
Loading

0 comments on commit 5ad0ec1

Please sign in to comment.