refactor the code after git repo integration

src/ensembl/src/scripts/actions/browserActions.test.ts → src/ensembl/src/content/app/browser/browserActions.test.ts

@@ -23,6 +23,9 @@ describe('browserActions', () => {
       },
       {
         type: 'browser/close-drawer'
+      },
+      {
+        type: 'browser/toggle-browser-navigation'
       }
     ];
 
@@ -30,6 +33,7 @@ describe('browserActions', () => {
     store.dispatch(browser.toggleDrawer());
     store.dispatch(browser.openDrawer());
     store.dispatch(browser.closeDrawer());
+    store.dispatch(browser.toggleBrowserNav());
 
     expect(store.getActions()).toEqual(expectedActions);
   });
@@ -63,6 +67,8 @@ describe('browserActions', () => {
     store.dispatch(browser.toggleDrawer());
     store.dispatch(browser.openDrawer());
     store.dispatch(browser.closeDrawer());
+    store.dispatch(browser.toggleBrowserNav());
+
     store.dispatch(browser.changeCurrentTrack('track-1'));
     store.dispatch(browser.changeCurrentDrawerSection('main'));
 

src/ensembl/src/scripts/configs/browserConfig.ts → src/ensembl/src/content/app/browser/browserConfig.ts

-import resetIcon from 'assets/img/browser/reset.svg';
+import resetIcon from 'static/img/browser/reset.svg';
 
-import navigatorIcon from 'assets/img/browser/navigator.svg';
-import navigatorSelectedIcon from 'assets/img/browser/navigator-selected.svg';
+import navigatorIcon from 'static/img/browser/navigator.svg';
+import navigatorSelectedIcon from 'static/img/browser/navigator-selected.svg';
 
-import navigateUpIcon from 'assets/img/browser/navigate-up.svg';
-import navigateUpOffIcon from 'assets/img/browser/navigate-up-off.svg';
+import navigateUpIcon from 'static/img/browser/navigate-up.svg';
+import navigateUpOffIcon from 'static/img/browser/navigate-up-off.svg';
 
-import zoomOutIcon from 'assets/img/browser/zoom-out.svg';
-import zoomOutOffIcon from 'assets/img/browser/zoom-out-off.svg';
+import zoomOutIcon from 'static/img/browser/zoom-out.svg';
+import zoomOutOffIcon from 'static/img/browser/zoom-out-off.svg';
 
-import zoomInIcon from 'assets/img/browser/zoom-in.svg';
-import zoomInOffIcon from 'assets/img/browser/zoom-in-off.svg';
+import zoomInIcon from 'static/img/browser/zoom-in.svg';
+import zoomInOffIcon from 'static/img/browser/zoom-in-off.svg';
 
-import navigateDownIcon from 'assets/img/browser/navigate-down.svg';
-import navigateDownOffIcon from 'assets/img/browser/navigate-down-off.svg';
+import navigateDownIcon from 'static/img/browser/navigate-down.svg';
+import navigateDownOffIcon from 'static/img/browser/navigate-down-off.svg';
 
-import navigateLeftIcon from 'assets/img/browser/navigate-left.svg';
-import navigateLeftOffIcon from 'assets/img/browser/navigate-left-off.svg';
+import navigateLeftIcon from 'static/img/browser/navigate-left.svg';
+import navigateLeftOffIcon from 'static/img/browser/navigate-left-off.svg';
 
-import navigateRightIcon from 'assets/img/browser/navigate-right.svg';
-import navigateRightOffIcon from 'assets/img/browser/navigate-right-off.svg';
+import navigateRightIcon from 'static/img/browser/navigate-right.svg';
+import navigateRightOffIcon from 'static/img/browser/navigate-right-off.svg';
 
 export type BrowserInfoItem = {
   description: string;

src/ensembl/src/scripts/reducers/browserReducer.test.ts → src/ensembl/src/content/app/browser/browserReducer.test.ts

-import browserReducer, {
-  defaultState,
-  BrowserOpenState
-} from './browserReducer';
+import browserReducer from './browserReducer';
+import { defaultState, BrowserOpenState } from './browserState';
+
 import {
   toggleTrackPanel,
   changeCurrentTrack,
   toggleDrawer,
   closeDrawer,
   openDrawer,
-  changeCurrentDrawerSection
-} from '../actions/browserActions';
-import { drawerSectionConfig } from '../configs/drawerSectionConfig';
+  changeCurrentDrawerSection,
+  toggleBrowserNav
+} from './browserActions';
+import { drawerSectionConfig } from './drawer/drawerSectionConfig';
 
 const initialState = {
+  browserNavOpened: false,
   browserOpenState: BrowserOpenState.SEMI_EXPANDED,
   currentDrawerSection: '',
   currentTrack: '',
@@ -93,5 +94,16 @@ describe('browserReducer', () => {
         browserReducer(initialTrackState, changeCurrentDrawerSection('summary'))
       ).toEqual(expectedState);
     });
+
+    test('toggleBrowserNav', () => {
+      const expectedState = {
+        ...initialState,
+        browserNavOpened: true
+      };
+
+      expect(browserReducer(undefined, toggleBrowserNav())).toEqual(
+        expectedState
+      );
+    });
   });
 });

src/ensembl/src/content/app/browser/browserReducer.ts

+import { ActionType, getType } from 'typesafe-actions';
+
+import * as browser from './browserActions';
+import {
+  BrowserState,
+  defaultState,
+  trackPanelState,
+  drawerState
+} from './browserState';
+
+import { drawerSectionConfig } from './drawer/drawerSectionConfig';
+
+export default (
+  state: BrowserState = defaultState,
+  action: ActionType<typeof browser>
+): BrowserState => {
+  switch (action.type) {
+    case getType(browser.toggleTrackPanel):
+      return trackPanelState(state);
+    case getType(browser.changeCurrentTrack):
+      return {
+        ...state,
+        currentDrawerSection: '',
+        currentTrack: action.payload,
+        drawerSections: drawerSectionConfig[action.payload]
+      };
+    case getType(browser.toggleDrawer):
+      return drawerState(state, !state.drawerOpened);
+    case getType(browser.openDrawer):
+      return drawerState(state, true);
+    case getType(browser.closeDrawer):
+      return drawerState(state, false);
+    case getType(browser.changeCurrentDrawerSection):
+      return { ...state, currentDrawerSection: action.payload };
+    case getType(browser.toggleBrowserNav):
+      return { ...state, browserNavOpened: !state.browserNavOpened };
+    default:
+      return state;
+  }
+};

src/ensembl/src/scripts/selectors/browserSelectors.test.ts → src/ensembl/src/content/app/browser/browserSelectors.test.ts

@@ -4,13 +4,15 @@ import {
   getCurrentTrack,
   getDrawerOpened,
   getDrawerSections,
-  getTrackPanelOpened
+  getTrackPanelOpened,
+  getBrowserNavOpened
 } from './browserSelectors';
 
-import store from '../store';
-import { BrowserState, BrowserOpenState } from '../reducers/browserReducer';
+import store from '../../../store';
+import { BrowserState, BrowserOpenState } from './browserState';
 
 const browserState: BrowserState = {
+  browserNavOpened: false,
   browserOpenState: BrowserOpenState.COLLAPSED,
   currentDrawerSection: 'summary',
   currentTrack: 'track-1',
@@ -33,6 +35,10 @@ describe('browserSelectors should select', () => {
     expect(getBrowserOpenState(state)).toBe(BrowserOpenState.COLLAPSED);
   });
 
+  test('browserNavOpened from state', () => {
+    expect(getBrowserNavOpened(state)).toBe(false);
+  });
+
   test('currentDrawerSection from state', () => {
     expect(getCurrentDrawerSection(state)).toBe('summary');
   });

src/ensembl/src/scripts/selectors/browserSelectors.ts → src/ensembl/src/content/app/browser/browserSelectors.ts

-import { RootState } from '../reducers';
-import { BrowserOpenState } from '../reducers/browserReducer';
-import { DrawerSection } from '../configs/drawerSectionConfig';
+import { RootState } from 'src/rootReducer';
+import { BrowserOpenState } from './browserState';
+import { DrawerSection } from './drawer/drawerSectionConfig';
 
 export const getBrowserOpenState = (state: RootState): BrowserOpenState =>
   state.browser.browserOpenState;

src/ensembl/src/scripts/reducers/browserReducer.ts → src/ensembl/src/content/app/browser/browserState.ts

-import { ActionType, getType } from 'typesafe-actions';
-
-import * as browser from '../actions/browserActions';
-
-import {
-  DrawerSection,
-  drawerSectionConfig
-} from '../configs/drawerSectionConfig';
-
-export type BrowserAction = ActionType<typeof browser>;
+import { DrawerSection } from './drawer/drawerSectionConfig';
 
 export enum BrowserOpenState {
   EXPANDED = 'expanded',
-  SEMI_EXPANDED = 'semi-expanded',
+  SEMI_EXPANDED = 'semiExpanded',
   COLLAPSED = 'collapsed'
 }
 
@@ -35,7 +26,7 @@ export const defaultState: BrowserState = {
   trackPanelOpened: true
 };
 
-const trackPanelState = (state: BrowserState) => {
+export const trackPanelState = (state: BrowserState) => {
   const trackPanelOpened: boolean = !state.trackPanelOpened;
   const browserOpenState: BrowserOpenState = trackPanelOpened
     ? BrowserOpenState.SEMI_EXPANDED
@@ -48,7 +39,7 @@ const trackPanelState = (state: BrowserState) => {
   };
 };
 
-const drawerState = (state: BrowserState, drawerOpened: boolean) => {
+export const drawerState = (state: BrowserState, drawerOpened: boolean) => {
   if (drawerOpened === true) {
     return {
       ...state,
@@ -61,32 +52,3 @@ const drawerState = (state: BrowserState, drawerOpened: boolean) => {
     };
   }
 };
-
-export default (
-  state: BrowserState = defaultState,
-  action: BrowserAction
-): BrowserState => {
-  switch (action.type) {
-    case getType(browser.toggleTrackPanel):
-      return trackPanelState(state);
-    case getType(browser.changeCurrentTrack):
-      return {
-        ...state,
-        currentDrawerSection: '',
-        currentTrack: action.payload,
-        drawerSections: drawerSectionConfig[action.payload]
-      };
-    case getType(browser.toggleDrawer):
-      return drawerState(state, !state.drawerOpened);
-    case getType(browser.openDrawer):
-      return drawerState(state, true);
-    case getType(browser.closeDrawer):
-      return drawerState(state, false);
-    case getType(browser.changeCurrentDrawerSection):
-      return { ...state, currentDrawerSection: action.payload };
-    case getType(browser.toggleBrowserNav):
-      return { ...state, browserNavOpened: !state.browserNavOpened };
-    default:
-      return state;
-  }
-};

src/ensembl/src/styles/_drawer.scss → src/ensembl/src/content/app/browser/drawer/Drawer.scss

+@import 'src/styles/common';
+
 .drawer {
   border-left: 1px solid $ens-black;
   width: calc(75% - 41px);
 
-  .drawer-bar {
-    @include flex;
-    border-bottom: 1px dashed $ens-black;
-    padding: 10px 15px;
-
-    .page-list {
-      margin: 0;
-      display: flex;
-      flex-wrap: nowrap;
-      overflow-x: auto;
-      width: 100%;
-
-      dt {
-        display: inline-block;
-        margin-right: 15px;
-        white-space: nowrap;
-      }
-    }
-
-    .close {
-      img {
-        height: 24px;
-        width: 24px;
-      }
-    }
-  }
-
-  .track-canvas {
+  .trackCanvas {
     height: calc(100vh - 181px);
     overflow: scroll;
 

src/ensembl/src/scripts/components/tracks/Track.tsx → src/ensembl/src/content/app/browser/drawer/Drawer.tsx

-import React, { Component, ReactNode } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { RootState } from '../../reducers';
-import {
-  changeCurrentDrawerSection,
-  closeDrawer
-} from '../../actions/browserActions';
+import { RootState } from 'src/rootReducer';
+import { changeCurrentDrawerSection, closeDrawer } from '../browserActions';
 import {
   getCurrentDrawerSection,
   getCurrentTrack,
   getDrawerSections
-} from '../../selectors/browserSelectors';
+} from '../browserSelectors';
 
-import { DrawerSection } from '../../configs/drawerSectionConfig';
+import { DrawerSection } from './drawerSectionConfig';
 
-import {
-  trackPanelConfig,
-  TrackPanelConfig
-} from '../../configs/trackPanelConfig';
+// import {
+//   trackPanelConfig,
+//   TrackPanelItem
+// } from '../track-panel/trackPanelConfig';
 
 import DrawerBar from './DrawerBar';
-import TrackOne from './track-one/TrackOne';
-import TrackTwo from './track-two/TrackTwo';
+// import TrackOne from './tracks/TrackOne';
+// import TrackTwo from './tracks/TrackTwo';
+
+import styles from './Drawer.scss';
 
 type StateProps = {
   currentDrawerSection: string;
@@ -36,56 +35,56 @@ type DispatchProps = {
 
 type OwnProps = {};
 
-type TrackProps = StateProps & DispatchProps & OwnProps;
+type DrawerProps = StateProps & DispatchProps & OwnProps;
 
-class Track extends Component<TrackProps> {
+class Drawer extends Component<DrawerProps> {
   public render() {
-    const TrackComponent = this.getCurrentTrackComponent();
+    // const TrackComponent = this.getCurrentTrackComponent();
 
     return (
-      <section className="drawer">
+      <section className={styles.drawer}>
         <DrawerBar
           changeCurrentDrawerSection={this.props.changeCurrentDrawerSection}
           closeDrawer={this.props.closeDrawer}
           currentTrack={this.props.currentTrack}
           drawerSections={this.props.drawerSections}
         />
-        <div className="track-canvas">{TrackComponent}</div>
+        {/* <div className="track-canvas">{TrackComponent}</div> */}
       </section>
     );
   }
 
-  private getCurrentTrackComponent(): ReactNode {
-    const { currentDrawerSection, currentTrack, drawerSections } = this.props;
-
-    const currentTrackConfig: TrackPanelConfig = trackPanelConfig.filter(
-      (track: TrackPanelConfig) => currentTrack === track.name
-    )[0];
-
-    switch (currentTrackConfig.name) {
-      case 'track-one':
-        return (
-          <TrackOne
-            currentDrawerSection={currentDrawerSection}
-            drawerSections={drawerSections}
-          />
-        );
-      case 'track-two':
-        return (
-          <TrackTwo
-            currentDrawerSection={currentDrawerSection}
-            drawerSections={drawerSections}
-          />
-        );
-      default:
-        return (
-          <TrackOne
-            currentDrawerSection={currentDrawerSection}
-            drawerSections={drawerSections}
-          />
-        );
-    }
-  }
+  // private getCurrentTrackComponent(): ReactNode {
+  //   const { currentDrawerSection, currentTrack, drawerSections } = this.props;
+
+  //   const currentTrackConfig: TrackPanelItem = trackPanelConfig.filter(
+  //     (track: TrackPanelItem) => currentTrack === track.name
+  //   )[0];
+
+  //   switch (currentTrackConfig.name) {
+  //     case 'track-one':
+  //       return (
+  //         <TrackOne
+  //           currentDrawerSection={currentDrawerSection}
+  //           drawerSections={drawerSections}
+  //         />
+  //       );
+  //     case 'track-two':
+  //       return (
+  //         <TrackTwo
+  //           currentDrawerSection={currentDrawerSection}
+  //           drawerSections={drawerSections}
+  //         />
+  //       );
+  //     default:
+  //       return (
+  //         <TrackOne
+  //           currentDrawerSection={currentDrawerSection}
+  //           drawerSections={drawerSections}
+  //         />
+  //       );
+  //   }
+  // }
 }
 
 const mapStateToProps = (state: RootState): StateProps => ({
@@ -102,4 +101,4 @@ const mapDispatchToProps: DispatchProps = {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(Track);
+)(Drawer);

src/ensembl/src/content/app/browser/drawer/DrawerBar.scss

+@import 'src/styles/common';
+
+.drawerBar {
+  @include flex;
+  border-bottom: 1px dashed $ens-black;
+  padding: 10px 15px;
+
+  .pageList {
+    margin: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    width: 100%;
+
+    dt {
+      display: inline-block;
+      margin-right: 15px;
+      white-space: nowrap;
+    }
+  }
+
+  .closeButton {
+    img {
+      height: 24px;
+      width: 24px;
+    }
+  }
+}

src/ensembl/src/scripts/components/tracks/DrawerBar.tsx → src/ensembl/src/content/app/browser/drawer/DrawerBar.tsx

 import React, { Component, ReactEventHandler } from 'react';
 
-import { DrawerSection } from '../../configs/drawerSectionConfig';
-import { EventHandlers } from '../../types/objects';
+import { DrawerSection } from './drawerSectionConfig';
+import { EventHandlers } from 'src/objects';
 
-import closeIcon from 'assets/img/track-panel/close.svg';
+import closeIcon from 'static/img/track-panel/close.svg';
+
+import styles from './DrawerBar.scss';
 
 type DrawerBarProps = {
   changeCurrentDrawerSection: (currentDrawerSection: string) => void;
@@ -18,8 +20,8 @@ class DrawerBar extends Component<DrawerBarProps> {
 
   public render() {
     return (
-      <div className="drawer-bar">
-        <dl className="page-list">
+      <div className={styles.drawerBar}>
+        <dl className={styles.pageList}>
           <dt>
             <button onClick={this.getClickHandler('main')}>{'Main'}</button>
           </dt>
@@ -32,7 +34,7 @@ class DrawerBar extends Component<DrawerBarProps> {
               </dt>
             ))}
         </dl>
-        <button className="close" onClick={this.props.closeDrawer}>
+        <button className={styles.closeButton} onClick={this.props.closeDrawer}>
           <img src={closeIcon} alt="close drawer" />
         </button>
       </div>

src/ensembl/src/content/app/browser/track-panel/TrackPanel.scss

+@import 'src/styles/common';
+
+.trackPanel {
+  @include flex;
+  border-left: 1px solid $ens-medium-grey;
+}

src/ensembl/src/scripts/components/layout/track-panel/TrackPanel.tsx → src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import TrackPanelBar from './TrackPanelBar';
-import TrackPanelList from './TrackPanelList';
+import TrackPanelBar from './track-panel-bar/TrackPanelBar';
+import TrackPanelList from './track-panel-list/TrackPanelList';
+
+import { RootState } from 'src/rootReducer';
 
-import { RootState } from '../../../reducers';
 import {
   toggleTrackPanel,
   changeCurrentTrack,
   openDrawer,
   closeDrawer
-} from '../../../actions/browserActions';
+} from '../browserActions';
 import {
   getCurrentTrack,
   getDrawerOpened,
   getTrackPanelOpened
-} from '../../../selectors/browserSelectors';
+} from '../browserSelectors';
+
+import { getLaunchbarExpanded } from 'src/header/headerSelectors';
+
+import styles from './TrackPanel.scss';
 
 type TrackPanelProps = {
   changeCurrentTrack: (currentTrack: string) => void;
   closeDrawer: () => void;
   currentTrack: string;
   drawerOpened: boolean;
+  launchbarExpanded: boolean;
   openDrawer: () => void;
   toggleTrackPanel: () => void;
   trackPanelOpened: boolean;
@@ -30,12 +36,11 @@ type TrackPanelProps = {
 class TrackPanel extends Component<TrackPanelProps> {
   public render() {
     return (
-      <section
-        className={`track-panel react-slide-drawer ${this.getToggleClass()}`}
-      >
+      <section className={`${styles.trackPanel} reactSlideDrawer`}>
         <TrackPanelBar
           closeDrawer={this.props.closeDrawer}
           drawerOpened={this.props.drawerOpened}
+          launchbarExpanded={this.props.launchbarExpanded}
           trackPanelOpened={this.props.trackPanelOpened}
           toggleTrackPanel={this.props.toggleTrackPanel}
         />
@@ -49,19 +54,12 @@ class TrackPanel extends Component<TrackPanelProps> {
       </section>
     );
   }
-
-  private getToggleClass(): string {
-    if (this.props.trackPanelOpened === true) {
-      return 'expanded';
-    } else {
-      return 'collapsed';
-    }
-  }
 }