merging changes from staging

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<TxSegmentElementInputProps> = ({
   element,
   index,
@@ -39,8 +39,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
@@ -84,27 +84,17 @@ 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.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<TxSegmentElementInputProps> = ({
     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<TxSegmentElementInputProps> = ({
           }
         });
         break;
-      case InputType.ec:
+      case TxElementInputType.ec:
         getTxSegmentElementEC(
           txAc,
           startingExon as string,
@@ -394,21 +383,25 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
     </Box>
   );
 
+  const handleChromosomeChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setTxChrom(e.target.value);
+  };
+
   const genomicCoordinateInfo = (
     <>
       <Box className="mid-inputs">
-        <ChromosomeField fieldValue={txChrom} />
-        <Box mt="18px" width="125px">
-          <StrandSwitch setStrand={setTxStrand} selectedStrand={txStrand} />
-        </Box>
+        <ChromosomeField
+          fieldValue={txChrom}
+          onChange={handleChromosomeChange}
+        />
       </Box>
       <Box className="bottom-inputs">{renderTxGenomicCoords()}</Box>
     </>
   );
 
   const renderTxOptions = () => {
     switch (txInputType) {
-      case InputType.gc:
+      case TxElementInputType.gc:
         return (
           <Box>
             <Box className="mid-inputs" minWidth="325px">
@@ -445,7 +438,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
             {genomicCoordinateInfo}
           </Box>
         );
-      case InputType.ec:
+      case TxElementInputType.ec:
         return (
           <Box>
             {txInputField}
@@ -582,7 +575,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") {
         clearGenomicCoordWarnings();
@@ -618,7 +611,7 @@ const TxSegmentCompInput: React.FC<TxSegmentElementInputProps> = ({
               labelId="select-input-data"
               value={txInputType}
               onChange={(event) =>
-                selectInputType(event.target.value as InputType)
+                selectInputType(event.target.value as TxElementInputType)
               }
             >
               <MenuItem value="default" disabled>

client/src/components/Pages/Summary/Main/Summary.tsx

@@ -162,8 +162,6 @@ export const Summary: React.FC<Props> = ({ setVisibleTab }) => {
     setFormattedFusion(formattedFusion);
   }, [fusion]);
 
-  console.log(formattedFusion);
-
   return (
     <>
       {(!validationErrors || validationErrors.length === 0) &&

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<string>("default");
+  const [inputType, setInputType] = useState<TxElementInputType>(
+    TxElementInputType.default
+  );
 
   const [txAc, setTxAc] = useState<string>("");
   const [txAcText, setTxAcText] = useState("");
@@ -275,21 +277,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} />
-        <Box mt="18px">
-          <Box className={classes.strand}>
-            <StrandSwitch
-              setStrand={setStrand}
-              selectedStrand={strand}
-              switchClasses={{
-                labelPlacementStart: classes.strandSwitchLabel,
-              }}
-            />
-          </Box>
-        </Box>
+        <ChromosomeField
+          fieldValue={chromosome}
+          onChange={handleChromosomeChange}
+        />
       </Box>
     </>
   );
@@ -404,9 +402,11 @@ const GetCoordinates: React.FC = () => {
         <Box>
           <Select
             value={inputType}
-            onChange={(event) => setInputType(event.target.value as string)}
+            onChange={(event) =>
+              setInputType(event.target.value as TxElementInputType)
+            }
           >
-            <MenuItem value="default" disabled>
+            <MenuItem value={TxElementInputType.default} disabled>
               Select input data
             </MenuItem>
             <MenuItem value="genomic_coords">Genomic coordinates</MenuItem>

client/src/components/main/shared/ChromosomeField/ChromosomeField.tsx

@@ -1,16 +1,15 @@
 import { makeStyles, TextField, Typography } from "@material-ui/core";
-import React from "react";
+import React, { ChangeEvent } from "react";
 import HelpTooltip from "../HelpTooltip/HelpTooltip";
 
 interface Props {
   fieldValue: string;
   width?: number | undefined;
+  editable?: boolean;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-const ChromosomeField: React.FC<Props> = ({
-  fieldValue,
-  width,
-}) => {
+const ChromosomeField: React.FC<Props> = ({ fieldValue, width, onChange }) => {
   const useStyles = makeStyles(() => ({
     textField: {
       height: 38,
@@ -37,7 +36,7 @@ const ChromosomeField: React.FC<Props> = ({
         margin="dense"
         value={fieldValue}
         label="Chromosome"
-        contentEditable={false}
+        onChange={onChange}
         className={classes.textField}
       />
     </HelpTooltip>

client/src/services/main.tsx

@@ -49,6 +49,12 @@ export enum ElementType {
   regulatoryElement = "RegulatoryElement",
 }
 
+export enum TxElementInputType {
+  default = "default",
+  gc = "genomic_coords",
+  ec = "exon_coords",
+}
+
 export type ClientElementUnion =
   | ClientMultiplePossibleGenesElement
   | ClientRegulatoryElement
@@ -164,14 +170,12 @@ export const getTxSegmentElementGC = async (
   chromosome: string,
   transcript: string,
   start: string,
-  end: string,
-  strand: string
+  end: string
 ): Promise<TxSegmentElementResponse> => {
   const params: Array<string> = [
     `gene=${gene}`,
     `transcript=${transcript}`,
     `chromosome=${chromosome}`,
-    `strand=${strand === "+" ? "%2B" : "-"}`,
   ];
   if (start !== "") params.push(`start=${start}`);
   if (end !== "") params.push(`end=${end}`);