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

Add "Find a gene" link to GB sidebar (#767)

parent de501a96
Pipeline #293598 passed with stages
in 5 minutes and 14 seconds
......@@ -4,6 +4,7 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
......@@ -28,7 +29,6 @@
.trackPanelAccordion {
border: none;
margin-top: 30px;
}
.trackPanelAccordionHeader {
......@@ -41,6 +41,7 @@
padding: 5px 15px 5px 17px;
border-radius: 5px;
font-size: 12px;
&:before,
&:after {
margin-top: -3px;
......@@ -61,3 +62,17 @@
padding: 10px 0 20px;
}
}
.findAGene {
color: $blue;
cursor: pointer;
margin: 30px 0 20px 10px;
display: inline-flex;
align-items: center;
column-gap: 12px;
svg {
fill: $blue;
width: 13px;
}
}
......@@ -18,6 +18,8 @@ import React, { memo } from 'react';
import { useSelector } from 'react-redux';
import classNames from 'classnames';
import { useAppDispatch } from 'src/store';
import { GenomeTrackCategory } from 'src/shared/state/genome/genomeTypes';
import { FocusObjectTrack } from 'src/shared/types/focus-object/focusObjectTypes';
import {
......@@ -26,6 +28,10 @@ import {
} from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
import { getSelectedTrackPanelTab } from 'src/content/app/genome-browser/state/track-panel/trackPanelSelectors';
import { getGenomeTrackCategoriesById } from 'src/shared/state/genome/genomeSelectors';
import {
BrowserSidebarModalView,
openBrowserSidebarModal
} from 'src/content/app/genome-browser/state/browser-sidebar-modal/browserSidebarModalSlice';
import TrackPanelGene from './track-panel-items/TrackPanelGene';
import TrackPanelRegularItem from './track-panel-items/TrackPanelRegularItem';
......@@ -36,6 +42,7 @@ import {
AccordionItemButton,
AccordionItemPanel
} from 'src/shared/components/accordion';
import SearchIcon from 'static/icons/icon_search.svg';
import styles from './TrackPanelList.scss';
......@@ -44,11 +51,16 @@ export const TrackPanelList = () => {
const activeFocusObject = useSelector(getBrowserActiveFocusObject);
const selectedTrackPanelTab = useSelector(getSelectedTrackPanelTab);
const genomeTrackCategories = useSelector(getGenomeTrackCategoriesById);
const dispatch = useAppDispatch();
if (!activeGenomeId) {
return null; // will never happen, but makes typescript happy
}
const openSearch = () => {
dispatch(openBrowserSidebarModal(BrowserSidebarModalView.SEARCH));
};
const currentTrackCategories = genomeTrackCategories?.filter(
(category: GenomeTrackCategory) =>
category.types.includes(selectedTrackPanelTab)
......@@ -71,6 +83,12 @@ export const TrackPanelList = () => {
/>
</section>
) : null}
<div className={styles.findAGene} onClick={openSearch}>
<span>Find a gene</span>
<SearchIcon />
</div>
<div className={styles.accordionContainer}>
<Accordion
className={styles.trackPanelAccordion}
......
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