Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 19 commits into from
Aug 27, 2024
Merged

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

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
fa8c93c
feat!: update tx segment element with updated cool-seq-tool structure…
katiestahl Aug 12, 2024
9a6281d
fix: tx segment element bugs
katiestahl Aug 12, 2024
fbe0a83
update response models
katiestahl Aug 12, 2024
b2c6787
feat: update variable names with cool-seq-tool updates
katiestahl Aug 20, 2024
053843e
feat: update calls to fusor and cool-seq-tool with updated params
katiestahl Aug 21, 2024
f314306
Merge branch 'staging' into cool-seq-tool-tx-updates
katiestahl Aug 21, 2024
b58a5b7
update fusor version
katiestahl Aug 21, 2024
726d7e6
updating fusor version
katiestahl Aug 22, 2024
6c672bd
wip: fixing tests from cool-seq-tool and fusor updates
katiestahl Aug 22, 2024
d56bff0
tests: updating tests with fusor changes
katiestahl Aug 22, 2024
7191723
fixing test examples and adding checks for correct start/end on seque…
katiestahl Aug 22, 2024
09e10bd
update reqs
korikuzma Aug 23, 2024
7f56752
fix: bug where chromosome field was not editable
katiestahl Aug 23, 2024
f26dd9f
Merge branch 'cool-seq-tool-tx-updates' of https://github.com/cancerv…
katiestahl Aug 23, 2024
a8833e4
removing editable field for now since it's not working as designed, w…
katiestahl Aug 23, 2024
c3d093c
changing validation for tx segment elemetn since they only require ei…
katiestahl Aug 23, 2024
b611f84
refactor: remove ability to change strand, since it's auto populated
katiestahl Aug 26, 2024
e5545eb
removing strand switch
katiestahl Aug 27, 2024
09183e1
fix: ability to change strand for templated sequence
katiestahl Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 32 additions & 35 deletions client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,19 @@ 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";
Expand All @@ -30,13 +37,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 +46,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 +89,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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please double check me on this change! From my understanding, based on the sequence location changes, a Tx segment element only requires either a start/end, regardless of position (it looks like previously, it had to have both unless it was the first item?)

Copy link
Contributor

@jarbesfeld jarbesfeld Aug 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes only one of start/end is required to create a TranscriptSegmentElement


// 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 +223,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 +251,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 +279,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
}
});
break;
case InputType.ect:
case TxElementInputType.ect:
getTxSegmentElementECT(
txAc,
startingExon as string,
Expand Down Expand Up @@ -436,10 +425,18 @@ 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} />
<ChromosomeField
fieldValue={txChrom}
errorText={txChromText}
onChange={handleChromosomeChange}
/>
<Box mt="18px" width="125px">
<StrandSwitch setStrand={setTxStrand} selectedStrand={txStrand} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strand can be removed from transcript segment element. Maybe templated sequence too (not sure how this one works)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll remove the ability to change it for tx element. I think it might be fine to leave in the UI as a helpful visual tool to the user, though. what are your thoughts on that?

It looks like we still require the user to put in the strand for Templated Sequence, though. That element is pretty much entirely user-made, whereas tx makes a request to cool-seq-tool. If this is something cool-seq-tool can do now, we should def make a new issue for it!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pushed a commit where the ability to change it is removed, but it'll still show the strand to the user! I can also just remove it altogether- I just wasn't sure if it was a helpful visual aid or not

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@katiestahl so it makes sense for transcript segment element when Genomic coordinates, gene is selected as input data since strand is automatically generated. However, Genomic coordinates, transcript does not change the strand. For example, NC_000011.10 and NM_003390.3 should change strand to positive, but it stays negative

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@korikuzma is it okay if I create a new ticket for that? This is not something that was working or implemented like this before, so I think it's outside of the scope of this ticket. I'll create a new issue though

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we hide the strand for now so it's not confusing and back back in #321

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep!

</Box>
Expand All @@ -450,7 +447,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({

const renderTxOptions = () => {
switch (txInputType) {
case InputType.gcg:
case TxElementInputType.gcg:
return (
<Box>
<Box className="mid-inputs" minWidth="255px">
Expand All @@ -467,14 +464,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 +608,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 +641,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
Open in desktop
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
74 changes: 49 additions & 25 deletions client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,16 @@ 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";
Expand Down Expand Up @@ -68,7 +72,9 @@ const GetCoordinates: React.FC = () => {
},
}));
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 +99,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 +184,7 @@ const GetCoordinates: React.FC = () => {
});
} else {
clearWarnings();
setResults(coordsResponse.coordinates_data as GenomicData);
setResults(coordsResponse.coordinates_data as GenomicTxSegService);
}
};

Expand All @@ -193,12 +199,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 +221,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,12 +266,17 @@ 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">
Expand Down Expand Up @@ -391,16 +415,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
7 changes: 5 additions & 2 deletions client/src/components/main/shared/ChromosomeField/ChromosomeField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { makeStyles, TextField, Typography } from "@material-ui/core";
import React, { KeyboardEventHandler } from "react";
import React, { ChangeEvent } from "react";
import HelpTooltip from "../HelpTooltip/HelpTooltip";

interface Props {
fieldValue: string;
errorText: string;
width?: number | undefined;
editable?: boolean;
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
}

const ChromosomeField: React.FC<Props> = ({
fieldValue,
errorText,
width,
onChange,
}) => {
const useStyles = makeStyles(() => ({
textField: {
Expand Down Expand Up @@ -41,7 +44,7 @@ const ChromosomeField: React.FC<Props> = ({
error={errorText != ""}
label="Chromosome"
helperText={errorText != "" ? errorText : null}
contentEditable={false}
onChange={onChange}
className={classes.textField}
/>
</HelpTooltip>
Expand Down
Loading