Skip to content

Commit 7a4894e

Browse files
katiestahlkatiestahl
authored
staging (#457) (#458)
* Dev (#457) * feat: update API page to show users endpoint for graphql requests * feat: update API page to show users endpoint for graphql requests * feat: update API page to show users endpoint for graphql requests * feat: update API page to show users endpoint for graphql requests * feat: add 404 error page to drugs, genes, and interactions that have no data (#456) * feat: update API page to show users endpoint for graphql requests * feat: update API page to show users endpoint for graphql requests * feat: update API page to show users endpoint for graphql requests * feat: add error message when data not found and fixing footer position * feat: add error message when data not found * style: removing console log * cleaning up code * refactor: extracting variable for interaction * feat: add 404 error page to drugs, genes, and interactions that have no data * Automated frontend build * Automated frontend build --------- Co-authored-by: katiestahl <[email protected]>
1 parent 921c9eb commit 7a4894e

File tree

23 files changed

+252
-155
lines changed

23 files changed

+252
-155
lines changed

‎client/public/images/dgidb-404-logo.png

21.1 KB
Loading

‎client/src/components/Drug/DrugRecord/DrugRecord.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ import TableCell from '@mui/material/TableCell';
1717
import Table from '@mui/material/Table';
1818

1919
// components
20-
import { LinearProgress, Link } from '@mui/material';
20+
import { Alert, LinearProgress, Link } from '@mui/material';
2121
import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
2222
import { useGetDrugInteractions } from 'hooks/queries/useGetDrugInteractions';
2323
import { generateXrefLink } from 'utils/generateXrefLink';
2424
import { ResultTypes } from 'types/types';
25+
import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';
2526

2627
export const DrugRecord: React.FC = () => {
2728
const drugId = useParams().drug as string;
@@ -43,6 +44,8 @@ export const DrugRecord: React.FC = () => {
4344
setInteractionResults(interactionData);
4445
}, [fetchedInteractionData]);
4546

47+
const drugExists = drugData !== null;
48+
4649
const noData = (
4750
<TableRow>
4851
<TableCell style={{ borderBottom: 'none' }}>No data available.</TableCell>
@@ -206,7 +209,7 @@ export const DrugRecord: React.FC = () => {
206209
},
207210
];
208211

209-
return (
212+
return drugExists ? (
210213
<Box className="drug-record-container">
211214
<Box className="drug-record-header">
212215
<Box className="name">{drugData?.name}</Box>
@@ -267,5 +270,12 @@ export const DrugRecord: React.FC = () => {
267270
</Box>
268271
</Box>
269272
</Box>
273+
) : (
274+
<Box p={2}>
275+
<Alert severity="error">
276+
We could not find any results for this drug.
277+
</Alert>
278+
<NotFoundError />
279+
</Box>
270280
);
271281
};

‎client/src/components/Gene/GeneRecord/GeneRecord.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ import Table from '@mui/material/Table';
1515
import TableRow from '@mui/material/TableRow';
1616
import TableCell from '@mui/material/TableCell';
1717

18-
import { LinearProgress, Link } from '@mui/material';
18+
import { Alert, LinearProgress, Link } from '@mui/material';
1919
import { useGetGeneInteractions } from 'hooks/queries/useGetGeneInteractions';
2020
import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
2121
import { dropRedundantCites } from 'utils/dropRedundantCites';
2222
import { generateXrefLink } from 'utils/generateXrefLink';
2323
import { ResultTypes } from 'types/types';
24+
import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';
2425

2526
export const GeneRecord: React.FC = () => {
2627
const geneId: any = useParams().gene;
@@ -30,6 +31,8 @@ export const GeneRecord: React.FC = () => {
3031
useGetGeneRecord(geneId);
3132
const geneData = fetchedGeneData?.gene;
3233

34+
const geneExists = geneData !== null;
35+
3336
// get interaction data
3437
const { data: fetchedInteractionData, isLoading: interactionDataIsLoading } =
3538
useGetGeneInteractions(geneId);
@@ -204,7 +207,7 @@ export const GeneRecord: React.FC = () => {
204207
},
205208
];
206209

207-
return (
210+
return geneExists ? (
208211
<Box className="content gene-record-container">
209212
<Box className="gene-record-header">
210213
<Box className="symbol">{geneData?.name}</Box>
@@ -265,6 +268,13 @@ export const GeneRecord: React.FC = () => {
265268
</Box>
266269
</Box>
267270
</Box>
271+
) : (
272+
<Box p={2}>
273+
<Alert severity="error">
274+
We could not find any results for this gene.
275+
</Alert>
276+
<NotFoundError />
277+
</Box>
268278
);
269279
};
270280

‎client/src/components/Interaction/InteractionRecord/InteractionRecord.tsx

Lines changed: 112 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,16 @@ import AccordionDetails from '@mui/material/AccordionDetails';
1616
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
1717
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
1818
import { truncateDecimals } from 'utils/format';
19+
import { Alert } from '@mui/material';
20+
import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';
1921

2022
export const InteractionRecord: React.FC = () => {
2123
const interactionId = useParams().id;
2224
const { data } = useGetInteractionRecord(interactionId!);
25+
const interactionData = data?.interaction;
26+
27+
const interactionExists = interactionData !== null;
28+
2329
const noData = (
2430
<TableRow>
2531
<TableCell style={{ borderBottom: 'none' }}>No data available.</TableCell>
@@ -38,10 +44,10 @@ export const InteractionRecord: React.FC = () => {
3844
<TableCell className="attribute-value">
3945
<a
4046
className="info-link"
41-
href={`/drugs/${data?.interaction?.drug?.conceptId}`}
47+
href={`/drugs/${interactionData?.drug?.conceptId}`}
4248
>
43-
{data?.interaction?.drug?.name} [
44-
{data?.interaction?.drug?.conceptId}]
49+
{interactionData?.drug?.name} [
50+
{interactionData?.drug?.conceptId}]
4551
</a>
4652
</TableCell>
4753
</TableRow>
@@ -50,10 +56,10 @@ export const InteractionRecord: React.FC = () => {
5056
<TableCell className="attribute-value">
5157
<a
5258
className="info-link"
53-
href={`/genes/${data?.interaction?.gene?.conceptId}`}
59+
href={`/genes/${interactionData?.gene?.conceptId}`}
5460
>
55-
{data?.interaction?.gene?.name} [
56-
{data?.interaction?.gene?.conceptId}]
61+
{interactionData?.gene?.name} [
62+
{interactionData?.gene?.conceptId}]
5763
</a>
5864
</TableCell>
5965
</TableRow>
@@ -62,12 +68,12 @@ export const InteractionRecord: React.FC = () => {
6268
Interaction Score:
6369
</TableCell>
6470
<TableCell className="attribute-value">
65-
{truncateDecimals(data?.interaction?.interactionScore, 2)}
71+
{truncateDecimals(interactionData?.interactionScore, 2)}
6672
</TableCell>
6773
</TableRow>
6874

69-
{data?.interaction?.interactionTypes
70-
? data?.interaction?.interactionTypes?.map((attribute: any) => {
75+
{interactionData?.interactionTypes
76+
? interactionData?.interactionTypes?.map((attribute: any) => {
7177
return (
7278
<TableRow
7379
key={'Directionality ' + attribute.directionality}
@@ -93,8 +99,8 @@ export const InteractionRecord: React.FC = () => {
9399
<Box className="box-content">
94100
<Table>
95101
<TableBody>
96-
{data?.interaction?.publications.length
97-
? data?.interaction?.publications?.map(
102+
{interactionData?.publications.length
103+
? interactionData?.publications?.map(
98104
(pmid: any, index: number) => {
99105
return (
100106
<TableRow key={index}>
@@ -123,8 +129,8 @@ export const InteractionRecord: React.FC = () => {
123129
<Box className="box-content">
124130
<Table>
125131
<TableBody>
126-
{data?.interaction?.sources.length
127-
? data?.interaction?.sources?.map(
132+
{interactionData?.sources.length
133+
? interactionData?.sources?.map(
128134
(source: any, index: number) => {
129135
return (
130136
<TableRow key={index}>
@@ -143,97 +149,102 @@ export const InteractionRecord: React.FC = () => {
143149
},
144150
];
145151

146-
return (
147-
data && (
148-
<Box className="content interaction-record-container">
149-
<Box className="interaction-record-header">
150-
<Box className="symbol">
151-
<a
152-
className="header-link"
153-
href={`/drugs/${data.interaction?.drug?.conceptId}`}
154-
>
155-
{data?.interaction?.drug?.name}
156-
</a>{' '}
157-
<ArrowRightIcon />{' '}
158-
<a
159-
className="header-link"
160-
href={`/genes/${data.interaction?.gene?.conceptId}`}
161-
>
162-
{data?.interaction?.gene?.name}
163-
</a>
164-
</Box>
152+
return interactionExists ? (
153+
<Box className="content interaction-record-container">
154+
<Box className="interaction-record-header">
155+
<Box className="symbol">
156+
<a
157+
className="header-link"
158+
href={`/drugs/${interactionData?.drug?.conceptId}`}
159+
>
160+
{interactionData?.drug?.name}
161+
</a>{' '}
162+
<ArrowRightIcon />{' '}
163+
<a
164+
className="header-link"
165+
href={`/genes/${interactionData?.gene?.conceptId}`}
166+
>
167+
{interactionData?.gene?.name}
168+
</a>
165169
</Box>
166-
<Box display="flex">
167-
<Box display="block" width="45%">
168-
{sectionsMap.map((section) => {
169-
return (
170-
<Accordion key={section.name} defaultExpanded>
171-
<AccordionSummary
172-
style={{
173-
padding: '0 10px',
174-
backgroundColor: 'var(--background-light)',
175-
}}
176-
expandIcon={<ExpandMoreIcon />}
177-
>
178-
<h3>
179-
<b>{section.name}</b>
180-
</h3>
181-
</AccordionSummary>
182-
<AccordionDetails
183-
style={{
184-
maxHeight: '500px',
185-
overflow: 'scroll',
186-
padding: '5px',
187-
}}
188-
>
189-
{section.sectionContent}
190-
</AccordionDetails>
191-
</Accordion>
192-
);
193-
})}
194-
</Box>
195-
<Box ml={1} width="55%">
196-
<Accordion defaultExpanded>
197-
<AccordionSummary
198-
style={{
199-
padding: '0 10px',
200-
backgroundColor: 'var(--background-light)',
201-
}}
202-
expandIcon={<ExpandMoreIcon />}
203-
>
204-
<h3>
205-
<b>Interaction Attributes</b>
206-
</h3>
207-
</AccordionSummary>
208-
<AccordionDetails className="attributes-container">
209-
<Table>
210-
<TableBody>
211-
{data?.interaction?.interactionAttributes.length
212-
? data?.interaction?.interactionAttributes?.map(
213-
(attribute: any) => {
214-
return (
215-
<TableRow
216-
key={attribute.name + ' ' + attribute.value}
217-
>
218-
<TableCell className="attribute-name">
219-
{attribute.name}:
220-
</TableCell>
221-
<TableCell className="attribute-value">
222-
{attribute.value}
223-
</TableCell>
224-
</TableRow>
225-
);
226-
}
227-
)
228-
: noData}
229-
</TableBody>
230-
</Table>
231-
</AccordionDetails>
232-
</Accordion>
233-
</Box>
170+
</Box>
171+
<Box display="flex">
172+
<Box display="block" width="45%">
173+
{sectionsMap.map((section) => {
174+
return (
175+
<Accordion key={section.name} defaultExpanded>
176+
<AccordionSummary
177+
style={{
178+
padding: '0 10px',
179+
backgroundColor: 'var(--background-light)',
180+
}}
181+
expandIcon={<ExpandMoreIcon />}
182+
>
183+
<h3>
184+
<b>{section.name}</b>
185+
</h3>
186+
</AccordionSummary>
187+
<AccordionDetails
188+
style={{
189+
maxHeight: '500px',
190+
overflow: 'scroll',
191+
padding: '5px',
192+
}}
193+
>
194+
{section.sectionContent}
195+
</AccordionDetails>
196+
</Accordion>
197+
);
198+
})}
199+
</Box>
200+
<Box ml={1} width="55%">
201+
<Accordion defaultExpanded>
202+
<AccordionSummary
203+
style={{
204+
padding: '0 10px',
205+
backgroundColor: 'var(--background-light)',
206+
}}
207+
expandIcon={<ExpandMoreIcon />}
208+
>
209+
<h3>
210+
<b>Interaction Attributes</b>
211+
</h3>
212+
</AccordionSummary>
213+
<AccordionDetails className="attributes-container">
214+
<Table>
215+
<TableBody>
216+
{interactionData?.interactionAttributes.length
217+
? interactionData?.interactionAttributes?.map(
218+
(attribute: any) => {
219+
return (
220+
<TableRow
221+
key={attribute.name + ' ' + attribute.value}
222+
>
223+
<TableCell className="attribute-name">
224+
{attribute.name}:
225+
</TableCell>
226+
<TableCell className="attribute-value">
227+
{attribute.value}
228+
</TableCell>
229+
</TableRow>
230+
);
231+
}
232+
)
233+
: noData}
234+
</TableBody>
235+
</Table>
236+
</AccordionDetails>
237+
</Accordion>
234238
</Box>
235239
</Box>
236-
)
240+
</Box>
241+
) : (
242+
<Box p={2}>
243+
<Alert severity="error">
244+
We could not find any results for this interaction.
245+
</Alert>
246+
<NotFoundError />
247+
</Box>
237248
);
238249
};
239250

‎client/src/components/Layout/MainLayout.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,21 @@ body {
1818
background-color: var(--background-light);
1919
color: var(--text-content);
2020
min-height: 100vh;
21+
position: relative;
2122

2223
.content-container {
2324
background-color: var(--background-light);
2425
display: flex;
2526
flex-direction: column;
2627
align-items: stretch;
2728
padding: 20px;
29+
padding-bottom: 75px;
30+
min-height: 100%;
2831
}
2932

3033
.content {
3134
background-color: var(--background);
35+
min-height: 75vh;
3236
}
3337
}
3438

@@ -117,6 +121,8 @@ footer {
117121
font-size: 20px;
118122
font-family: 'Work Sans';
119123
font-weight: 300;
124+
position: absolute;
125+
bottom: 0;
120126
}
121127

122128
.ant-tabs {

0 commit comments

Comments
 (0)