feat: transcript lookup

cancervariants · Sep 4, 2024 · dbcb8f3 · dbcb8f3
1 parent 24e5a81
commit dbcb8f3
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 82 deletions.
diff --git a/client/src/components/Pages/Structure/Input/StaticElement/StaticElement.tsx b/client/src/components/Pages/Structure/Input/StaticElement/StaticElement.tsx
@@ -12,7 +12,7 @@ const StaticElement: React.FC<BaseStructuralElementProps> = ({
     handleDelete,
     validated: true,
     icon,
-    pendingResponse: false
+    pendingResponse: false,
   });
 
 export default StaticElement;
diff --git a/client/src/components/Pages/Structure/Input/StructuralElementInputProps.tsx b/client/src/components/Pages/Structure/Input/StructuralElementInputProps.tsx
@@ -4,7 +4,7 @@ export interface BaseStructuralElementProps {
   element: ClientElementUnion;
   handleDelete?: (id?: string) => void;
   icon: JSX.Element;
-  pendingResponse?: boolean
+  pendingResponse?: boolean;
 }
 
 export interface StructuralElementInputProps

diff --git a/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx b/client/src/components/Pages/Structure/Input/TxSegmentElementInput/TxSegmentElementInput.tsx
@@ -1,16 +1,18 @@
-import { TextField, MenuItem, Typography } from "@material-ui/core";
+import {
+  TextField,
+  MenuItem,
+  Typography,
+  Box,
+  FormControl,
+  InputLabel,
+  Select,
+} from "@material-ui/core";
 import {
   ClientTranscriptSegmentElement,
   TranscriptSegmentElement,
   TxSegmentElementResponse,
 } from "../../../../../services/ResponseModels";
-import React, {
-  useEffect,
-  useState,
-  KeyboardEvent,
-  useContext,
-  ChangeEvent,
-} from "react";
+import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
 import {
   getTxSegmentElementEC,
   getTxSegmentElementGC,
@@ -20,29 +22,39 @@ import {
 import { GeneAutocomplete } from "../../../../main/shared/GeneAutocomplete/GeneAutocomplete";
 import { StructuralElementInputProps } from "../StructuralElementInputProps";
 import StructuralElementInputAccordion from "../StructuralElementInputAccordion";
-import { FusionContext } from "../../../../../global/contexts/FusionContext";
 import HelpTooltip from "../../../../main/shared/HelpTooltip/HelpTooltip";
 import ChromosomeField from "../../../../main/shared/ChromosomeField/ChromosomeField";
 import TranscriptField from "../../../../main/shared/TranscriptField/TranscriptField";
-import { Box, FormControl, InputLabel, Select } from "@mui/material";
 
 interface TxSegmentElementInputProps extends StructuralElementInputProps {
   element: ClientTranscriptSegmentElement;
 }
 
+enum GenomicInputType {
+  GENE = "gene",
+  TRANSCRIPT = "transcript",
+}
+
 const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
   element,
   index,
   handleSave,
   handleDelete,
   icon,
 }) => {
-  const { fusion } = useContext(FusionContext);
-
   const [txInputType, setTxInputType] = useState<TxElementInputType>(
     (element.inputType as TxElementInputType) || TxElementInputType.default
   );
 
+  const [genomicInputType, setGenomicInputType] =
+    useState<GenomicInputType | null>(
+      element.inputGene
+        ? GenomicInputType.GENE
+        : element.inputTx
+        ? GenomicInputType.TRANSCRIPT
+        : null
+    );
+
   // "Text" variables refer to helper or warning text to set under input fields
   // TODO: this needs refactored so badly
   const [txAc, setTxAc] = useState(element.inputTx || "");
@@ -80,19 +92,25 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
   const [endingExonOffsetText, setEndingExonOffsetText] = useState("");
 
   const [geneTranscripts, setGeneTranscripts] = useState([]);
-  const [selectedTranscript, setSelectedTranscript] = useState("");
+  const [selectedTranscript, setSelectedTranscript] = useState(
+    element.inputTx || ""
+  );
 
   const [pendingResponse, setPendingResponse] = useState(false);
 
   const hasRequiredEnds =
     txEndingGenomic || endingExon || txStartingGenomic || startingExon;
 
+  const genomicInputComplete =
+    genomicInputType === GenomicInputType.GENE
+      ? txGene !== "" && selectedTranscript !== ""
+      : txAc !== "";
+
   // programming horror
   const inputComplete =
     (txInputType === TxElementInputType.gc &&
-      txGene !== "" &&
+      genomicInputComplete &&
       txChrom !== "" &&
-      selectedTranscript !== "" &&
       (txStartingGenomic !== "" || txEndingGenomic !== "")) ||
     (txInputType === TxElementInputType.ec &&
       txAc !== "" &&
@@ -201,8 +219,6 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
     setEndingExonOffsetText("");
   };
 
-  console.log(pendingResponse);
-
   /**
    * Request construction of tx segment element from server and handle response
    */
@@ -400,40 +416,53 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
   );
 
   const renderTxOptions = () => {
+    if (!genomicInputType) {
+      return <></>;
+    }
     switch (txInputType) {
       case TxElementInputType.gc:
         return (
           <Box>
             <Box className="mid-inputs" minWidth="325px">
-              <GeneAutocomplete
-                gene={txGene}
-                setGene={setTxGene}
-                tooltipDirection="bottom"
-                geneText={txGeneText}
-                setGeneText={setTxGeneText}
-                setChromosome={setTxChrom}
-                setStrand={setTxStrand}
-                setTranscripts={setGeneTranscripts}
-                setDefaultTranscript={setSelectedTranscript}
-              />
-              <FormControl variant="standard">
-                <InputLabel id="transcript-select-label">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={txGene}
+                    setGene={setTxGene}
+                    tooltipDirection="bottom"
+                    geneText={txGeneText}
+                    setGeneText={setTxGeneText}
+                    setChromosome={setTxChrom}
+                    setStrand={setTxStrand}
+                    setTranscripts={setGeneTranscripts}
+                    setDefaultTranscript={setSelectedTranscript}
+                  />
+                  <FormControl variant="standard">
+                    <InputLabel id="transcript-select-label">
+                      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>
@@ -606,9 +635,10 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
           }
         >
           <FormControl variant="standard">
-            <InputLabel id="select-input-data"></InputLabel>
+            <InputLabel id="select-input-data">Select input data</InputLabel>
             <Select
               labelId="select-input-data"
+              label="Select input data"
               value={txInputType}
               onChange={(event) =>
                 selectInputType(event.target.value as TxElementInputType)
@@ -618,10 +648,27 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
                 Select input data
               </MenuItem>
               <MenuItem value="genomic_coords">Genomic coordinates</MenuItem>
-              <MenuItem value="exon_coords">
-                Exon coordinates, transcript
-              </MenuItem>
+              <MenuItem value="exon_coords">Exon coordinates</MenuItem>
             </Select>
+            {txInputType === 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>
+            ) : (
+              <></>
+            )}
           </FormControl>
         </HelpTooltip>
       </Box>

diff --git a/client/src/components/Utilities/GetSequence/GetSequence.tsx b/client/src/components/Utilities/GetSequence/GetSequence.tsx
@@ -189,7 +189,9 @@ const GetSequenceIds: React.FC = () => {
     </Box>
   );
 
-  const renderedIdInfo = isLoading ? (<LoadingMessage />) : (
+  const renderedIdInfo = isLoading ? (
+    <LoadingMessage />
+  ) : (
     <Box className={classes.sequenceIdResult}>
       <Box className={classes.idsContainer}>
         <Box>

diff --git a/client/src/components/Utilities/GetTranscripts/GetTranscripts.tsx b/client/src/components/Utilities/GetTranscripts/GetTranscripts.tsx
@@ -123,7 +123,7 @@ export const GetTranscripts: React.FC = () => {
 
   const renderTranscripts = () => {
     if (isLoading) {
-      return (<LoadingMessage message="Fetching transcripts..."/>)
+      return <LoadingMessage message="Fetching transcripts..." />;
     }
     if (transcriptWarnings.length > 0) {
       // TODO more error handling here

diff --git a/client/src/components/main/shared/GeneAutocomplete/GeneAutocomplete.tsx b/client/src/components/main/shared/GeneAutocomplete/GeneAutocomplete.tsx
@@ -3,8 +3,16 @@ import { TextField, Typography, makeStyles } from "@material-ui/core";
 import Autocomplete, {
   AutocompleteRenderGroupParams,
 } from "@material-ui/lab/Autocomplete";
-import { getGeneSuggestions, getTranscripts, getTranscriptsForGene } from "../../../../services/main";
-import { GetGeneTranscriptsResponse, GetTranscriptsResponse, SuggestGeneResponse } from "../../../../services/ResponseModels";
+import {
+  getGeneSuggestions,
+  getTranscripts,
+  getTranscriptsForGene,
+} from "../../../../services/main";
+import {
+  GetGeneTranscriptsResponse,
+  GetTranscriptsResponse,
+  SuggestGeneResponse,
+} from "../../../../services/ResponseModels";
 import HelpTooltip from "../HelpTooltip/HelpTooltip";
 import { useColorTheme } from "../../../../global/contexts/Theme/ColorThemeContext";
 
@@ -27,7 +35,7 @@ const defaultGeneOption: SuggestedGeneOption = {
   value: "",
   type: GeneSuggestionType.none,
   chromosome: "",
-  strand: ""
+  strand: "",
 };
 
 interface Props {
@@ -96,32 +104,41 @@ export const GeneAutocomplete: React.FC<Props> = ({
     setGeneValue(selection);
     if (setChromosome) {
       // substring is to remove identifier from beginning of chromosome (ex: result in NC_000007.14 instead of NCBI:NC_000007.14)
-      setChromosome(selection.chromosome?.substring(selection.chromosome.indexOf(":") + 1));
+      setChromosome(
+        selection.chromosome?.substring(selection.chromosome.indexOf(":") + 1)
+      );
     }
     if (setStrand) {
       setStrand(selection.strand);
     }
     if (setTranscripts) {
       // if user is pressing the X button to clear the autocomplete input, set tx info to default
       if (selection === defaultGeneOption) {
-        setTranscripts([])
+        setTranscripts([]);
         if (setDefaultTranscript) {
-          setDefaultTranscript("")
+          setDefaultTranscript("");
         }
         return;
       }
-      getTranscriptsForGene(selection.value).then((transcriptsResponse: GetGeneTranscriptsResponse) => {
-        const transcripts = transcriptsResponse.transcripts
-        const sortedTranscripts = transcripts.sort((a, b) => a.localeCompare(b))
-        setTranscripts(sortedTranscripts);
-        if (setDefaultTranscript) {
-          // get preferred default transcript from MANE endpoint
-          getTranscripts(selection.value).then((transcriptsResponse: GetTranscriptsResponse) => {
-            const preferredTx = transcriptsResponse?.transcripts?.[0].RefSeq_nuc
-            setDefaultTranscript(preferredTx || transcripts[0])
-          });
+      getTranscriptsForGene(selection.value).then(
+        (transcriptsResponse: GetGeneTranscriptsResponse) => {
+          const transcripts = transcriptsResponse.transcripts;
+          const sortedTranscripts = transcripts.sort((a, b) =>
+            a.localeCompare(b)
+          );
+          setTranscripts(sortedTranscripts);
+          if (setDefaultTranscript) {
+            // get preferred default transcript from MANE endpoint
+            getTranscripts(selection.value).then(
+              (transcriptsResponse: GetTranscriptsResponse) => {
+                const preferredTx =
+                  transcriptsResponse?.transcripts?.[0].RefSeq_nuc;
+                setDefaultTranscript(preferredTx || transcripts[0]);
+              }
+            );
+          }
         }
-      });
+      );
     }
   };
 
@@ -130,7 +147,7 @@ export const GeneAutocomplete: React.FC<Props> = ({
     if (inputValue.value === "") {
       setGeneText("");
       setGeneOptions([]);
-      updateSelection(defaultGeneOption)
+      updateSelection(defaultGeneOption);
       setLoading(false);
     } else {
       setLoading(true);

diff --git a/client/src/components/main/shared/LoadingMessage/LoadingMessage.tsx b/client/src/components/main/shared/LoadingMessage/LoadingMessage.tsx
@@ -8,11 +8,17 @@ interface LoadingMessageProps {
 export default function StrandSwitch(
   props: LoadingMessageProps
 ): React.ReactElement {
-  const loadingMessage = props?.message ? props.message : "Loading..."
+  const loadingMessage = props?.message ? props.message : "Loading...";
   return (
-    <Box alignContent="center" alignItems="center" justifyContent="center" display="flex" flexDirection="column">
+    <Box
+      alignContent="center"
+      alignItems="center"
+      justifyContent="center"
+      display="flex"
+      flexDirection="column"
+    >
       <Box mb={2}>{loadingMessage}</Box>
-        <CircularProgress />
+      <CircularProgress />
     </Box>
   );
 }