Unverified Commit 448e5238 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

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

Plus, remove environment check when displaying sequence view
parent c9d5c9f4
Pipeline #268802 passed with stages
in 6 minutes and 53 seconds
......@@ -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;
}
......@@ -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;
......@@ -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']}
......
......@@ -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}
......
......@@ -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
......
......@@ -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,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment