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';
.trackPanelList {
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 15px;
width: 320px;
h4 {
border-bottom: 1px solid $ens-grey;
color: $ens-grey;
font-size: 10px;
padding-bottom: 2px;
}
}
......@@ -2,9 +2,12 @@ import React, { Component } from 'react';
import TrackPanelListItem from './TrackPanelListItem';
import {
TrackPanelConfig,
TrackPanelCategory,
TrackPanelItem,
trackPanelConfig
} from '../../../configs/trackPanelConfig';
} from '../trackPanelConfig';
import styles from './TrackPanelList.scss';
type TrackPanelListProps = {
currentTrack: string;
......@@ -28,24 +31,39 @@ class TrackPanelList extends Component<TrackPanelListProps> {
public render() {
return (
<div className="track-panel-list">
<dl>
{trackPanelConfig.map((track: TrackPanelConfig) => (
<div className={styles.trackPanelList}>
<section>
<dl>
<TrackPanelListItem
key={track.id}
className={this.getTrackClass(track.name)}
track={track}
className="main"
track={trackPanelConfig.main}
changeTrack={this.changeTrack}
additionalInfo="MANE Select transcript /7"
/>
))}
</dl>
</dl>
</section>
{trackPanelConfig.categories.map((category: TrackPanelCategory) => (
<section>
<h4>{category.name}</h4>
<dl>
{category.trackList.map((track: TrackPanelItem) => (
<TrackPanelListItem
key={track.id}
className={this.getTrackClass(track.name)}
track={track}
changeTrack={this.changeTrack}
/>
))}
</dl>
</section>
))}
</div>
);
}
private getTrackClass(trackName: string): string {
if (this.props.currentTrack === trackName) {
return 'current-track';
return 'currentTrack';
} else {
return '';
}
......
@import 'src/styles/common';
.listItem {
display: flex;
font-size: 12px;
margin-left: 0;
padding: 4px 10px;
button {
margin-left: 15px;
}
img {
height: 16px;
width: 16px;
&.expandIcon {
height: 12px;
width: 12px;
}
}
&:hover,
&.currentTrack {
background: lighten($ens-blue, 40%);
}
&.main {
font-weight: $bold;
}
label {
width: calc(100% - 50px);
button {
margin-left: 0;
}
.mainText {
margin-right: 10px;
}
.additionalInfo {
color: $ens-black;
display: inline-block;
font-weight: $light;
margin-right: 10px;
}
}
.box {
border: 1px solid;
display: inline-block;
height: 11px;
margin-right: 10px;
position: relative;
top: 1px;
width: 11px;
&.blue {
background: $ens-blue;
border-color: $ens-blue;
}
&.darkGrey {
background: $ens-dark-grey;
border-color: $ens-dark-grey;
}
&.grey {
background: $ens-grey;
border-color: $ens-grey;
}
&.white {
background: $white;
}
}
}
import React, { PureComponent } from 'react';
import {
TrackPanelConfig,
trackPanelIconConfig
} from '../../../configs/trackPanelConfig';
import { TrackPanelItem, trackPanelIconConfig } from '../trackPanelConfig';
import chevronDownIcon from 'static/img/track-panel/chevron-down.svg';
import chevronUpIcon from 'static/img/track-panel/chevron-up.svg';
import styles from './TrackPanelListItem.scss';
type TrackPanelListItemProps = {
className: string;
track: TrackPanelConfig;
track: TrackPanelItem;
changeTrack: (name: string) => void;
additionalInfo?: string;
};
class TrackPanelListItem extends PureComponent<TrackPanelListItemProps> {
private expanded: boolean = false;
constructor(props: TrackPanelListItemProps) {
super(props);
......@@ -22,13 +27,31 @@ class TrackPanelListItem extends PureComponent<TrackPanelListItemProps> {
}
public render() {
const { className, track, additionalInfo } = this.props;
const listItemClass = styles[className] || '';
return (
<dt className={this.props.className}>
<label>{this.props.track.label}</label>
<dd className={`${styles.listItem} ${listItemClass}`}>
<label>
{track.color && (
<span className={`${styles.box} ${styles[track.color]}`} />
)}
<span className={styles.mainText}>{track.label}</span>
{additionalInfo && (
<span className={styles.additionalInfo}>{additionalInfo}</span>
)}
<button>
<img
className={styles.expandIcon}
src={this.expanded ? chevronUpIcon : chevronDownIcon}
alt={this.expanded ? 'collapse' : 'expand'}
/>
</button>
</label>
<button onClick={this.changeTrackHandler}>
<img
src={trackPanelIconConfig.ellipsis.icon.on}
alt={`Go to ${this.props.track.label}`}
alt={`Go to ${track.label}`}
/>
</button>
<button>
......@@ -37,7 +60,7 @@ class TrackPanelListItem extends PureComponent<TrackPanelListItemProps> {
alt={trackPanelIconConfig.ellipsis.description}
/>
</button>
</dt>
</dd>
);
}
}
......
import eyeOnIcon from 'static/img/track-panel/eye-on.svg';
import eyeOffIcon from 'static/img/track-panel/eye-off.svg';
import ellipsisOnIcon from 'static/img/track-panel/ellipsis-on.svg';
import ellipsisOffIcon from 'static/img/track-panel/ellipsis-off.svg';
enum TrackItemColour {
BLUE = 'blue',
DARK_GREY = 'darkGrey',
GREY = 'grey',
WHITE = 'white'
}
export type TrackPanelItem = {
color?: string;
id: number;
label: string;
name: string;
};
export type TrackPanelCategory = {
name: string;
trackList: TrackPanelItem[];
};
export type TrackPanelIcon = {
description: string;
icon: {
off: string;
on: string;
};
};
export type TrackPanelIcons = {
[key: string]: TrackPanelIcon;
};
export type TrackPanelConfig = {
main: TrackPanelItem;
categories: TrackPanelCategory[];
};
export const trackPanelConfig: TrackPanelConfig = {
categories: [
{
name: 'Genes & transcripts',
trackList: [
{
color: TrackItemColour.DARK_GREY,
id: 1,
label: 'Coding genes',
name: 'coding-genes'
},
{
color: TrackItemColour.GREY,
id: 2,
label: 'Non-coding-genes',
name: 'non-coding-genes'
},
{
color: TrackItemColour.WHITE,
id: 3,
label: 'Psuedogenes',
name: 'psuedogenes'
},
{
id: 4,
label: 'Gencode annotation',
name: 'gencode-annotation'
},
{
id: 5,
label: 'RefSeq',
name: 'refseq'
},
{
id: 6,
label: 'RNASeq',
name: 'rnaseq'
}
]
},
{
name: 'Assembly',
trackList: [
{
id: 101,
label: 'Assembly exceptions',
name: 'assembly-exceptions'
},
{
id: 102,
label: 'Repeat regions',
name: 'repeat-regions'
},
{
id: 103,
label: 'Encoding regions',
name: 'encoding-regions'
},
{
id: 104,
label: 'Contigs',
name: 'contigs'
},
{
id: 105,
label: 'Tilepath',
name: 'tilepath'
},
{
id: 106,
label: 'ABC libraries',
name: 'abc-libraries'
}
]
},
{
name: 'Experiment design',
trackList: [
{
id: 201,
label: 'Markers',
name: 'markers'
},
{
id: 202,
label: 'Oligo probes',
name: 'oligo-probes'
}
]
}
],
main: {
color: TrackItemColour.BLUE,
id: 0,
label: 'BRCA2-201',
name: 'main'
}
};
export const trackPanelIconConfig: TrackPanelIcons = {
ellipsis: {
description: 'open track',
icon: {
off: ellipsisOffIcon,
on: ellipsisOnIcon
}
},
eye: {
description: 'enable/disable track',
icon: {
off: eyeOffIcon,
on: eyeOnIcon
}
}
};
export const assetsUrl = '/assets';
export const assetsUrl = '/static';
export const imgBaseUrl = `${assetsUrl}/img`;
@import 'src/styles/common';
.topBar {
@include top-bar-container;
@include top-bar-unstack;
color: $white;
padding: 2px 20px;
}
.companyText {
display: inline-block;
font-size: 14px;
font-weight: $global-weight-bold;
}
.strapline,
.copyright {
display: none;
font-size: 11px;
margin-left: 30px;
@include breakpoint(960px) {
display: inline-block;
}
}
......@@ -3,9 +3,9 @@ import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Header from './Header';
import Account from './Account';
import Account from './account/Account';
import LaunchbarContainer from './launchbar/LaunchbarContainer';
import Nav from './Nav';
import HeaderButtons from './header-buttons/HeaderButtons';
describe('<Header />', () => {
let wrapper: any;
......@@ -16,12 +16,12 @@ describe('<Header />', () => {
describe('displays', () => {
test('Ensembl', () => {
expect(wrapper.find('.logo').text()).toBe('Ensembl');
expect(wrapper.find('.companyText').text()).toBe('Ensembl');
});
test('strapline', () => {
expect(wrapper.find('.strapline').text()).toBe(
'genome research database'
'Pre-release - March 2019'
);
});
});
......@@ -35,8 +35,8 @@ describe('<Header />', () => {
expect(wrapper.contains(<LaunchbarContainer />)).toBe(true);
});
test('Nav', () => {
expect(wrapper.contains(<Nav />)).toBe(true);
test('HeaderButtons', () => {
expect(wrapper.contains(<HeaderButtons />)).toBe(true);
});
});
......
import React, { memo, FunctionComponent } from 'react';
import HeaderButtons from './header-buttons/HeaderButtons';
import LaunchbarContainer from './launchbar/LaunchbarContainer';
import Account from './account/Account';
import styles from './Header.scss';
type HeaderProps = {};
const Header: FunctionComponent<HeaderProps> = memo(() => (
<header>
<div className={styles.topBar}>
<div>
<div className={styles.companyText}>Ensembl</div>
<div className={styles.strapline}>Pre-release - March 2019</div>
<div className={styles.copyright}>
<a href="https://www.ebi.ac.uk">&copy; EMBL-EBI</a>
</div>
</div>
<HeaderButtons />
</div>
<Account />
<LaunchbarContainer />
</header>
));
export default Header;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Header /> renders correctly 1`] = `undefined`;
@import 'src/styles/common';
.account {
border-bottom: 1px solid $ens-medium-grey;
height: 300px;
@include flex;
@include flex-align(center, middle);
h2 {
color: $ens-grey;
text-align: center;
}
}
......@@ -2,8 +2,10 @@ import React, { Component, ReactNode } from 'react';
import SlideDown from 'react-slidedown';
import { connect } from 'react-redux';
import { RootState } from '../../../reducers';
import { getAccountExpanded } from '../../../selectors/headerSelectors';
import { RootState } from 'src/rootReducer';
import { getAccountExpanded } from '../headerSelectors';
import styles from './Account.scss';
type StateProps = {
accountExpanded: boolean;
......@@ -16,7 +18,7 @@ type AccountProps = StateProps & OwnProps;
export class Account extends Component<AccountProps> {
public render() {
const AccountChildren: ReactNode = (
<div className="account">
<div className={styles.account}>
<h2>Account area placeholder</h2>
</div>
);
......
......@@ -2,9 +2,7 @@
exports[`<Account /> renders correctly 1`] = `
<ForwardRef>
<div
className="account"
>
<div>
<h2>
Account area placeholder
</h2>
......
.headerButtons {
button {
bottom: 1px;
display: inline-block;
height: 17px;
margin-left: 20px;
position: relative;
width: 17px;
vertical-align: middle;
}
}
......@@ -2,18 +2,21 @@ import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { Nav } from './Nav';
import { HeaderButtons } from './HeaderButtons';
describe('<Nav />', () => {
let launchbarFn: () => void;
let accountFn: () => void;
describe('<HeaderButtons />', () => {
let toggleLaunchbarFn: () => void;
let toggleAccountFn: () => void;
let wrapper: any;
beforeEach(() => {