Unverified Commit 1e80e2e2 authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub
Browse files

Add "find a gene" link to entity viewer sidebar (#766)

parent c0bbc11c
Pipeline #293602 passed with stages
in 5 minutes and 4 seconds
......@@ -27,8 +27,8 @@
}
.geneSymbol {
font-weight: $bold;
margin-right: 10px;
font-weight: $bold;
margin-right: 10px;
}
.accordionContainer {
......@@ -36,37 +36,49 @@
.entityViewerAccordion {
border: none;
margin-top: 30px;
}
.entityViewerAccordionHeader {
background-color: $light-grey;
border-radius: 5px;
}
.entityViewerAccordionButton {
color: $blue;
padding: 5px 15px 5px 15px;
border-radius: 5px;
&:before,
&:after {
margin-top: -3px;
}
&Disabled {
color: $grey;
}
}
.entityViewerAccordionItem:not(:first-child) {
border-color: transparent;
}
.entityViewerAccordionItemContent {
background-color: transparent;
border: none;
padding: 15px;
}
}
.findAGene {
color: $blue;
cursor: pointer;
margin: 30px 0 20px 0;
display: inline-flex;
align-items: center;
column-gap: 12px;
svg {
fill: $blue;
width: 13px;
}
}
......@@ -37,6 +37,8 @@ jest.mock(
})
);
jest.mock('src/store', () => ({ useAppDispatch: jest.fn() }));
jest.mock('../publications/GenePublications', () => () => (
<div className="genePublications" />
));
......
......@@ -22,18 +22,25 @@ import { getGeneName } from 'src/shared/helpers/formatters/geneFormatter';
import useEntityViewerAnalytics from 'src/content/app/entity-viewer/hooks/useEntityViewerAnalytics';
import { useGeneOverviewQuery } from 'src/content/app/entity-viewer/state/api/entityViewerThoasSlice';
import { useAppDispatch } from 'src/store';
import GenePublications from '../publications/GenePublications';
import MainAccordion from './MainAccordion';
import ExternalReference from 'src/shared/components/external-reference/ExternalReference';
import SearchIcon from 'static/icons/icon_search.svg';
import { SidebarTabName } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice';
import {
openSidebarModal,
SidebarModalView,
SidebarTabName
} from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice';
import styles from './GeneOverview.scss';
const GeneOverview = () => {
const { entityId, genomeId } = useParams<'genomeId' | 'entityId'>();
const geneId = entityId ? parseFocusObjectIdFromUrl(entityId).objectId : null;
const dispatch = useAppDispatch();
const { trackExternalReferenceLinkClick } = useEntityViewerAnalytics();
......@@ -71,6 +78,10 @@ const GeneOverview = () => {
});
};
const openSearch = () => {
dispatch(openSidebarModal(SidebarModalView.SEARCH));
};
return (
<div className={styles.overviewContainer}>
<section>
......@@ -111,6 +122,15 @@ const GeneOverview = () => {
</div>
</section>
<section>
<div className={styles.sectionContent}>
<div className={styles.findAGene} onClick={openSearch}>
<span>Find a gene</span>
<SearchIcon />
</div>
</div>
</section>
<MainAccordion />
<GenePublications gene={gene} />
......
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