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 @@
.browserImageWrapper {
&.semiExpanded {
width: calc(100vw - 357px);
width: calc(100vw - 356px);
}
&.expanded {
width: calc(100vw - 37px);
width: calc(100vw - 36px);
}
&.collapsed {
......@@ -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 {
getBrowserOpenState,
getDrawerOpened,
getBrowserNavOpened,
getChrLocation
getChrLocation,
getGenomeSelectorActive
} from './browserSelectors';
import styles from './Browser.scss';
......@@ -43,6 +44,7 @@ type StateProps = {
browserOpenState: BrowserOpenState;
chrLocation: ChrLocation;
drawerOpened: boolean;
genomeSelectorActive: boolean;
};
type DispatchProps = {
......@@ -124,6 +126,9 @@ export const Browser: FunctionComponent<BrowserProps> = (
return (
<section className={styles.browser}>
<BrowserBar changeBrowserLocation={changeBrowserLocation} />
{props.genomeSelectorActive ? (
<div className={styles.browserOverlay} />
) : null}
<div className={styles.browserInnerWrapper}>
<div
className={`${styles.browserImageWrapper} ${
......@@ -151,7 +156,8 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserNavOpened: getBrowserNavOpened(state),
browserOpenState: getBrowserOpenState(state),
chrLocation: getChrLocation(state),
drawerOpened: getDrawerOpened(state)
drawerOpened: getDrawerOpened(state),
genomeSelectorActive: getGenomeSelectorActive(state)
});
const mapDispatchToProps: DispatchProps = {
......
......@@ -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 { browserInfoConfig } from '../browserConfig';
import {
toggleBrowserNav,
updateDefaultChrLocation,
updateChrLocation
updateChrLocation,
toggleGenomeSelector
} from '../browserActions';
import { ChrLocation } from '../browserState';
import {
getBrowserNavOpened,
getChrLocation,
getBrowserActivated,
getDefaultChrLocation
getDefaultChrLocation,
getGenomeSelectorActive
} from '../browserSelectors';
import { RootState } from 'src/rootReducer';
import BrowserReset from '../browser-reset/BrowserReset';
import BrowserGenomeSelector from '../browser-genome-selector/BrowserGenomeSelector';
import BrowserTabs from '../browser-tabs/BrowserTabs';
import styles from './BrowserBar.scss';
......@@ -26,10 +29,12 @@ type StateProps = {
browserNavOpened: boolean;
chrLocation: ChrLocation;
defaultChrLocation: ChrLocation;
genomeSelectorActive: boolean;
};
type DispatchProps = {
toggleBrowserNav: () => void;
toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
updateChrLocation: (chrLocation: ChrLocation) => void;
updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
};
......@@ -56,57 +61,55 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
defaultChrLocation={props.defaultChrLocation}
updateChrLocation={props.updateChrLocation}
/>
<dd className={styles.geneSymbol}>
<label>Gene</label>
<span className={styles.value}>BRAC2</span>
</dd>
<dd>
<label>Stable ID</label>
<span className={styles.value}>ENSG00000139618</span>
</dd>
<dd className="show-for-large">
<label>Spliced mRNA length</label>
<span className={styles.value}>84,793</span>
<label>bp</label>
</dd>
<dd className="show-for-large">protein coding</dd>
<dd className="show-for-large">forward strand</dd>
{props.genomeSelectorActive ? null : (
<Fragment>
<dd className={styles.geneSymbol}>
<label>Gene</label>
<span className={styles.value}>BRAC2</span>
</dd>
<dd>
<label>Stable ID</label>
<span className={styles.value}>ENSG00000139618</span>
</dd>
<dd className="show-for-large">
<label>Spliced mRNA length</label>
<span className={styles.value}>84,793</span>
<label>bp</label>
</dd>
<dd className="show-for-large">protein coding</dd>
<dd className="show-for-large">forward strand</dd>
</Fragment>
)}
</dl>
<dl className={styles.browserInfoRight}>
<BrowserGenomeSelector
browserActivated={props.browserActivated}
changeBrowserLocation={props.changeBrowserLocation}
defaultChrLocation={props.defaultChrLocation}
genomeSelectorActive={props.genomeSelectorActive}
toggleGenomeSelector={props.toggleGenomeSelector}
updateDefaultChrLocation={props.updateDefaultChrLocation}
/>
<dd className={styles.navigator}>
<button
title={navigator.description}
onClick={props.toggleBrowserNav}
>
<img
src={
props.browserNavOpened
? navigator.icon.selected
: navigator.icon.default
}
alt={navigator.description}
/>
</button>
</dd>
{props.genomeSelectorActive ? null : (
<dd className={styles.navigator}>
<button
title={navigator.description}
onClick={props.toggleBrowserNav}
>
<img
src={
props.browserNavOpened
? navigator.icon.selected
: navigator.icon.default
}
alt={navigator.description}
/>
</button>
</dd>
)}
</dl>
</div>
<dl className={`${styles.browserTabs} show-for-large`}>
<dd>
<button className={styles.active}>Genomic</button>
</dd>
<dd>
<button>Variation</button>
</dd>
<dd>
<button>Expression</button>
</dd>
</dl>
<BrowserTabs />
</div>
);
};
......@@ -115,11 +118,13 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserActivated: getBrowserActivated(state),
browserNavOpened: getBrowserNavOpened(state),
chrLocation: getChrLocation(state),
defaultChrLocation: getDefaultChrLocation(state)
defaultChrLocation: getDefaultChrLocation(state),
genomeSelectorActive: getGenomeSelectorActive(state)
});
const mapDispatchToProps: DispatchProps = {
toggleBrowserNav,
toggleGenomeSelector,
updateChrLocation,
updateDefaultChrLocation
};
......
......@@ -18,6 +18,8 @@ type BrowserGenomeSelectorProps = {
browserActivated: boolean;
changeBrowserLocation: () => void;
defaultChrLocation: ChrLocation;
genomeSelectorActive: boolean;
toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
};
......@@ -25,7 +27,6 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
props: BrowserGenomeSelectorProps
) => {
const chrLocationStr = getChrLocationStr(props.defaultChrLocation);
const [showInputs, setShowInputs] = useState(false);
const [chrLocationPlaceholder, setChrLocationPlaceholder] = useState('');
const [chrLocationInput, setChrLocationInput] = useState('');
......@@ -38,7 +39,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
const activateForm = () => {
setChrLocationPlaceholder(chrLocationStr);
setShowInputs(true);
props.toggleGenomeSelector(true);
};
const changeChrLocationInput = (event: ChangeEvent<HTMLInputElement>) =>
......@@ -46,7 +47,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
const closeForm = () => {
setChrLocationInput('');
setShowInputs(false);
props.toggleGenomeSelector(false);
};
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
......@@ -73,7 +74,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
return props.browserActivated ? (
<dd className={styles.browserGenomeSelector}>
{showInputs ? (
{props.genomeSelectorActive ? (
<form onSubmit={handleSubmit}>
<input
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(
export const closeTrackPanelModal = createAction(
'browser/close-track-panel-modal'
);
export const toggleGenomeSelector = createAction(
'toggle-genome-selector',
(resolve) => {
return (genomeSelectorActive: boolean) => resolve(genomeSelectorActive);
}
);
......@@ -48,6 +48,8 @@ export default (
trackPanelModalOpened: false,
trackPanelModalView: ''
};
case getType(browser.toggleGenomeSelector):
return { ...state, genomeSelectorActive: action.payload };
default:
return state;
}
......
......@@ -37,3 +37,6 @@ export const getTrackPanelModalOpened = (state: RootState): boolean =>
export const getTrackPanelModalView = (state: RootState): string =>
state.browser.trackPanelModalView;
export const getGenomeSelectorActive = (state: RootState): boolean =>
state.browser.genomeSelectorActive;
......@@ -25,6 +25,7 @@ export type BrowserState = Readonly<{
defaultChrLocation: ChrLocation;
drawerOpened: boolean;
drawerView: string;
genomeSelectorActive: boolean;
trackPanelModalOpened: boolean;
trackPanelModalView: string;
trackPanelOpened: boolean;
......@@ -39,6 +40,7 @@ export const defaultState: BrowserState = {
defaultChrLocation: ['13', 0, 0],
drawerOpened: false,
drawerView: '',
genomeSelectorActive: false,
trackPanelModalOpened: false,
trackPanelModalView: '',
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