Commit defa56c4 authored by Imran Salam's avatar Imran Salam
Browse files

refactor the code after git repo integration

parent 45cbcdf8
@import 'src/styles/common';
.browser {
width: 100%;
}
.browserInnerWrapper {
@include flex;
}
.browserImageWrapper {
&.semiExpanded {
width: calc(100vw - 356px);
}
&.expanded {
width: calc(100vw - 36px);
}
&.collapsed {
width: 41px;
.browserImage {
display: none;
}
}
}
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { Browser } from './Browser';
import { BrowserOpenState } from './browserState';
describe('<Browser />', () => {
let closeDrawerFn: () => void;
let toggleBrowserNavFn: () => void;
let wrapper: any;
beforeEach(() => {
closeDrawerFn = jest.fn();
toggleBrowserNavFn = jest.fn();
wrapper = shallow(
<Browser
browserNavOpened={true}
browserOpenState={BrowserOpenState.SEMI_EXPANDED}
closeDrawer={closeDrawerFn}
drawerOpened={false}
toggleBrowserNav={toggleBrowserNavFn}
/>
);
});
test('renders correctly', () => {
expect(toJson(wrapper)).toMatchSnapshot();
});
});
......@@ -2,23 +2,24 @@ import React, { Component } from 'react';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import BrowserHeaderBar from './BrowserHeaderBar';
import BrowserImage from './BrowserImage';
import BrowserInfoBar from './BrowserInfoBar';
import BrowserNavBar from './BrowserNavBar';
import TrackPanel from '../../layout/track-panel/TrackPanel';
import Track from '../../tracks/Track';
import BrowserBar from './browser-bar/BrowserBar';
import BrowserImage from './browser-image/BrowserImage';
import BrowserNavBar from './browser-nav/BrowserNavBar';
import TrackPanel from './track-panel/TrackPanel';
import Drawer from './drawer/Drawer';
import { RootState } from '../../../reducers';
import { BrowserOpenState } from '../../../reducers/browserReducer';
import { closeDrawer, toggleBrowserNav } from '../../../actions/browserActions';
import { RootState } from 'src/rootReducer';
import { BrowserOpenState } from './browserState';
import { closeDrawer, toggleBrowserNav } from './browserActions';
import {
getBrowserOpenState,
getDrawerOpened,
getBrowserNavOpened
} from '../../../selectors/browserSelectors';
} from './browserSelectors';
import 'assets/browser/browser';
import 'static/browser/browser';
import styles from './Browser.scss';
type BrowserProps = {
browserNavOpened: boolean;
......@@ -45,23 +46,24 @@ export class Browser extends Component<BrowserProps> {
public render() {
return (
<section className="browser">
<BrowserHeaderBar />
<div className="browser-inner-wrapper">
<section className={styles.browser}>
<BrowserBar
browserNavOpened={this.props.browserNavOpened}
expanded={true}
toggleBrowserNav={this.props.toggleBrowserNav}
/>
<div className={styles.browserInnerWrapper}>
<div
className={`browser-image-wrapper ${this.props.browserOpenState}`}
className={`${styles.browserImageWrapper} ${
styles[this.props.browserOpenState]
}`}
onClick={this.closeTrack}
>
<BrowserInfoBar
browserNavOpened={this.props.browserNavOpened}
expanded={true}
toggleBrowserNav={this.props.toggleBrowserNav}
/>
{this.props.browserNavOpened && <BrowserNavBar />}
<BrowserImage />
</div>
<TrackPanel />
{this.props.drawerOpened && <Track />}
{this.props.drawerOpened && <Drawer />}
</div>
</section>
);
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Browser /> renders correctly 1`] = `
<section
className="browser"
>
<React.Memo
browserNavOpened={true}
expanded={true}
toggleBrowserNav={[MockFunction]}
/>
<div
className="browserInnerWrapper"
>
<div
className="browserImageWrapper semiExpanded"
onClick={[Function]}
>
<BrowserNavBar />
<BrowserImage />
</div>
<Connect(TrackPanel) />
</div>
</section>
`;
......@@ -22,6 +22,11 @@ Array [
"payload": undefined,
"type": "browser/close-drawer",
},
Object {
"meta": undefined,
"payload": undefined,
"type": "browser/toggle-browser-navigation",
},
Object {
"meta": undefined,
"payload": "track-1",
......
@import 'src/styles/common';
.browserBar {
@include flex;
background: $ens-light-grey;
box-shadow: 0 2px 3px $ens-grey;
padding: 7px 0 3px 0;
position: relative;
dd {
display: inline-block;
margin: 0 18px;
}
button {
&.selected {
background: $ens-white;
}
}
}
.browserInfo {
@include flex;
flex-wrap: nowrap;
font-size: 12px;
margin: 0;
width: calc(100vw - 356px);
label {
color: #555;
font-weight: $light;
}
.value {
color: $ens-black;
margin: 0 3px;
}
dd {
margin-right: 10px;
white-space: nowrap;
}
dl {
overflow: hidden;
&.browserInfoLeft {
flex: 1 1 auto;
}
&.browserInfoRight {
flex: 0 1 auto;
text-align: right;
}
.geneSymbol {
margin-left: 14px;
.value {
font-size: 13px;
font-weight: $bold;
}
}
}
.resetButton {
position: relative;
top: -2px;
img {
height: 16px;
width: 16px;
}
}
.navigator {
margin: 0 10px 0 0;
position: relative;
top: -2px;
img {
height: 22px;
width: 22px;
}
}
}
.browserTabs {
@include flex;
font-size: 13px;
justify-content: flex-end;
padding-right: 5px;
width: 356px;
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 from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import BrowserBar from './BrowserBar';
describe('<BrowserBar />', () => {
let toggleBrowserNavFn: () => void;
let wrapper: any;
beforeEach(() => {
toggleBrowserNavFn = jest.fn();
wrapper = shallow(
<BrowserBar
browserNavOpened={true}
expanded={true}
toggleBrowserNav={toggleBrowserNavFn}
/>
);
});
test('has a left bar', () => {
expect(wrapper.find('.browserInfoLeft')).toHaveLength(1);
});
test('has a right bar', () => {
expect(wrapper.find('.browserInfoRight')).toHaveLength(1);
});
test('renders correctly', () => {
expect(toJson(wrapper)).toMatchSnapshot();
});
});
import React, { FunctionComponent, memo } from 'react';
import ContentEditable from 'react-contenteditable';
import { browserInfoConfig } from '../browserConfig';
import styles from './BrowserBar.scss';
type BrowserBarProps = {
browserNavOpened: boolean;
expanded: boolean;
toggleBrowserNav: () => void;
};
const BrowserBar: FunctionComponent<BrowserBarProps> = memo(
(props: BrowserBarProps) => {
const { navigator, reset } = browserInfoConfig;
return (
<div className={styles.browserBar}>
<div className={styles.browserInfo}>
<dl className={styles.browserInfoLeft}>
<dd className={styles.resetButton}>
<button>
<img src={reset.icon.default} alt={reset.description} />
</button>
</dd>
<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>
<label>Spliced mRNA length</label>
<span className={styles.value}>84,793</span>
<label>bp</label>
</dd>
<dd>protein coding</dd>
<dd>forward strand</dd>
</dl>
<dl className={styles.browserInfoRight}>
<dd>
<label>Chromosome</label>
<ContentEditable html={'13'} className="content-editable-box" />
<ContentEditable html={'32,315,474 - 32,400,266'} />
</dd>
<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}>
<dd>
<button className={styles.active}>Key Data</button>
</dd>
<dd>
<button>Variation</button>
</dd>
<dd>
<button>Expression</button>
</dd>
</dl>
</div>
);
}
);
export default BrowserBar;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BrowserBar /> renders correctly 1`] = `undefined`;
import React from 'react';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import BrowserImage from './BrowserImage';
describe('<BrowserImage />', () => {
let wrapper: any;
beforeEach(() => {
wrapper = mount(<BrowserImage />);
});
test('renders correctly', () => {
expect(toJson(wrapper)).toMatchSnapshot();
});
});
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BrowserImage /> renders correctly 1`] = `
<BrowserImage>
<div
className="browser-stage"
/>
</BrowserImage>
`;
@import 'src/styles/common';
.browserNavBar {
@include flex;
justify-content: flex-end;
padding: 10px;
width: calc(100vw - 356px);
}
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import BrowserNavBar from './BrowserNavBar';
describe('<BrowserNavBar />', () => {
let wrapper: any;
beforeEach(() => {
wrapper = shallow(<BrowserNavBar />);
});
test('renders correctly', () => {
expect(toJson(wrapper)).toMatchSnapshot();
});
});
import React, { Component } from 'react';
import {
browserNavConfig,
BrowserNavItem
} from '../../../configs/browserConfig';
import { browserNavConfig, BrowserNavItem } from '../browserConfig';
import BrowserNavIcon from './BrowserNavIcon';
import styles from './BrowserNavBar.scss';
type BrowserNavBarProps = {};
class BrowserNavBar extends Component<BrowserNavBarProps> {
public render() {
return (
<div className="browser-nav-bar">
<div className={styles.browserNavBar}>
<dl>
{browserNavConfig.map((item: BrowserNavItem) => (
<BrowserNavIcon key={item.name} browserNavItem={item} />
......
.browserNavIcon {
display: inline-block;
margin-left: 10px;
button {
& > img {
height: 25px;
width: 25px;
}
}
}
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import BrowserNavIcon from './BrowserNavIcon';
import { browserNavConfig } from '../browserConfig';
describe('<BrowserNavIcon />', () => {
const browserNavItem = browserNavConfig[0];
let wrapper: any;
beforeEach(() => {
wrapper = shallow(<BrowserNavIcon browserNavItem={browserNavItem} />);
});
test('renders correctly', () => {
expect(toJson(wrapper)).toMatchSnapshot();
});
});
import React, { PureComponent } from 'react';
import { BrowserNavItem } from '../../../configs/browserConfig';
import { BrowserNavItem } from '../browserConfig';
import styles from './BrowserNavIcon.scss';
type BrowserNavIconProps = {
browserNavItem: BrowserNavItem;
......@@ -17,14 +19,14 @@ class BrowserNavIcon extends PureComponent<BrowserNavIconProps> {
const { browserNavItem } = this.props;
return (
<dt>
<dd className={styles.browserNavIcon}>
<button
title={browserNavItem.description}
onClick={this.navigateBrowser}
>
<img src={browserNavItem.icon.on} alt={browserNavItem.description} />
</button>
</dt>
</dd>
);
}
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<BrowserNavBar /> renders correctly 1`] = `
<div
className="browserNavBar"
>
<dl>
<BrowserNavIcon
browserNavItem={
Object {
"description": "navigate up",
"detail": Object {
"move_up_px": 50,
},
"icon": Object {
"off": Object {},
"on": Object {},
},
"name": "navigate-up",
}
}
key="navigate-up"
/>
<BrowserNavIcon
browserNavItem={