refactor the code after git repo integration

.gitignore

@@ -11,6 +11,7 @@ coverage/
 .DS_Store
 
 package-lock.json
+bundle-report.html
 
 localhost.crt
 localhost.key

script.py

+#!/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:])

src/ensembl/.npmrc

+loglevel=silent
\ No newline at end of file

src/ensembl/.vscode/settings.json

-{
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file

src/ensembl/babel.config.js

@@ -13,7 +13,8 @@ module.exports = {
     'react-hot-loader/babel',
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-class-properties'
+    '@babel/plugin-proposal-class-properties',
+    'babel-plugin-react-css-modules-sass'
   ],
   env: {
     test: {

src/ensembl/deploy.js

 const execSync = require('child_process').execSync;
 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] }
+);

src/ensembl/jest.config.js

 module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleNameMapper: {
-    '(assets/.*)$': '<rootDir>/$1'
+    '(src/.*)$': '<rootDir>/$1',
+    '(static/.*)$': '<rootDir>/$1',
+    '(static/browser/.*)$': '<rootDir>/$1.stub.js',
+    '\\.(css|scss)$': 'identity-obj-proxy'
   },
   preset: 'ts-jest',
   roots: ['<rootDir>/src'],
+  setupFiles: ['<rootDir>/setup-jest.ts'],
   setupTestFrameworkScriptFile: '<rootDir>/setup-enzyme.ts',
   snapshotSerializers: ['enzyme-to-json/serializer'],
   testEnvironment: 'jsdom',

src/ensembl/package.json

@@ -14,10 +14,9 @@
   "license": "MIT",
   "scripts": {
     "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",
     "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",
     "certify": "node setup-ssl",
     "lint": "npm run lint:scripts && npm run lint:styles",
@@ -41,19 +40,19 @@
     }
   },
   "dependencies": {
-    "foundation-sites": "^6.5.1",
+    "foundation-sites": "^6.5.3",
     "history": "^4.7.2",
     "react": "^16.7.0",
-    "react-contenteditable": "^3.2.4",
+    "react-contenteditable": "^3.2.6",
     "react-dom": "^16.7.0",
-    "react-hot-loader": "^4.6.3",
+    "react-hot-loader": "^4.6.5",
     "react-loadable": "^5.5.0",
     "react-redux": "^5.1.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-slidedown": "^2.0.5",
+    "react-slidedown": "^2.0.7",
     "redux": "^4.0.1",
-    "redux-devtools-extension": "^2.13.7",
+    "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "typesafe-actions": "^2.2.0",
@@ -61,70 +60,76 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
     "@babel/plugin-syntax-dynamic-import": "^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-typescript": "^7.1.0",
-    "@types/enzyme": "^3.1.15",
+    "@types/enzyme": "^3.1.16",
     "@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/react": "^16.7.18",
+    "@types/react": "^16.8.1",
     "@types/react-dom": "^16.0.11",
-    "@types/react-loadable": "^5.4.3",
-    "@types/react-redux": "^6.0.11",
+    "@types/react-loadable": "^5.5.0",
+    "@types/react-redux": "^6.0.13",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-router-hash-link": "^1.2.0",
     "@types/redux-mock-store": "^1.0.0",
     "@types/reselect": "^2.2.0",
+    "acorn": "^6.0.7",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-loader": "^8.0.4",
-    "brotli-webpack-plugin": "^1.0.0",
-    "connect-history-api-fallback": "^1.5.0",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-react-css-modules-sass": "^1.1.0",
+    "brotli-webpack-plugin": "^1.1.0",
+    "connect-history-api-fallback": "^1.6.0",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.1",
     "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-adapter-react-16": "^1.8.0",
     "enzyme-to-json": "^3.3.5",
     "file-loader": "^1.1.11",
     "fork-ts-checker-webpack-plugin": "^0.4.15",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.3.1",
+    "identity-obj-proxy": "^3.0.0",
     "image-webpack-loader": "^4.6.0",
     "jest": "^23.6.0",
     "jest-fetch-mock": "^2.1.0",
     "jest-snapshot": "^23.6.0",
     "jest-transform-stub": "^1.0.0",
-    "koa": "^2.6.2",
+    "koa": "^2.7.0",
     "koa-connect": "^2.0.1",
     "koa-static": "^5.0.0",
     "lint-staged": "^7.3.0",
     "mini-css-extract-plugin": "^0.4.5",
     "node-sass": "^4.11.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^5.3.0",
-    "prettier": "^1.15.3",
+    "prettier": "^1.16.4",
     "redux-mock-store": "^1.5.3",
-    "rimraf": "^2.6.2",
+    "rimraf": "^2.6.3",
     "robotstxt-webpack-plugin": "^4.0.1",
     "sass-loader": "^7.1.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.21.0",
-    "stylelint": "^9.10.1",
+    "stylelint": "^8.4.0",
     "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-scss": "^3.4.4",
+    "stylelint-scss": "^3.5.2",
     "stylelint-webpack-plugin": "^0.10.5",
     "ts-jest": "^23.10.5",
-    "tslint": "^5.12.0",
-    "tslint-config-prettier": "^1.17.0",
+    "tslint": "^5.12.1",
+    "tslint-config-prettier": "^1.18.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.2.2",
-    "webpack": "^4.28.0",
+    "typescript": "^3.3.1",
+    "uglifyjs-webpack-plugin": "^2.1.1",
+    "webpack": "^4.29.0",
     "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14",
     "webpack-manifest-plugin": "^2.0.4",
     "workbox-webpack-plugin": "^3.6.3"

src/ensembl/server.js

@@ -10,7 +10,7 @@ const convert = require('koa-connect');
 const app = new Koa();
 
 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(
   {

src/ensembl/src/scripts/components/Root.test.tsx → src/ensembl/src/Root.test.tsx

@@ -3,8 +3,8 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
 import Root from './Root';
-import Header from './layout/header/Header';
-import Content from './layout/Content';
+import Header from './header/Header';
+import Content from './content/Content';
 
 describe('<Root />', () => {
   let wrapper: any;

src/ensembl/src/scripts/components/Root.tsx → src/ensembl/src/Root.tsx

-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
 import { hot } from 'react-hot-loader';
 
-import Header from './layout/header/Header';
-import Content from './layout/Content';
+import Header from './header/Header';
+import Content from './content/Content';
 
-const Root: SFC = () => (
+const Root: FunctionComponent = () => (
   <BrowserRouter>
     <React.StrictMode>
       <Header />

src/ensembl/src/scripts/components/__snapshots__/Root.test.tsx.snap → src/ensembl/src/__snapshots__/Root.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Root /> renders correctly 1`] = `
 <BrowserRouter>
   <StrictMode>
-    <Header />
+    <React.Memo />
     <withRouter(Connect(Content)) />
   </StrictMode>
 </BrowserRouter>

src/ensembl/src/styles/_content.scss → src/ensembl/src/content/Content.scss

-main {
-  @include flex;
+@import 'src/styles/common';
+
+.content {
   min-height: calc(100vh - 96px);
 
   &.expanded {
@@ -11,9 +12,6 @@ main {
     margin-top: 35%;
     padding: 15px 0;
     text-align: center;
-  }
-
-  > h2 {
     width: 100%;
   }
 }

src/ensembl/src/scripts/components/layout/Content.tsx → src/ensembl/src/content/Content.tsx

@@ -3,10 +3,12 @@ import { Route, withRouter } from 'react-router-dom';
 import { RouteComponentProps } from 'react-router';
 import { connect } from 'react-redux';
 
-import { RootState } from '../../reducers';
-import { getLaunchbarExpanded } from '../../selectors/headerSelectors';
+import { RootState } from '../rootReducer';
+import { getLaunchbarExpanded } from '../header/headerSelectors';
 
-import App from '../apps/App';
+import App from './app/App';
+
+import styles from './Content.scss';
 
 type StateProps = {
   launchbarExpanded: boolean;
@@ -19,14 +21,14 @@ type ContentProps = RouteComponentProps & StateProps & OwnProps;
 export class Content extends Component<ContentProps> {
   public render() {
     return (
-      <main className={this.getExpandClass()}>
+      <main className={`${styles.content} ${this.getExpandClass()}`}>
         <Route path="/app" component={App} />
       </main>
     );
   }
 
-  private getExpandClass() {
-    return this.props.launchbarExpanded ? '' : 'expanded';
+  private getExpandClass(): string {
+    return this.props.launchbarExpanded ? '' : styles.expanded;
   }
 }
 

src/ensembl/src/scripts/components/layout/__snapshots__/Content.test.tsx.snap → src/ensembl/src/content/__snapshots__/Content.test.tsx.snap

@@ -2,6 +2,6 @@
 
 exports[`<Content /> renders correctly 1`] = `
 <main
-  class=""
+  class="content "
 />
 `;

src/ensembl/src/scripts/components/apps/App.tsx → src/ensembl/src/content/app/App.tsx

@@ -3,20 +3,21 @@ import { Route, RouteComponentProps, withRouter } from 'react-router';
 import Loadable from 'react-loadable';
 import { connect } from 'react-redux';
 
-import { changeCurrentApp } from '../../actions/headerActions';
+import { changeCurrentApp } from 'src/header/headerActions';
+import AppBar from './AppBar';
 
 const GlobalSearch = Loadable({
-  loader: () => import('../apps/global-search/GlobalSearch'),
+  loader: () => import('./global-search/GlobalSearch'),
   loading: () => null
 });
 
 const SpeciesSelector = Loadable({
-  loader: () => import('../apps/species-selector/SpeciesSelector'),
+  loader: () => import('./species-selector/SpeciesSelector'),
   loading: () => null
 });
 
 const Browser = Loadable({
-  loader: () => import('../apps/browser/Browser'),
+  loader: () => import('./browser/Browser'),
   loading: () => null
 });
 
@@ -44,6 +45,7 @@ export class App extends Component<AppProps> {
 
     return (
       <Fragment>
+        <AppBar />
         <Route path={`${url}/global-search`} component={GlobalSearch} />
         <Route path={`${url}/species-selector`} component={SpeciesSelector} />
         <Route path={`${url}/browser`} component={Browser} />

src/ensembl/src/content/app/AppBar.scss

+@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;
+  }
+}

src/ensembl/src/content/app/AppBar.tsx

+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}>
+    <div className={styles.top}>
+      <div>Example App</div>
+    </div>
+    <div>
+      <dl className={styles.selectedSpecies}>
+        <dd>
+          <strong>Human</strong> GRCh38.p10
+        </dd>
+        <dd>
+          <a href="" className={styles.addSpecies}>
+            Change
+          </a>
+        </dd>
+      </dl>
+      <div className={styles.helpLink}>
+        <a href="">
+          Help &amp; documentation <img src={chevronRightIcon} alt="" />
+        </a>
+      </div>
+    </div>
+  </section>
+));
+
+export default AppBar;