Skip to content

Commit

Permalink
feat: add 404 error page to drugs, genes, and interactions that have …
Browse files Browse the repository at this point in the history 
…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
  • Loading branch information
@katiestahl
katiestahl authored Dec 8, 2023
1 parent 617f7cd commit 8dd7961
Show file tree
Hide file tree
Showing 8 changed files with 164 additions and 106 deletions.
Binary file added client/public/images/dgidb-404-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 12 additions & 2 deletions client/src/components/Drug/DrugRecord/DrugRecord.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@ import TableCell from '@mui/material/TableCell';
import Table from '@mui/material/Table';

// components
import { LinearProgress, Link } from '@mui/material';
import { Alert, LinearProgress, Link } from '@mui/material';
import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
import { useGetDrugInteractions } from 'hooks/queries/useGetDrugInteractions';
import { generateXrefLink } from 'utils/generateXrefLink';
import { ResultTypes } from 'types/types';
import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';

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

const drugExists = drugData !== null;

const noData = (
<TableRow>
<TableCell style={{ borderBottom: 'none' }}>No data available.</TableCell>
Expand Down Expand Up @@ -206,7 +209,7 @@ export const DrugRecord: React.FC = () => {
},
];

return (
return drugExists ? (
<Box className="drug-record-container">
<Box className="drug-record-header">
<Box className="name">{drugData?.name}</Box>
Expand Down Expand Up @@ -267,5 +270,12 @@ export const DrugRecord: React.FC = () => {
</Box>
</Box>
</Box>
) : (
<Box p={2}>
<Alert severity="error">
We could not find any results for this drug.
</Alert>
<NotFoundError />
</Box>
);
};
14 changes: 12 additions & 2 deletions client/src/components/Gene/GeneRecord/GeneRecord.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@ import Table from '@mui/material/Table';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';

import { LinearProgress, Link } from '@mui/material';
import { Alert, LinearProgress, Link } from '@mui/material';
import { useGetGeneInteractions } from 'hooks/queries/useGetGeneInteractions';
import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
import { dropRedundantCites } from 'utils/dropRedundantCites';
import { generateXrefLink } from 'utils/generateXrefLink';
import { ResultTypes } from 'types/types';
import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';

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

const geneExists = geneData !== null;

// get interaction data
const { data: fetchedInteractionData, isLoading: interactionDataIsLoading } =
useGetGeneInteractions(geneId);
Expand Down Expand Up @@ -204,7 +207,7 @@ export const GeneRecord: React.FC = () => {
},
];

return (
return geneExists ? (
<Box className="content gene-record-container">
<Box className="gene-record-header">
<Box className="symbol">{geneData?.name}</Box>
Expand Down Expand Up @@ -265,6 +268,13 @@ export const GeneRecord: React.FC = () => {
</Box>
</Box>
</Box>
) : (
<Box p={2}>
<Alert severity="error">
We could not find any results for this gene.
</Alert>
<NotFoundError />
</Box>
);
};

Expand Down
213 changes: 112 additions & 101 deletions client/src/components/Interaction/InteractionRecord/InteractionRecord.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,16 @@ import AccordionDetails from '@mui/material/AccordionDetails';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import { truncateDecimals } from 'utils/format';
import { Alert } from '@mui/material';
import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';

export const InteractionRecord: React.FC = () => {
const interactionId = useParams().id;
const { data } = useGetInteractionRecord(interactionId!);
const interactionData = data?.interaction;

const interactionExists = interactionData !== null;

const noData = (
<TableRow>
<TableCell style={{ borderBottom: 'none' }}>No data available.</TableCell>
Expand All @@ -38,10 +44,10 @@ export const InteractionRecord: React.FC = () => {
<TableCell className="attribute-value">
<a
className="info-link"
href={`/drugs/${data?.interaction?.drug?.conceptId}`}
href={`/drugs/${interactionData?.drug?.conceptId}`}
>
{data?.interaction?.drug?.name} [
{data?.interaction?.drug?.conceptId}]
{interactionData?.drug?.name} [
{interactionData?.drug?.conceptId}]
</a>
</TableCell>
</TableRow>
Expand All @@ -50,10 +56,10 @@ export const InteractionRecord: React.FC = () => {
<TableCell className="attribute-value">
<a
className="info-link"
href={`/genes/${data?.interaction?.gene?.conceptId}`}
href={`/genes/${interactionData?.gene?.conceptId}`}
>
{data?.interaction?.gene?.name} [
{data?.interaction?.gene?.conceptId}]
{interactionData?.gene?.name} [
{interactionData?.gene?.conceptId}]
</a>
</TableCell>
</TableRow>
Expand All @@ -62,12 +68,12 @@ export const InteractionRecord: React.FC = () => {
Interaction Score:
</TableCell>
<TableCell className="attribute-value">
{truncateDecimals(data?.interaction?.interactionScore, 2)}
{truncateDecimals(interactionData?.interactionScore, 2)}
</TableCell>
</TableRow>

{data?.interaction?.interactionTypes
? data?.interaction?.interactionTypes?.map((attribute: any) => {
{interactionData?.interactionTypes
? interactionData?.interactionTypes?.map((attribute: any) => {
return (
<TableRow
key={'Directionality ' + attribute.directionality}
Expand All @@ -93,8 +99,8 @@ export const InteractionRecord: React.FC = () => {
<Box className="box-content">
<Table>
<TableBody>
{data?.interaction?.publications.length
? data?.interaction?.publications?.map(
{interactionData?.publications.length
? interactionData?.publications?.map(
(pmid: any, index: number) => {
return (
<TableRow key={index}>
Expand Down Expand Up @@ -123,8 +129,8 @@ export const InteractionRecord: React.FC = () => {
<Box className="box-content">
<Table>
<TableBody>
{data?.interaction?.sources.length
? data?.interaction?.sources?.map(
{interactionData?.sources.length
? interactionData?.sources?.map(
(source: any, index: number) => {
return (
<TableRow key={index}>
Expand All @@ -143,97 +149,102 @@ export const InteractionRecord: React.FC = () => {
},
];

return (
data && (
<Box className="content interaction-record-container">
<Box className="interaction-record-header">
<Box className="symbol">
<a
className="header-link"
href={`/drugs/${data.interaction?.drug?.conceptId}`}
>
{data?.interaction?.drug?.name}
</a>{' '}
<ArrowRightIcon />{' '}
<a
className="header-link"
href={`/genes/${data.interaction?.gene?.conceptId}`}
>
{data?.interaction?.gene?.name}
</a>
</Box>
return interactionExists ? (
<Box className="content interaction-record-container">
<Box className="interaction-record-header">
<Box className="symbol">
<a
className="header-link"
href={`/drugs/${interactionData?.drug?.conceptId}`}
>
{interactionData?.drug?.name}
</a>{' '}
<ArrowRightIcon />{' '}
<a
className="header-link"
href={`/genes/${interactionData?.gene?.conceptId}`}
>
{interactionData?.gene?.name}
</a>
</Box>
<Box display="flex">
<Box display="block" width="45%">
{sectionsMap.map((section) => {
return (
<Accordion key={section.name} defaultExpanded>
<AccordionSummary
style={{
padding: '0 10px',
backgroundColor: 'var(--background-light)',
}}
expandIcon={<ExpandMoreIcon />}
>
<h3>
<b>{section.name}</b>
</h3>
</AccordionSummary>
<AccordionDetails
style={{
maxHeight: '500px',
overflow: 'scroll',
padding: '5px',
}}
>
{section.sectionContent}
</AccordionDetails>
</Accordion>
);
})}
</Box>
<Box ml={1} width="55%">
<Accordion defaultExpanded>
<AccordionSummary
style={{
padding: '0 10px',
backgroundColor: 'var(--background-light)',
}}
expandIcon={<ExpandMoreIcon />}
>
<h3>
<b>Interaction Attributes</b>
</h3>
</AccordionSummary>
<AccordionDetails className="attributes-container">
<Table>
<TableBody>
{data?.interaction?.interactionAttributes.length
? data?.interaction?.interactionAttributes?.map(
(attribute: any) => {
return (
<TableRow
key={attribute.name + ' ' + attribute.value}
>
<TableCell className="attribute-name">
{attribute.name}:
</TableCell>
<TableCell className="attribute-value">
{attribute.value}
</TableCell>
</TableRow>
);
}
)
: noData}
</TableBody>
</Table>
</AccordionDetails>
</Accordion>
</Box>
</Box>
<Box display="flex">
<Box display="block" width="45%">
{sectionsMap.map((section) => {
return (
<Accordion key={section.name} defaultExpanded>
<AccordionSummary
style={{
padding: '0 10px',
backgroundColor: 'var(--background-light)',
}}
expandIcon={<ExpandMoreIcon />}
>
<h3>
<b>{section.name}</b>
</h3>
</AccordionSummary>
<AccordionDetails
style={{
maxHeight: '500px',
overflow: 'scroll',
padding: '5px',
}}
>
{section.sectionContent}
</AccordionDetails>
</Accordion>
);
})}
</Box>
<Box ml={1} width="55%">
<Accordion defaultExpanded>
<AccordionSummary
style={{
padding: '0 10px',
backgroundColor: 'var(--background-light)',
}}
expandIcon={<ExpandMoreIcon />}
>
<h3>
<b>Interaction Attributes</b>
</h3>
</AccordionSummary>
<AccordionDetails className="attributes-container">
<Table>
<TableBody>
{interactionData?.interactionAttributes.length
? interactionData?.interactionAttributes?.map(
(attribute: any) => {
return (
<TableRow
key={attribute.name + ' ' + attribute.value}
>
<TableCell className="attribute-name">
{attribute.name}:
</TableCell>
<TableCell className="attribute-value">
{attribute.value}
</TableCell>
</TableRow>
);
}
)
: noData}
</TableBody>
</Table>
</AccordionDetails>
</Accordion>
</Box>
</Box>
)
</Box>
) : (
<Box p={2}>
<Alert severity="error">
We could not find any results for this interaction.
</Alert>
<NotFoundError />
</Box>
);
};

Expand Down
6 changes: 6 additions & 0 deletions client/src/components/Layout/MainLayout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,21 @@ body {
background-color: var(--background-light);
color: var(--text-content);
min-height: 100vh;
position: relative;

.content-container {
background-color: var(--background-light);
display: flex;
flex-direction: column;
align-items: stretch;
padding: 20px;
padding-bottom: 75px;
min-height: 100%;
}

.content {
background-color: var(--background);
min-height: 75vh;
}
}

Expand Down Expand Up @@ -117,6 +121,8 @@ footer {
font-size: 20px;
font-family: 'Work Sans';
font-weight: 300;
position: absolute;
bottom: 0;
}

.ant-tabs {
Expand Down
Loading

0 comments on commit 8dd7961

Please sign in to comment.