Commit 739afb09 authored by Imran Salam's avatar Imran Salam
Browse files

add BrowserTabs and hide browser bar info when genome selector is on focus

parent c1ad3f69
...@@ -11,11 +11,11 @@ ...@@ -11,11 +11,11 @@
.browserImageWrapper { .browserImageWrapper {
&.semiExpanded { &.semiExpanded {
width: calc(100vw - 357px); width: calc(100vw - 356px);
} }
&.expanded { &.expanded {
width: calc(100vw - 37px); width: calc(100vw - 36px);
} }
&.collapsed { &.collapsed {
...@@ -26,3 +26,12 @@ ...@@ -26,3 +26,12 @@
} }
} }
} }
.browserOverlay {
background: $ens-white;
height: 100%;
opacity: 0.7;
position: absolute;
width: 100vw;
z-index: 150;
}
...@@ -30,7 +30,8 @@ import { ...@@ -30,7 +30,8 @@ import {
getBrowserOpenState, getBrowserOpenState,
getDrawerOpened, getDrawerOpened,
getBrowserNavOpened, getBrowserNavOpened,
getChrLocation getChrLocation,
getGenomeSelectorActive
} from './browserSelectors'; } from './browserSelectors';
import styles from './Browser.scss'; import styles from './Browser.scss';
...@@ -43,6 +44,7 @@ type StateProps = { ...@@ -43,6 +44,7 @@ type StateProps = {
browserOpenState: BrowserOpenState; browserOpenState: BrowserOpenState;
chrLocation: ChrLocation; chrLocation: ChrLocation;
drawerOpened: boolean; drawerOpened: boolean;
genomeSelectorActive: boolean;
}; };
type DispatchProps = { type DispatchProps = {
...@@ -124,6 +126,9 @@ export const Browser: FunctionComponent<BrowserProps> = ( ...@@ -124,6 +126,9 @@ export const Browser: FunctionComponent<BrowserProps> = (
return ( return (
<section className={styles.browser}> <section className={styles.browser}>
<BrowserBar changeBrowserLocation={changeBrowserLocation} /> <BrowserBar changeBrowserLocation={changeBrowserLocation} />
{props.genomeSelectorActive ? (
<div className={styles.browserOverlay} />
) : null}
<div className={styles.browserInnerWrapper}> <div className={styles.browserInnerWrapper}>
<div <div
className={`${styles.browserImageWrapper} ${ className={`${styles.browserImageWrapper} ${
...@@ -151,7 +156,8 @@ const mapStateToProps = (state: RootState): StateProps => ({ ...@@ -151,7 +156,8 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserNavOpened: getBrowserNavOpened(state), browserNavOpened: getBrowserNavOpened(state),
browserOpenState: getBrowserOpenState(state), browserOpenState: getBrowserOpenState(state),
chrLocation: getChrLocation(state), chrLocation: getChrLocation(state),
drawerOpened: getDrawerOpened(state) drawerOpened: getDrawerOpened(state),
genomeSelectorActive: getGenomeSelectorActive(state)
}); });
const mapDispatchToProps: DispatchProps = { const mapDispatchToProps: DispatchProps = {
......
...@@ -79,36 +79,3 @@ ...@@ -79,36 +79,3 @@
} }
} }
} }
.browserTabs {
@include flex;
font-size: 13px;
justify-content: space-between;
margin-left: 44px;
padding-right: 5px;
width: 312px;
button {
color: $ens-blue;
&.active {
color: inherit;
position: relative;
&::after {
border: 6px solid $ens-grey;
border-color: transparent transparent $ens-light-grey $ens-light-grey;
box-shadow: -2px 2px 2px 0 $ens-grey;
box-sizing: border-box;
content: '';
height: 0;
position: absolute;
right: calc(60% - 6px);
transform-origin: 0 0;
transform: rotate(-45deg);
top: 21px;
width: 0;
}
}
}
}
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent, Fragment } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { browserInfoConfig } from '../browserConfig'; import { browserInfoConfig } from '../browserConfig';
import { import {
toggleBrowserNav, toggleBrowserNav,
updateDefaultChrLocation, updateDefaultChrLocation,
updateChrLocation updateChrLocation,
toggleGenomeSelector
} from '../browserActions'; } from '../browserActions';
import { ChrLocation } from '../browserState'; import { ChrLocation } from '../browserState';
import { import {
getBrowserNavOpened, getBrowserNavOpened,
getChrLocation, getChrLocation,
getBrowserActivated, getBrowserActivated,
getDefaultChrLocation getDefaultChrLocation,
getGenomeSelectorActive
} from '../browserSelectors'; } from '../browserSelectors';
import { RootState } from 'src/rootReducer'; import { RootState } from 'src/rootReducer';
import BrowserReset from '../browser-reset/BrowserReset'; import BrowserReset from '../browser-reset/BrowserReset';
import BrowserGenomeSelector from '../browser-genome-selector/BrowserGenomeSelector'; import BrowserGenomeSelector from '../browser-genome-selector/BrowserGenomeSelector';
import BrowserTabs from '../browser-tabs/BrowserTabs';
import styles from './BrowserBar.scss'; import styles from './BrowserBar.scss';
...@@ -26,10 +29,12 @@ type StateProps = { ...@@ -26,10 +29,12 @@ type StateProps = {
browserNavOpened: boolean; browserNavOpened: boolean;
chrLocation: ChrLocation; chrLocation: ChrLocation;
defaultChrLocation: ChrLocation; defaultChrLocation: ChrLocation;
genomeSelectorActive: boolean;
}; };
type DispatchProps = { type DispatchProps = {
toggleBrowserNav: () => void; toggleBrowserNav: () => void;
toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
updateChrLocation: (chrLocation: ChrLocation) => void; updateChrLocation: (chrLocation: ChrLocation) => void;
updateDefaultChrLocation: (chrLocation: ChrLocation) => void; updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
}; };
...@@ -56,57 +61,55 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = ( ...@@ -56,57 +61,55 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
defaultChrLocation={props.defaultChrLocation} defaultChrLocation={props.defaultChrLocation}
updateChrLocation={props.updateChrLocation} updateChrLocation={props.updateChrLocation}
/> />
<dd className={styles.geneSymbol}> {props.genomeSelectorActive ? null : (
<label>Gene</label> <Fragment>
<span className={styles.value}>BRAC2</span> <dd className={styles.geneSymbol}>
</dd> <label>Gene</label>
<dd> <span className={styles.value}>BRAC2</span>
<label>Stable ID</label> </dd>
<span className={styles.value}>ENSG00000139618</span> <dd>
</dd> <label>Stable ID</label>
<dd className="show-for-large"> <span className={styles.value}>ENSG00000139618</span>
<label>Spliced mRNA length</label> </dd>
<span className={styles.value}>84,793</span> <dd className="show-for-large">
<label>bp</label> <label>Spliced mRNA length</label>
</dd> <span className={styles.value}>84,793</span>
<dd className="show-for-large">protein coding</dd> <label>bp</label>
<dd className="show-for-large">forward strand</dd> </dd>
<dd className="show-for-large">protein coding</dd>
<dd className="show-for-large">forward strand</dd>
</Fragment>
)}
</dl> </dl>
<dl className={styles.browserInfoRight}> <dl className={styles.browserInfoRight}>
<BrowserGenomeSelector <BrowserGenomeSelector
browserActivated={props.browserActivated} browserActivated={props.browserActivated}
changeBrowserLocation={props.changeBrowserLocation} changeBrowserLocation={props.changeBrowserLocation}
defaultChrLocation={props.defaultChrLocation} defaultChrLocation={props.defaultChrLocation}
genomeSelectorActive={props.genomeSelectorActive}
toggleGenomeSelector={props.toggleGenomeSelector}
updateDefaultChrLocation={props.updateDefaultChrLocation} updateDefaultChrLocation={props.updateDefaultChrLocation}
/> />
<dd className={styles.navigator}> {props.genomeSelectorActive ? null : (
<button <dd className={styles.navigator}>
title={navigator.description} <button
onClick={props.toggleBrowserNav} title={navigator.description}
> onClick={props.toggleBrowserNav}
<img >
src={ <img
props.browserNavOpened src={
? navigator.icon.selected props.browserNavOpened
: navigator.icon.default ? navigator.icon.selected
} : navigator.icon.default
alt={navigator.description} }
/> alt={navigator.description}
</button> />
</dd> </button>
</dd>
)}
</dl> </dl>
</div> </div>
<dl className={`${styles.browserTabs} show-for-large`}> <BrowserTabs />
<dd>
<button className={styles.active}>Genomic</button>
</dd>
<dd>
<button>Variation</button>
</dd>
<dd>
<button>Expression</button>
</dd>
</dl>
</div> </div>
); );
}; };
...@@ -115,11 +118,13 @@ const mapStateToProps = (state: RootState): StateProps => ({ ...@@ -115,11 +118,13 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserActivated: getBrowserActivated(state), browserActivated: getBrowserActivated(state),
browserNavOpened: getBrowserNavOpened(state), browserNavOpened: getBrowserNavOpened(state),
chrLocation: getChrLocation(state), chrLocation: getChrLocation(state),
defaultChrLocation: getDefaultChrLocation(state) defaultChrLocation: getDefaultChrLocation(state),
genomeSelectorActive: getGenomeSelectorActive(state)
}); });
const mapDispatchToProps: DispatchProps = { const mapDispatchToProps: DispatchProps = {
toggleBrowserNav, toggleBrowserNav,
toggleGenomeSelector,
updateChrLocation, updateChrLocation,
updateDefaultChrLocation updateDefaultChrLocation
}; };
......
...@@ -18,6 +18,8 @@ type BrowserGenomeSelectorProps = { ...@@ -18,6 +18,8 @@ type BrowserGenomeSelectorProps = {
browserActivated: boolean; browserActivated: boolean;
changeBrowserLocation: () => void; changeBrowserLocation: () => void;
defaultChrLocation: ChrLocation; defaultChrLocation: ChrLocation;
genomeSelectorActive: boolean;
toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
updateDefaultChrLocation: (chrLocation: ChrLocation) => void; updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
}; };
...@@ -25,7 +27,6 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = ( ...@@ -25,7 +27,6 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
props: BrowserGenomeSelectorProps props: BrowserGenomeSelectorProps
) => { ) => {
const chrLocationStr = getChrLocationStr(props.defaultChrLocation); const chrLocationStr = getChrLocationStr(props.defaultChrLocation);
const [showInputs, setShowInputs] = useState(false);
const [chrLocationPlaceholder, setChrLocationPlaceholder] = useState(''); const [chrLocationPlaceholder, setChrLocationPlaceholder] = useState('');
const [chrLocationInput, setChrLocationInput] = useState(''); const [chrLocationInput, setChrLocationInput] = useState('');
...@@ -38,7 +39,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = ( ...@@ -38,7 +39,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
const activateForm = () => { const activateForm = () => {
setChrLocationPlaceholder(chrLocationStr); setChrLocationPlaceholder(chrLocationStr);
setShowInputs(true); props.toggleGenomeSelector(true);
}; };
const changeChrLocationInput = (event: ChangeEvent<HTMLInputElement>) => const changeChrLocationInput = (event: ChangeEvent<HTMLInputElement>) =>
...@@ -46,7 +47,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = ( ...@@ -46,7 +47,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
const closeForm = () => { const closeForm = () => {
setChrLocationInput(''); setChrLocationInput('');
setShowInputs(false); props.toggleGenomeSelector(false);
}; };
const handleSubmit = (event: FormEvent<HTMLFormElement>) => { const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
...@@ -73,7 +74,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = ( ...@@ -73,7 +74,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
return props.browserActivated ? ( return props.browserActivated ? (
<dd className={styles.browserGenomeSelector}> <dd className={styles.browserGenomeSelector}>
{showInputs ? ( {props.genomeSelectorActive ? (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<input <input
type="text" type="text"
......
@import 'src/styles/common';
.browserTabs {
@include flex;
font-size: 13px;
justify-content: space-between;
margin-left: 44px;
padding-right: 5px;
width: 312px;
}
.browserTab {
color: $ens-blue;
}
.browserTabActive {
color: inherit;
}
.browserTabArrow {
position: relative;
&::after {
border: 6px solid $ens-grey;
border-color: transparent transparent $ens-light-grey $ens-light-grey;
box-shadow: -2px 2px 2px 0 $ens-grey;
box-sizing: border-box;
content: '';
height: 0;
position: absolute;
right: calc(60% - 6px);
transform-origin: 0 0;
transform: rotate(-45deg);
top: 21px;
width: 0;
}
}
import React, { FunctionComponent } from 'react';
import styles from './BrowserTabs.scss';
type BrowserTabsProps = {};
const BrowserTabs: FunctionComponent<BrowserTabsProps> = (
props: BrowserTabsProps
) => {
return (
<dl className={`${styles.browserTabs} show-for-large`}>
<dd>
<button className={styles.browserTabActive}>Genomic</button>
</dd>
<dd>
<button>Variation</button>
</dd>
<dd>
<button>Expression</button>
</dd>
</dl>
);
};
export default BrowserTabs;
...@@ -61,3 +61,10 @@ export const openTrackPanelModal = createAction( ...@@ -61,3 +61,10 @@ export const openTrackPanelModal = createAction(
export const closeTrackPanelModal = createAction( export const closeTrackPanelModal = createAction(
'browser/close-track-panel-modal' 'browser/close-track-panel-modal'
); );
export const toggleGenomeSelector = createAction(
'toggle-genome-selector',
(resolve) => {
return (genomeSelectorActive: boolean) => resolve(genomeSelectorActive);
}
);
...@@ -48,6 +48,8 @@ export default ( ...@@ -48,6 +48,8 @@ export default (
trackPanelModalOpened: false, trackPanelModalOpened: false,
trackPanelModalView: '' trackPanelModalView: ''
}; };
case getType(browser.toggleGenomeSelector):
return { ...state, genomeSelectorActive: action.payload };
default: default:
return state; return state;
} }
......
...@@ -37,3 +37,6 @@ export const getTrackPanelModalOpened = (state: RootState): boolean => ...@@ -37,3 +37,6 @@ export const getTrackPanelModalOpened = (state: RootState): boolean =>
export const getTrackPanelModalView = (state: RootState): string => export const getTrackPanelModalView = (state: RootState): string =>
state.browser.trackPanelModalView; state.browser.trackPanelModalView;
export const getGenomeSelectorActive = (state: RootState): boolean =>
state.browser.genomeSelectorActive;
...@@ -25,6 +25,7 @@ export type BrowserState = Readonly<{ ...@@ -25,6 +25,7 @@ export type BrowserState = Readonly<{
defaultChrLocation: ChrLocation; defaultChrLocation: ChrLocation;
drawerOpened: boolean; drawerOpened: boolean;
drawerView: string; drawerView: string;
genomeSelectorActive: boolean;
trackPanelModalOpened: boolean; trackPanelModalOpened: boolean;
trackPanelModalView: string; trackPanelModalView: string;
trackPanelOpened: boolean; trackPanelOpened: boolean;
...@@ -39,6 +40,7 @@ export const defaultState: BrowserState = { ...@@ -39,6 +40,7 @@ export const defaultState: BrowserState = {
defaultChrLocation: ['13', 0, 0], defaultChrLocation: ['13', 0, 0],
drawerOpened: false, drawerOpened: false,
drawerView: '', drawerView: '',
genomeSelectorActive: false,
trackPanelModalOpened: false, trackPanelModalOpened: false,
trackPanelModalView: '', trackPanelModalView: '',
trackPanelOpened: true trackPanelOpened: true
......
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