Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adding breadcrumbs for users to easily navigate back to search … #501

Draft
wants to merge 1 commit into
base: dev
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 2 additions & 36 deletions client/src/components/Browse/Categories/BrowseCategories.scss
Original file line number Diff line number Diff line change
@@ -1,44 +1,10 @@
.browse-categories-container {
background-color: var(--background);
padding: 10px;
display: flex;
flex: stretch;

.category-list {
flex: 1;
}

.ant-collapse-content {
.ant-collapse-content-box {
padding: 0px !important;
}
}

.ant-table-wrapper {
background-color: var(--background-light) !important;
}

.ant-table-pagination .ant-pagination {
margin: 8px 0 !important;
}

.ant-table-container table > thead > tr > th {
background-color: var(--background-light);
}
}

.ant-checkbox-group {
display: flex;
flex-direction: column;
}

.ant-checkbox-group-item,
.ant-checkbox-wrapper {
color: var(--text-content);
}

.ant-collapse {
background-color: var(--background-content);

.ant-collapse-header {
color: var(--text-content) !important;
}
}
1 change: 1 addition & 0 deletions client/src/components/Browse/Sources/BrowseSources.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
}

.sources-page-container {
background-color: var(--background);
padding: 15px;
.sources-grid {
display: grid;
Expand Down
62 changes: 60 additions & 2 deletions client/src/components/Drug/DrugRecord/DrugRecord.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// hooks/dependencies
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { useGetDrugRecord } from 'hooks/queries/useGetDrugRecord';
import Box from '@mui/material/Box';
import Accordion from '@mui/material/Accordion';
Expand All @@ -17,7 +17,13 @@ import TableCell from '@mui/material/TableCell';
import Table from '@mui/material/Table';

// components
import { Alert, LinearProgress, Link } from '@mui/material';
import {
Alert,
Breadcrumbs,
LinearProgress,
Link,
Typography,
} from '@mui/material';
import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
import { useGetDrugInteractions } from 'hooks/queries/useGetDrugInteractions';
import { generateXrefLink } from 'utils/generateXrefLink';
Expand Down Expand Up @@ -285,3 +291,55 @@ export const DrugRecord: React.FC = () => {
</Box>
);
};

export const DrugRecordContainer: React.FC = () => {
const navigate = useNavigate();
const drugId = useParams().drug as string;

// get drug attributes
const { data: fetchedDrugData, isLoading: drugDataIsLoading } =
useGetDrugRecord(drugId);
const drugData = fetchedDrugData?.drug;
const previousURL = sessionStorage.getItem('previousURL');

return (
<>
{drugDataIsLoading ? (
<LinearProgress
sx={{
backgroundColor: 'white',
'& .MuiLinearProgress-bar': {
backgroundColor: '#480a77',
},
}}
className="linear-bar"
/>
) : (
<>
<Breadcrumbs aria-label="breadcrumb" sx={{ marginBottom: '15px' }}>
<Link
underline="hover"
color="primary"
onClick={() => navigate('/')}
sx={{ cursor: 'pointer' }}
>
Home
</Link>
{previousURL && (
<Link
underline="hover"
color="primary"
href={previousURL}
sx={{ cursor: 'pointer' }}
>
Search Results
</Link>
)}
<Typography color="text.primary">{drugData?.name}</Typography>
</Breadcrumbs>
<DrugRecord />
</>
)}
</>
);
};
3 changes: 3 additions & 0 deletions client/src/components/Drug/DrugSummary/DrugSummary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import InteractionTable from 'components/Shared/InteractionTable/InteractionTabl
import TableDownloader from 'components/Shared/TableDownloader/TableDownloader';
import CloseIcon from '@mui/icons-material/Close';
import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
import useStorePreviousURL from 'hooks/shared/useStorePreviousUrl';

ChartJS.register(
CategoryScale,
Expand Down Expand Up @@ -190,6 +191,8 @@ interface SummaryProps {
}

export const DrugSummary: React.FC<SummaryProps> = ({ drugs, isLoading }) => {
// store the url since there are links on this page that can lead to other pages with breadcrumbs
useStorePreviousURL();
const [interactionResults, setInteractionResults] = useState<any[]>([]);
const [selectedDrugs, setSelectedDrugs] = useState<string[]>([]);
const [displayedInteractionResults, setDisplayedInteractionResults] =
Expand Down
56 changes: 53 additions & 3 deletions client/src/components/Gene/GeneRecord/GeneRecord.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// hooks/dependencies
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { useGetGeneRecord } from 'hooks/queries/useGetGeneRecord';
import Box from '@mui/material/Box';
import Accordion from '@mui/material/Accordion';
Expand All @@ -15,7 +15,13 @@ import Table from '@mui/material/Table';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';

import { Alert, LinearProgress, Link } from '@mui/material';
import {
Alert,
Breadcrumbs,
LinearProgress,
Link,
Typography,
} from '@mui/material';
import { useGetGeneInteractions } from 'hooks/queries/useGetGeneInteractions';
import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
import { dropRedundantCites } from 'utils/dropRedundantCites';
Expand Down Expand Up @@ -285,9 +291,53 @@ export const GeneRecord: React.FC = () => {
};

export const GeneRecordContainer: React.FC = () => {
const navigate = useNavigate();
const geneId: any = useParams().gene;

// get gene attributes
const { data: fetchedGeneData, isLoading: geneDataIsloading } =
useGetGeneRecord(geneId);
const geneData = fetchedGeneData?.gene;
const previousURL = sessionStorage.getItem('previousURL');

return (
<>
<GeneRecord />
{geneDataIsloading ? (
<LinearProgress
sx={{
backgroundColor: 'white',
'& .MuiLinearProgress-bar': {
backgroundColor: '#480a77',
},
}}
className="linear-bar"
/>
) : (
<>
<Breadcrumbs aria-label="breadcrumb" sx={{ marginBottom: '15px' }}>
<Link
underline="hover"
color="primary"
onClick={() => navigate('/')}
sx={{ cursor: 'pointer' }}
>
Home
</Link>
{previousURL && (
<Link
underline="hover"
color="primary"
href={previousURL}
sx={{ cursor: 'pointer' }}
>
Search Results
</Link>
)}
<Typography color="text.primary">{geneData?.name}</Typography>
</Breadcrumbs>
<GeneRecord />
</>
)}
</>
);
};
3 changes: 3 additions & 0 deletions client/src/components/Gene/GeneSummary/GeneSummary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import TabPanel from 'components/Shared/TabPanel/TabPanel';
import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import CloseIcon from '@mui/icons-material/Close';
import useStorePreviousURL from 'hooks/shared/useStorePreviousUrl';

ChartJS.register(
CategoryScale,
Expand Down Expand Up @@ -198,6 +199,8 @@ interface SummaryProps {
}

export const GeneSummary: React.FC<SummaryProps> = ({ genes, isLoading }) => {
// store the url since there are links on this page that can lead to other pages with breadcrumbs
useStorePreviousURL();
const isMobile = useGetIsMobile();
const [interactionResults, setInteractionResults] = useState<any[]>([]);
const [selectedGenes, setSelectedGenes] = useState<string[]>([]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { GlobalClientContext } from 'stores/Global/GlobalClient';
import './GeneCategoriesSearchResults.scss';
import { DirectMatches } from '../DirectMatches/DirectMatches';
import { AmbiguousMatches } from '../AmbiguousMatches/AmbiguousMatches';
import useStorePreviousURL from 'hooks/shared/useStorePreviousUrl';

interface GeneCategoriesSearchResultsProps {
value: number;
Expand All @@ -17,6 +18,8 @@ interface GeneCategoriesSearchResultsProps {
export const GeneCategoriesSearchResults: React.FC<
GeneCategoriesSearchResultsProps
> = ({ value, handleChange }) => {
// store the url since there are links on this page that can lead to other pages with breadcrumbs
useStorePreviousURL();
const { state } = useContext(GlobalClientContext);
const { data, isError, isLoading } = useGetCategories(state.searchTerms);
const directMatches = data?.geneMatches?.directMatches;
Expand Down
1 change: 0 additions & 1 deletion client/src/components/Layout/MainLayout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ body {
}

.content {
background-color: var(--background);
min-height: 75vh;
}
}
Expand Down
1 change: 0 additions & 1 deletion client/src/components/Shared/SearchBar/SearchBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { ActionTypes } from 'stores/Global/reducers';
import { useGetNameSuggestions } from 'hooks/queries/useGetNameSuggestions';
import { SearchTypes } from 'types/types';
import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
import HelpIcon from '@mui/icons-material/Help';

enum DelimiterTypes {
Comma = 'Comma',
Expand Down
18 changes: 18 additions & 0 deletions client/src/hooks/shared/useStorePreviousUrl.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

const useStorePreviousURL = () => {
const location = useLocation();
const prevLocationRef = useRef(location.pathname + location.search);

useEffect(() => {
// Store the previous URL in session storage before updating the current URL
sessionStorage.setItem('previousURL', prevLocationRef.current);
// Update the reference to the current URL
prevLocationRef.current = location.pathname + location.search;
}, [location]);

return prevLocationRef.current;
};

export default useStorePreviousURL;
3 changes: 3 additions & 0 deletions client/src/pages/Results/Results.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.results-page-container {
background-color: var(--background);
}
42 changes: 29 additions & 13 deletions client/src/pages/Results/Results.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import React, { useContext, useEffect } from 'react';
import { GlobalClientContext } from 'stores/Global/GlobalClient';
import { useSearchParams } from 'react-router-dom';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { SearchTypes } from 'types/types';
import { ActionTypes } from 'stores/Global/reducers';
import { GeneSearchResults } from 'components/Gene/GeneSearchResults/GeneSearchResults';
import { DrugSearchResults } from 'components/Drug/DrugSearchResults/DrugSearchResults';
import { GeneCategoriesSearchResults } from 'components/GeneCategories/GeneCategoriesSearchResults/GeneCategoriesSearchResults';
import { Breadcrumbs, Link, Typography } from '@mui/material';
import './Results.scss';

export const Results: React.FC = () => {
const { state, dispatch } = useContext(GlobalClientContext);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const searchTerms = searchParams.get('searchTerms')?.split(',');
const searchType = searchParams.get('searchType') as SearchTypes;
Expand Down Expand Up @@ -45,17 +48,30 @@ export const Results: React.FC = () => {
}, []);

return (
<div className="results-page-container">
{searchType === SearchTypes.Gene ? (
<GeneSearchResults value={value} handleChange={handleChange} />
) : searchType === SearchTypes.Drug ? (
<DrugSearchResults value={value} handleChange={handleChange} />
) : (
<GeneCategoriesSearchResults
value={value}
handleChange={handleChange}
/>
)}
</div>
<>
<Breadcrumbs aria-label="breadcrumb" sx={{ marginBottom: '15px' }}>
<Link
underline="hover"
color="primary"
onClick={() => navigate('/')}
sx={{ cursor: 'pointer' }}
>
Home
</Link>
<Typography color="text.primary">Search Results</Typography>
</Breadcrumbs>
<div className="results-page-container">
{searchType === SearchTypes.Gene ? (
<GeneSearchResults value={value} handleChange={handleChange} />
) : searchType === SearchTypes.Drug ? (
<DrugSearchResults value={value} handleChange={handleChange} />
) : (
<GeneCategoriesSearchResults
value={value}
handleChange={handleChange}
/>
)}
</div>
</>
);
};
4 changes: 2 additions & 2 deletions client/src/routes/public.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Results } from 'pages/Results';
import { BrowseSources } from 'components/Browse/Sources';
import { BrowseCategories } from 'components/Browse/Categories';
import { GeneRecord, GeneRecordContainer } from 'components/Gene/GeneRecord';
import { DrugRecord } from 'components/Drug/DrugRecord';
import { DrugRecord, DrugRecordContainer } from 'components/Drug/DrugRecord';

import { MainLayout } from 'components/Layout';
import { About } from 'pages/About';
Expand Down Expand Up @@ -68,7 +68,7 @@ export const Routes = () => {
},
{
path: 'drugs',
element: <DrugRecord />,
element: <DrugRecordContainer />,
children: [
{
path: ':drug',
Expand Down
Loading