feat: adding loading message for fetches

cancervariants · Nov 15, 2023 · 2917cc6 · 2917cc6
1 parent 005823a
commit 2917cc6
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (