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

refactor the code after git repo integration

parent 45cbcdf8
...@@ -11,6 +11,7 @@ coverage/ ...@@ -11,6 +11,7 @@ coverage/
.DS_Store .DS_Store
package-lock.json package-lock.json
bundle-report.html
localhost.crt localhost.crt
localhost.key localhost.key
#!/usr/bin/env python3
import os
import shlex
import sys
import tempfile
import sh
def _get_commits(fname):
# Ask for the commit and the timestamp
# .. the timestamp doesn't guarantee ordering, but good enough
for c in sh.git('log', '--follow', '--pretty=%ct %h', fname,
_tty_out=False, _iter=True):
c = c.strip().split()
yield int(c[0]), c[1]
def git_log_follow_multi(filenames):
if len(filenames) == 0:
print("Specify at least one file to log")
elif len(filenames) <= 1:
os.system('git log --follow -p %s' % filenames[0])
else:
# Use git log to generate lists of commits for each file, sort
commits = []
for fname in filenames:
commits += _get_commits(fname)
# Sort the lists (python's sort is stable)
commits.sort(reverse=True)
# Uniquify (http://www.peterbe.com/plog/uniqifiers-benchmark)
seen = set()
seen_add = seen.add
commits = [c for c in commits if not (c in seen or seen_add(c))]
# Finally, display them
tname = None
try:
file_list = ' '.join(shlex.quote(fname) for fname in filenames)
with tempfile.NamedTemporaryFile(mode='w', delete=False) as fp:
tname = fp.name
for _, commit in commits:
fp.write('git log -p -1 --color %s %s\n' % (commit, file_list))
# Use os.system to make our lives easier
os.system('bash %s | less -FRX' % tname)
finally:
if tname:
os.unlink(tname)
if __name__ == '__main__':
git_log_follow_multi(sys.argv[1:])
loglevel=silent
\ No newline at end of file
{
"typescript.tsdk": "node_modules/typescript/lib"
}
\ No newline at end of file
...@@ -13,7 +13,8 @@ module.exports = { ...@@ -13,7 +13,8 @@ module.exports = {
'react-hot-loader/babel', 'react-hot-loader/babel',
'@babel/plugin-syntax-dynamic-import', '@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-class-properties' '@babel/plugin-proposal-class-properties',
'babel-plugin-react-css-modules-sass'
], ],
env: { env: {
test: { test: {
......
const execSync = require('child_process').execSync; const execSync = require('child_process').execSync;
const machine = process.argv[2] || 'amaster'; const machine = process.argv[2] || 'amaster';
execSync(`rsync -avz -e 'ssh' ./dist ${machine}:/homes/ens_adm02/ensembl-2020/`, {stdio:[0,1,2]}); execSync(
`rsync -avz -e 'ssh' ./dist ${machine}:/homes/ens_adm02/ensembl-2020/`,
{ stdio: [0, 1, 2] }
);
module.exports = { module.exports = {
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
moduleNameMapper: { moduleNameMapper: {
'(assets/.*)$': '<rootDir>/$1' '(src/.*)$': '<rootDir>/$1',
'(static/.*)$': '<rootDir>/$1',
'(static/browser/.*)$': '<rootDir>/$1.stub.js',
'\\.(css|scss)$': 'identity-obj-proxy'
}, },
preset: 'ts-jest', preset: 'ts-jest',
roots: ['<rootDir>/src'], roots: ['<rootDir>/src'],
setupFiles: ['<rootDir>/setup-jest.ts'],
setupTestFrameworkScriptFile: '<rootDir>/setup-enzyme.ts', setupTestFrameworkScriptFile: '<rootDir>/setup-enzyme.ts',
snapshotSerializers: ['enzyme-to-json/serializer'], snapshotSerializers: ['enzyme-to-json/serializer'],
testEnvironment: 'jsdom', testEnvironment: 'jsdom',
......
...@@ -14,10 +14,9 @@ ...@@ -14,10 +14,9 @@
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"start": "npm run serve:dev", "start": "npm run serve:dev",
"serve:dev": "webpack-dev-server --config ./webpack/webpack.config.dev.js", "serve:dev": "webpack-dev-server --config ./webpack/webpack.config.dev.js --hot --inline",
"serve:prod": "node ./server.js --NODE_ENV=production", "serve:prod": "node ./server.js --NODE_ENV=production",
"build": "rimraf ./dist && webpack --config ./webpack/webpack.config.prod.js", "build": "rimraf ./dist && webpack --config ./webpack/webpack.config.prod.js",
"script-build": "rimraf ./dist && webpack --env.RUN_FROM_SCRIPT=1 --config ./webpack/webpack.config.prod.js",
"deploy": "node deploy", "deploy": "node deploy",
"certify": "node setup-ssl", "certify": "node setup-ssl",
"lint": "npm run lint:scripts && npm run lint:styles", "lint": "npm run lint:scripts && npm run lint:styles",
...@@ -41,19 +40,19 @@ ...@@ -41,19 +40,19 @@
} }
}, },
"dependencies": { "dependencies": {
"foundation-sites": "^6.5.1", "foundation-sites": "^6.5.3",
"history": "^4.7.2", "history": "^4.7.2",
"react": "^16.7.0", "react": "^16.7.0",
"react-contenteditable": "^3.2.4", "react-contenteditable": "^3.2.6",
"react-dom": "^16.7.0", "react-dom": "^16.7.0",
"react-hot-loader": "^4.6.3", "react-hot-loader": "^4.6.5",
"react-loadable": "^5.5.0", "react-loadable": "^5.5.0",
"react-redux": "^5.1.1", "react-redux": "^5.1.1",
"react-router": "^4.3.1", "react-router": "^4.3.1",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-slidedown": "^2.0.5", "react-slidedown": "^2.0.7",
"redux": "^4.0.1", "redux": "^4.0.1",
"redux-devtools-extension": "^2.13.7", "redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"reselect": "^4.0.0", "reselect": "^4.0.0",
"typesafe-actions": "^2.2.0", "typesafe-actions": "^2.2.0",
...@@ -61,70 +60,76 @@ ...@@ -61,70 +60,76 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.2.2", "@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3", "@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0", "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
"@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-modules-commonjs": "^7.2.0", "@babel/plugin-transform-modules-commonjs": "^7.2.0",
"@babel/preset-env": "^7.2.3", "@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.1.0", "@babel/preset-typescript": "^7.1.0",
"@types/enzyme": "^3.1.15", "@types/enzyme": "^3.1.16",
"@types/enzyme-adapter-react-16": "^1.0.3", "@types/enzyme-adapter-react-16": "^1.0.3",
"@types/jest": "^23.3.11", "@types/jest": "^23.3.13",
"@types/node": "^10.12.21",
"@types/prettier": "^1.15.2", "@types/prettier": "^1.15.2",
"@types/react": "^16.7.18", "@types/react": "^16.8.1",
"@types/react-dom": "^16.0.11", "@types/react-dom": "^16.0.11",
"@types/react-loadable": "^5.4.3", "@types/react-loadable": "^5.5.0",
"@types/react-redux": "^6.0.11", "@types/react-redux": "^6.0.13",
"@types/react-router-dom": "^4.3.1", "@types/react-router-dom": "^4.3.1",
"@types/react-router-hash-link": "^1.2.0", "@types/react-router-hash-link": "^1.2.0",
"@types/redux-mock-store": "^1.0.0", "@types/redux-mock-store": "^1.0.0",
"@types/reselect": "^2.2.0", "@types/reselect": "^2.2.0",
"acorn": "^6.0.7",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.4", "babel-loader": "^8.0.5",
"brotli-webpack-plugin": "^1.0.0", "babel-plugin-react-css-modules-sass": "^1.1.0",
"connect-history-api-fallback": "^1.5.0", "brotli-webpack-plugin": "^1.1.0",
"connect-history-api-fallback": "^1.6.0",
"copy-webpack-plugin": "^4.6.0", "copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.1", "css-loader": "^1.0.1",
"enzyme": "^3.8.0", "enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1", "enzyme-adapter-react-16": "^1.8.0",
"enzyme-to-json": "^3.3.5", "enzyme-to-json": "^3.3.5",
"file-loader": "^1.1.11", "file-loader": "^1.1.11",
"fork-ts-checker-webpack-plugin": "^0.4.15", "fork-ts-checker-webpack-plugin": "^0.4.15",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"husky": "^1.3.1", "husky": "^1.3.1",
"identity-obj-proxy": "^3.0.0",
"image-webpack-loader": "^4.6.0", "image-webpack-loader": "^4.6.0",
"jest": "^23.6.0", "jest": "^23.6.0",
"jest-fetch-mock": "^2.1.0", "jest-fetch-mock": "^2.1.0",
"jest-snapshot": "^23.6.0", "jest-snapshot": "^23.6.0",
"jest-transform-stub": "^1.0.0", "jest-transform-stub": "^1.0.0",
"koa": "^2.6.2", "koa": "^2.7.0",
"koa-connect": "^2.0.1", "koa-connect": "^2.0.1",
"koa-static": "^5.0.0", "koa-static": "^5.0.0",
"lint-staged": "^7.3.0", "lint-staged": "^7.3.0",
"mini-css-extract-plugin": "^0.4.5", "mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.11.0", "node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"postcss-preset-env": "^5.3.0", "postcss-preset-env": "^5.3.0",
"prettier": "^1.15.3", "prettier": "^1.16.4",
"redux-mock-store": "^1.5.3", "redux-mock-store": "^1.5.3",
"rimraf": "^2.6.2", "rimraf": "^2.6.3",
"robotstxt-webpack-plugin": "^4.0.1", "robotstxt-webpack-plugin": "^4.0.1",
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4", "source-map-loader": "^0.2.4",
"style-loader": "^0.21.0", "style-loader": "^0.21.0",
"stylelint": "^9.10.1", "stylelint": "^8.4.0",
"stylelint-config-recommended-scss": "^3.2.0", "stylelint-config-recommended-scss": "^3.2.0",
"stylelint-scss": "^3.4.4", "stylelint-scss": "^3.5.2",
"stylelint-webpack-plugin": "^0.10.5", "stylelint-webpack-plugin": "^0.10.5",
"ts-jest": "^23.10.5", "ts-jest": "^23.10.5",
"tslint": "^5.12.0", "tslint": "^5.12.1",
"tslint-config-prettier": "^1.17.0", "tslint-config-prettier": "^1.18.0",
"tslint-react": "^3.6.0", "tslint-react": "^3.6.0",
"typescript": "^3.2.2", "typescript": "^3.3.1",
"webpack": "^4.28.0", "uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.29.0",
"webpack-bundle-analyzer": "^2.13.1", "webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.2", "webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14", "webpack-dev-server": "^3.1.14",
"webpack-manifest-plugin": "^2.0.4", "webpack-manifest-plugin": "^2.0.4",
"workbox-webpack-plugin": "^3.6.3" "workbox-webpack-plugin": "^3.6.3"
......
...@@ -10,7 +10,7 @@ const convert = require('koa-connect'); ...@@ -10,7 +10,7 @@ const convert = require('koa-connect');
const app = new Koa(); const app = new Koa();
app.use(convert(history())); app.use(convert(history()));
app.use(serve(path.join(__dirname, 'dist'))); app.use(serve(path.join(__dirname, 'dist'), { br: true, gzip: false }));
const server = https.createServer( const server = https.createServer(
{ {
......
...@@ -3,8 +3,8 @@ import { shallow } from 'enzyme'; ...@@ -3,8 +3,8 @@ import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json'; import toJson from 'enzyme-to-json';
import Root from './Root'; import Root from './Root';
import Header from './layout/header/Header'; import Header from './header/Header';
import Content from './layout/Content'; import Content from './content/Content';
describe('<Root />', () => { describe('<Root />', () => {
let wrapper: any; let wrapper: any;
......
import React, { SFC } from 'react'; import React, { FunctionComponent } from 'react';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import Header from './layout/header/Header'; import Header from './header/Header';
import Content from './layout/Content'; import Content from './content/Content';
const Root: SFC = () => ( const Root: FunctionComponent = () => (
<BrowserRouter> <BrowserRouter>
<React.StrictMode> <React.StrictMode>
<Header /> <Header />
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
exports[`<Root /> renders correctly 1`] = ` exports[`<Root /> renders correctly 1`] = `
<BrowserRouter> <BrowserRouter>
<StrictMode> <StrictMode>
<Header /> <React.Memo />
<withRouter(Connect(Content)) /> <withRouter(Connect(Content)) />
</StrictMode> </StrictMode>
</BrowserRouter> </BrowserRouter>
......
main { @import 'src/styles/common';
@include flex;
.content {
min-height: calc(100vh - 96px); min-height: calc(100vh - 96px);
&.expanded { &.expanded {
...@@ -11,9 +12,6 @@ main { ...@@ -11,9 +12,6 @@ main {
margin-top: 35%; margin-top: 35%;
padding: 15px 0; padding: 15px 0;
text-align: center; text-align: center;
}
> h2 {
width: 100%; width: 100%;
} }
} }
...@@ -3,10 +3,12 @@ import { Route, withRouter } from 'react-router-dom'; ...@@ -3,10 +3,12 @@ import { Route, withRouter } from 'react-router-dom';
import { RouteComponentProps } from 'react-router'; import { RouteComponentProps } from 'react-router';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { RootState } from '../../reducers'; import { RootState } from '../rootReducer';
import { getLaunchbarExpanded } from '../../selectors/headerSelectors'; import { getLaunchbarExpanded } from '../header/headerSelectors';
import App from '../apps/App'; import App from './app/App';
import styles from './Content.scss';
type StateProps = { type StateProps = {
launchbarExpanded: boolean; launchbarExpanded: boolean;
...@@ -19,14 +21,14 @@ type ContentProps = RouteComponentProps & StateProps & OwnProps; ...@@ -19,14 +21,14 @@ type ContentProps = RouteComponentProps & StateProps & OwnProps;
export class Content extends Component<ContentProps> { export class Content extends Component<ContentProps> {
public render() { public render() {
return ( return (
<main className={this.getExpandClass()}> <main className={`${styles.content} ${this.getExpandClass()}`}>
<Route path="/app" component={App} /> <Route path="/app" component={App} />
</main> </main>
); );
} }
private getExpandClass() { private getExpandClass(): string {
return this.props.launchbarExpanded ? '' : 'expanded'; return this.props.launchbarExpanded ? '' : styles.expanded;
} }
} }
......
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
exports[`<Content /> renders correctly 1`] = ` exports[`<Content /> renders correctly 1`] = `
<main <main
class="" class="content "
/> />
`; `;
...@@ -3,20 +3,21 @@ import { Route, RouteComponentProps, withRouter } from 'react-router'; ...@@ -3,20 +3,21 @@ import { Route, RouteComponentProps, withRouter } from 'react-router';
import Loadable from 'react-loadable'; import Loadable from 'react-loadable';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { changeCurrentApp } from '../../actions/headerActions'; import { changeCurrentApp } from 'src/header/headerActions';
import AppBar from './AppBar';
const GlobalSearch = Loadable({ const GlobalSearch = Loadable({
loader: () => import('../apps/global-search/GlobalSearch'), loader: () => import('./global-search/GlobalSearch'),
loading: () => null loading: () => null
}); });
const SpeciesSelector = Loadable({ const SpeciesSelector = Loadable({
loader: () => import('../apps/species-selector/SpeciesSelector'), loader: () => import('./species-selector/SpeciesSelector'),
loading: () => null loading: () => null
}); });
const Browser = Loadable({ const Browser = Loadable({
loader: () => import('../apps/browser/Browser'), loader: () => import('./browser/Browser'),
loading: () => null loading: () => null
}); });
...@@ -44,6 +45,7 @@ export class App extends Component<AppProps> { ...@@ -44,6 +45,7 @@ export class App extends Component<AppProps> {
return ( return (
<Fragment> <Fragment>
<AppBar />
<Route path={`${url}/global-search`} component={GlobalSearch} /> <Route path={`${url}/global-search`} component={GlobalSearch} />
<Route path={`${url}/species-selector`} component={SpeciesSelector} /> <Route path={`${url}/species-selector`} component={SpeciesSelector} />
<Route path={`${url}/browser`} component={Browser} /> <Route path={`${url}/browser`} component={Browser} />
......
@import 'src/styles/common';
.appBar {
border-bottom: 1px solid $ens-medium-grey;
font-size: 12px;
padding: 8px 20px;
width: 100%;
> div {
@include flex;
&.top {
margin-bottom: 12px;
}
}
}
.selectedSpecies {
flex: 1 1 auto;
margin-left: 10px;
dd {
display: inline-block;
font-size: 11px;
margin-left: 10px;
&:not(:last-child) {
background: $ens-black;
border-radius: 30px;
color: $ens-white;
margin-right: 6px;
padding: 2px 20px;
}
strong {
font-size: 14px;
}
}
}
.addSpecies {
font-size: 11px;
}
.helpLink {
flex: 0 1 auto;
position: relative;
top: 5px;
a {
color: $ens-black;
font-size: 12px;
font-weight: $light;
}
img {
height: 14px;
margin-left: 5px;
width: 14px;
}
}
import React, { FunctionComponent, memo } from 'react';
import chevronRightIcon from 'static/img/track-panel/chevron-right.svg';
import styles from './AppBar.scss';
const AppBar: FunctionComponent = memo(() => (
<section className={styles.appBar}