feat: tx lookup

cancervariants · Sep 5, 2024 · 541ff57 · 541ff57
1 parent dbcb8f3
commit 541ff57
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 45 deletions.
diff --git a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx b/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx
@@ -14,6 +14,7 @@ import {
 } from "../../../../../services/ResponseModels";
 import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
 import {
+  GenomicInputType,
   getTxSegmentElementEC,
   getTxSegmentElementGC,
   getTxSegmentNomenclature,
@@ -30,11 +31,6 @@ interface TxSegmentElementInputProps extends StructuralElementInputProps {
   element: ClientTranscriptSegmentElement;
 }
 
-enum GenomicInputType {
-  GENE = "gene",
-  TRANSCRIPT = "transcript",
-}
-
 const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
   element,
   index,
@@ -416,11 +412,11 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
   );
 
   const renderTxOptions = () => {
-    if (!genomicInputType) {
-      return <></>;
-    }
     switch (txInputType) {
       case TxElementInputType.gc:
+        if (!genomicInputType) {
+          return <></>;
+        }
         return (
           <Box>
             <Box className="mid-inputs" minWidth="325px">

diff --git a/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx b/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx
@@ -18,6 +18,7 @@ import {
   getGenomicCoords,
   getExonCoords,
   TxElementInputType,
+  GenomicInputType,
 } from "../../../services/main";
 import {
   CoordsUtilsResponse,
@@ -74,6 +75,8 @@ const GetCoordinates: React.FC = () => {
   const [inputType, setInputType] = useState<TxElementInputType>(
     TxElementInputType.default
   );
+  const [genomicInputType, setGenomicInputType] =
+    useState<GenomicInputType | null>(null);
 
   const [txAc, setTxAc] = useState<string>("");
   const [txAcText, setTxAcText] = useState("");
@@ -277,6 +280,14 @@ const GetCoordinates: React.FC = () => {
     }
   };
 
+  const txInputField = (
+    <TranscriptField
+      fieldValue={txAc}
+      valueSetter={setTxAc}
+      errorText={txAcText}
+    />
+  );
+
   const handleChromosomeChange = (e: ChangeEvent<HTMLInputElement>) => {
     setChromosome(e.target.value);
   };
@@ -294,38 +305,49 @@ const GetCoordinates: React.FC = () => {
 
   const renderInputOptions = () => {
     switch (inputType) {
-      case "genomic_coords":
+      case TxElementInputType.gc:
+        if (!genomicInputType) {
+          return <></>;
+        }
         return (
           <>
             <Box className={classes.fieldsPair}>
-              <GeneAutocomplete
-                gene={gene}
-                setGene={setGene}
-                geneText={geneText}
-                setGeneText={setGeneText}
-                setChromosome={setChromosome}
-                setStrand={setStrand}
-                setTranscripts={setGeneTranscripts}
-                setDefaultTranscript={setSelectedTranscript}
-              />
-              <FormControl>
-                <InputLabel>Transcript</InputLabel>
-                <Select
-                  labelId="transcript-select-label"
-                  id="transcript-select"
-                  value={selectedTranscript}
-                  label="Transcript"
-                  onChange={handleTranscriptSelect}
-                  placeholder="Transcript"
-                  style={{ minWidth: "150px" }}
-                >
-                  {geneTranscripts.map((tx, index) => (
-                    <MenuItem key={index} value={tx}>
-                      {tx}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
+              {genomicInputType === GenomicInputType.GENE ? (
+                <>
+                  <GeneAutocomplete
+                    gene={gene}
+                    setGene={setGene}
+                    geneText={geneText}
+                    setGeneText={setGeneText}
+                    setChromosome={setChromosome}
+                    setStrand={setStrand}
+                    setTranscripts={setGeneTranscripts}
+                    setDefaultTranscript={setSelectedTranscript}
+                  />
+                  <FormControl>
+                    <InputLabel>Transcript</InputLabel>
+                    <Select
+                      labelId="transcript-select-label"
+                      id="transcript-select"
+                      value={selectedTranscript}
+                      label="Transcript"
+                      onChange={handleTranscriptSelect}
+                      placeholder="Transcript"
+                      style={{ minWidth: "150px" }}
+                    >
+                      {geneTranscripts.map((tx, index) => (
+                        <MenuItem key={index} value={tx}>
+                          {tx}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </>
+              ) : (
+                <>
+                  <Box>{txInputField}</Box>
+                </>
+              )}
             </Box>
             {genomicCoordinateInfo}
             <Box className={classes.fieldsPair}>
@@ -345,16 +367,10 @@ const GetCoordinates: React.FC = () => {
             </Box>
           </>
         );
-      case "exon_coords":
+      case TxElementInputType.ec:
         return (
           <>
-            <Box>
-              <TranscriptField
-                fieldValue={txAc}
-                valueSetter={setTxAc}
-                errorText={txAcText}
-              />
-            </Box>
+            <Box>{txInputField}</Box>
             <Box className={classes.fieldsPair}>
               <TextField
                 margin="dense"
@@ -412,6 +428,25 @@ const GetCoordinates: React.FC = () => {
             <MenuItem value="genomic_coords">Genomic coordinates</MenuItem>
             <MenuItem value="exon_coords">Exon coordinates</MenuItem>
           </Select>
+          {inputType === TxElementInputType.gc ? (
+            <FormControl fullWidth style={{ marginTop: "10px" }}>
+              <InputLabel id="genomic-input-type">
+                Gene or Transcript?
+              </InputLabel>
+              <Select
+                labelId="genomic-input-type"
+                value={genomicInputType}
+                onChange={(event) =>
+                  setGenomicInputType(event.target.value as GenomicInputType)
+                }
+              >
+                <MenuItem value="gene">Gene</MenuItem>
+                <MenuItem value="transcript">Transcript</MenuItem>
+              </Select>
+            </FormControl>
+          ) : (
+            <></>
+          )}
         </Box>
       </Box>
       <Box className={classes.inputParams}>{renderInputOptions()}</Box>

diff --git a/client/src/services/main.tsx b/client/src/services/main.tsx
@@ -55,6 +55,11 @@ export enum TxElementInputType {
   ec = "exon_coords",
 }
 
+export enum GenomicInputType {
+  GENE = "gene",
+  TRANSCRIPT = "transcript",
+}
+
 export type ClientElementUnion =
   | ClientMultiplePossibleGenesElement
   | ClientRegulatoryElement