From 2917cc60896400d94f8328c4605f275fd24e64e3 Mon Sep 17 00:00:00 2001
From: Katie Stahl <kathryn.stahl@nationwidechildrens.org>
Date: Wed, 15 Nov 2023 14:21:41 -0500
Subject: [PATCH] feat: adding loading message for fetches

---
 .../GetCoordinates/GetCoordinates.tsx          | 16 ++++++++++++++--
 .../GetTranscripts/GetTranscripts.tsx          | 11 ++++++++++-
 .../shared/LoadingMessage/LoadingMessage.tsx   | 18 ++++++++++++++++++
 .../main/shared/TabPaper/TabPaper.tsx          |  2 +-
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/main/shared/LoadingMessage/LoadingMessage.tsx

diff --git a/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx b/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx
index 78a6aaba..148a1ef8 100644
--- a/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx
+++ b/client/src/components/Utilities/GetCoordinates/GetCoordinates.tsx
@@ -11,6 +11,7 @@ import {
   Link,
   InputLabel,
   FormControl,
+  CircularProgress,
 } from "@material-ui/core";
 import React, { useEffect, useState } from "react";
 import { GeneAutocomplete } from "../../main/shared/GeneAutocomplete/GeneAutocomplete";
@@ -26,7 +27,6 @@ import TabPaper from "../../main/shared/TabPaper/TabPaper";
 import { HelpPopover } from "../../main/shared/HelpPopover/HelpPopover";
 import ChromosomeField from "../../main/shared/ChromosomeField/ChromosomeField";
 import TranscriptField from "../../main/shared/TranscriptField/TranscriptField";
-import { getTranscriptsForGene } from "../../../services/main";
 
 const GetCoordinates: React.FC = () => {
   const useStyles = makeStyles(() => ({
@@ -98,11 +98,13 @@ const GetCoordinates: React.FC = () => {
   const [exonEndOffset, setExonEndOffset] = useState<string>("");
 
   const [geneTranscripts, setGeneTranscripts] = useState([]);
-  const [geneTxWarnings, setGeneTxWarnings] = useState<string[]>();
   const [selectedTranscript, setSelectedTranscript] = useState("");
 
   const [results, setResults] = useState<GenomicData | null>(null);
   const [error, setError] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  console.log(isLoading)
 
   // programming horror
   const inputComplete =
@@ -185,6 +187,7 @@ const GetCoordinates: React.FC = () => {
       clearWarnings();
       setResults(coordsResponse.coordinates_data as GenomicData);
     }
+    setIsLoading(false);
   };
 
   const handleTranscriptSelect = (event: any) => {
@@ -193,6 +196,7 @@ const GetCoordinates: React.FC = () => {
   };
 
   const fetchResults = () => {
+    setIsLoading(true);
     if (inputType == "exon_coords_tx") {
       getGenomicCoords(
         gene,
@@ -219,6 +223,14 @@ const GetCoordinates: React.FC = () => {
   );
 
   const renderResults = (): React.ReactFragment => {
+    if (isLoading) {
+      return (
+        <Box alignContent="center" alignItems="center" justifyContent="center" display="flex" flexDirection="column">
+          <Box mb={2}>Retrieving results...</Box>
+          <CircularProgress />
+        </Box>
+      )
+    }
     if (inputValid) {
       if (results) {
         return (
diff --git a/client/src/components/Utilities/GetTranscripts/GetTranscripts.tsx b/client/src/components/Utilities/GetTranscripts/GetTranscripts.tsx
index 8787864e..6b89cf53 100644
--- a/client/src/components/Utilities/GetTranscripts/GetTranscripts.tsx
+++ b/client/src/components/Utilities/GetTranscripts/GetTranscripts.tsx
@@ -5,7 +5,6 @@ import {
   Box,
   Container,
   makeStyles,
-  Paper,
   Table,
   TableContainer,
   Typography,
@@ -27,6 +26,7 @@ import { HelpPopover } from "../../main/shared/HelpPopover/HelpPopover";
 import HelpTooltip from "../../main/shared/HelpTooltip/HelpTooltip";
 import TabHeader from "../../main/shared/TabHeader/TabHeader";
 import TabPaper from "../../main/shared/TabPaper/TabPaper";
+import LoadingMessage from "../../main/shared/LoadingMessage/LoadingMessage";
 
 export const GetTranscripts: React.FC = () => {
   const [gene, setGene] = useState("");
@@ -35,6 +35,8 @@ export const GetTranscripts: React.FC = () => {
   const [transcripts, setTranscripts] = useState<ManeGeneTranscript[]>([]);
   const [transcriptWarnings, setTranscriptWarnings] = useState<string[]>([]);
 
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   const { colorTheme } = useColorTheme();
   const useStyles = makeStyles(() => ({
     pageContainer: {
@@ -51,6 +53,7 @@ export const GetTranscripts: React.FC = () => {
       overflowY: "scroll",
       textOverflow: "clip",
       width: "100%",
+      height: "100%",
     },
     txAccordionContainer: {
       width: "90%",
@@ -73,13 +76,16 @@ export const GetTranscripts: React.FC = () => {
   }, [gene]);
 
   const handleGet = () => {
+    setIsLoading(true);
     getTranscripts(gene).then((transcriptsResponse: GetTranscriptsResponse) => {
       if (transcriptsResponse.warnings) {
         setTranscriptWarnings(transcriptsResponse.warnings);
         setTranscripts([]);
+        setIsLoading(false);
       } else {
         setTranscriptWarnings([]);
         setTranscripts(transcriptsResponse.transcripts as ManeGeneTranscript[]);
+        setIsLoading(false);
       }
     });
   };
@@ -116,6 +122,9 @@ export const GetTranscripts: React.FC = () => {
   );
 
   const renderTranscripts = () => {
+    if (isLoading) {
+      return (<LoadingMessage message="Fetching transcripts..."/>)
+    }
     if (transcriptWarnings.length > 0) {
       // TODO more error handling here
       return <Box>{JSON.stringify(transcriptWarnings, null, 2)}</Box>;
diff --git a/client/src/components/main/shared/LoadingMessage/LoadingMessage.tsx b/client/src/components/main/shared/LoadingMessage/LoadingMessage.tsx
new file mode 100644
index 00000000..955bd158
--- /dev/null
+++ b/client/src/components/main/shared/LoadingMessage/LoadingMessage.tsx
@@ -0,0 +1,18 @@
+import { Box, CircularProgress, makeStyles } from "@material-ui/core";
+import React from "react";
+
+interface LoadingMessageProps {
+  message?: string;
+}
+
+export default function StrandSwitch(
+  props: LoadingMessageProps
+): React.ReactElement {
+  const loadingMessage = props?.message ? props.message : "Loading..."
+  return (
+    <Box alignContent="center" alignItems="center" justifyContent="center" display="flex" flexDirection="column">
+      <Box mb={2}>{loadingMessage}</Box>
+        <CircularProgress />
+    </Box>
+  );
+}
diff --git a/client/src/components/main/shared/TabPaper/TabPaper.tsx b/client/src/components/main/shared/TabPaper/TabPaper.tsx
index 02ae607c..cb48880e 100644
--- a/client/src/components/main/shared/TabPaper/TabPaper.tsx
+++ b/client/src/components/main/shared/TabPaper/TabPaper.tsx
@@ -35,7 +35,7 @@ const TabPaper: React.FC<Props> = ({
     rightColumn: {
       width: leftColumnWidth ? `${100 - leftColumnWidth}%` : "50%",
     },
-    rightPadder: { padding: "25px" },
+    rightPadder: { padding: "25px", height: "100%" },
   }));
   const classes = useStyles();
   return (