Add spinner and load error indicator to DrawerSequenceView (#733)

Plus, remove environment check when displaying sequence view

src/content/app/genome-browser/components/drawer/components/sequence-view/DrawerSequenceView.scss

@@ -72,3 +72,20 @@
   background-color: $black;
   border-radius: 30px;
 }
+
+.loadingContainer,
+.loadFailureContainer {
+  grid-area: main-bottom;
+  display: flex;
+  justify-content: center;
+  padding-top: 110px;
+}
+
+.loadFailureContainer {
+  column-gap: 16px;
+  align-items: center;
+}
+
+.errorMessage {
+  color: $red;
+}

src/content/app/genome-browser/components/drawer/components/sequence-view/DrawerSequenceView.tsx

@@ -22,6 +22,8 @@ import { getReverseComplement } from 'src/shared/helpers/sequenceHelpers';
 import RadioGroup from 'src/shared/components/radio-group/RadioGroup';
 import Checkbox from 'src/shared/components/checkbox/Checkbox';
 import ShowHide from 'src/shared/components/show-hide/ShowHide';
+import { PrimaryButton } from 'src/shared/components/button/Button';
+import { CircleLoader } from 'src/shared/components/loader';
 
 import type { SequenceType } from 'src/content/app/genome-browser/state/drawer/drawer-sequence/drawerSequenceSlice';
 
@@ -39,6 +41,9 @@ type Props = {
   isExpanded: boolean;
   toggleSequenceVisibility: () => void;
   sequence?: string;
+  isError: boolean;
+  isLoading: boolean;
+  refetch: () => void;
   sequenceTypes: SequenceType[];
   selectedSequenceType: SequenceType;
   isReverseComplement: boolean;
@@ -49,6 +54,9 @@ type Props = {
 const DrawerSequenceView = (props: Props) => {
   const {
     isExpanded,
+    isError,
+    isLoading,
+    refetch,
     toggleSequenceVisibility,
     sequence,
     sequenceTypes,
@@ -88,6 +96,8 @@ const DrawerSequenceView = (props: Props) => {
               isReverseComplement={isReverseComplement}
             />
           )}
+          {isLoading && <Loading />}
+          {isError && <LoadFailure refetch={refetch} />}
           {/* The BLAST button will go here when ready
 
               <div className={styles.asideTop}>
@@ -192,4 +202,21 @@ const Copy = (props: { value: string }) => {
   );
 };
 
+const LoadFailure = (props: { refetch: () => void }) => {
+  return (
+    <div className={styles.loadFailureContainer}>
+      <div className={styles.errorMessage}>Failed to get data</div>
+      <PrimaryButton onClick={props.refetch}>Try again</PrimaryButton>
+    </div>
+  );
+};
+
+const Loading = () => {
+  return (
+    <div className={styles.loadingContainer}>
+      <CircleLoader size="small" />
+    </div>
+  );
+};
+
 export default DrawerSequenceView;

src/content/app/genome-browser/components/drawer/components/sequence-view/GeneSequenceView.tsx

@@ -57,7 +57,12 @@ export const GeneSequenceView = (props: Props) => {
     strand: { code: strand }
   } = gene.slice;
 
-  const { data: sequence } = useRefgetSequenceQuery(
+  const {
+    currentData: sequence,
+    isError,
+    isFetching,
+    refetch
+  } = useRefgetSequenceQuery(
     {
       checksum,
       start,
@@ -70,6 +75,9 @@ export const GeneSequenceView = (props: Props) => {
   return (
     <DrawerSequenceView
       isExpanded={isExpanded}
+      isError={isError}
+      isLoading={isFetching}
+      refetch={refetch}
       toggleSequenceVisibility={toggleSequenceVisibility}
       sequence={sequence}
       sequenceTypes={['genomic']}

src/content/app/genome-browser/components/drawer/components/sequence-view/TranscriptSequenceView.tsx

@@ -70,14 +70,21 @@ const TranscriptSequenceView = (props: Props) => {
     ? proteinCodingTranscriptSequenceTypes
     : nonCodingTranscriptSequenceTypes;
 
-  const { data: sequence } = useRefgetSequenceQuery(
-    getSequenceQueryParams(transcript, sequenceType),
-    { skip: !isExpanded }
-  );
+  const {
+    currentData: sequence,
+    isError,
+    isFetching,
+    refetch
+  } = useRefgetSequenceQuery(getSequenceQueryParams(transcript, sequenceType), {
+    skip: !isExpanded
+  });
 
   return (
     <DrawerSequenceView
       isExpanded={isExpanded}
+      isError={isError}
+      isLoading={isFetching}
+      refetch={refetch}
       toggleSequenceVisibility={toggleSequenceVisibility}
       sequence={sequence}
       sequenceTypes={sequenceTypes}

src/content/app/genome-browser/components/drawer/drawer-views/gene-summary/GeneSummary.tsx

@@ -18,8 +18,6 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 
-import { isEnvironment, Environment } from 'src/shared/helpers/environment';
-
 import * as urlFor from 'src/shared/helpers/urlHelper';
 import { getFormattedLocation } from 'src/shared/helpers/formatters/regionFormatter';
 import { getStrandDisplayName } from 'src/shared/helpers/formatters/strandFormatter';
@@ -114,15 +112,11 @@ const GeneSummary = () => {
           </div>
         </div>
       </div>
-
-      {isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL]) && (
-        <div className={classNames(rowClasses, styles.downloadRow)}>
-          <div className={styles.value}>
-            <GeneSequenceView gene={gene} />
-          </div>
+      <div className={classNames(rowClasses, styles.downloadRow)}>
+        <div className={styles.value}>
+          <GeneSequenceView gene={gene} />
         </div>
-      )}
-
+      </div>
       <div className={classNames(rowClasses, styles.downloadRow)}>
         <div className={styles.value}>
           <ShowHide

src/content/app/genome-browser/components/drawer/drawer-views/transcript-summary/TranscriptSummary.tsx

@@ -18,8 +18,6 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 
-import { isEnvironment, Environment } from 'src/shared/helpers/environment';
-
 import { getFormattedLocation } from 'src/shared/helpers/formatters/regionFormatter';
 import { getStrandDisplayName } from 'src/shared/helpers/formatters/strandFormatter';
 import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFormatter';
@@ -154,21 +152,17 @@ const TranscriptSummary = (props: Props) => {
           </div>
         </div>
       </div>
-
-      {isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL]) && (
-        <div
-          className={classNames(
-            styles.row,
-            styles.spaceAbove,
-            styles.downloadRow
-          )}
-        >
-          <div className={styles.value}>
-            <TranscriptSequenceView transcript={transcript} />
-          </div>
+      <div
+        className={classNames(
+          styles.row,
+          styles.spaceAbove,
+          styles.downloadRow
+        )}
+      >
+        <div className={styles.value}>
+          <TranscriptSequenceView transcript={transcript} />
         </div>
-      )}
-
+      </div>
       <div
         className={classNames(
           styles.row,