remove drawer sections and add drawer view to state

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

@@ -15,10 +15,10 @@ export const toggleTrackPanel = createAction(
   }
 );
 
-export const changeCurrentTrack = createAction(
-  'browser/change-current-track',
+export const changeDrawerView = createAction(
+  'browser/change-drawer-view',
   (resolve) => {
-    return (currentTrack: string) => resolve(currentTrack);
+    return (drawerView: string) => resolve(drawerView);
   }
 );
 
@@ -26,13 +26,6 @@ export const toggleDrawer = createAction('browser/toggle-drawer', (resolve) => {
   return (drawerOpened?: boolean) => resolve(drawerOpened);
 });
 
-export const changeCurrentDrawerSection = createAction(
-  'browser/change-current-drawer-section',
-  (resolve) => {
-    return (currentDrawerSection: string) => resolve(currentDrawerSection);
-  }
-);
-
 export const toggleBrowserNav = createAction(
   'browser/toggle-browser-navigation'
 );

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

@@ -8,8 +8,6 @@ import {
   drawerState
 } from './browserState';
 
-import { drawerSectionConfig } from './drawer/drawerSectionConfig';
-
 export default (
   state: BrowserState = defaultState,
   action: ActionType<typeof browser>
@@ -19,17 +17,13 @@ export default (
       return { ...state, browserActivated: action.payload };
     case getType(browser.toggleTrackPanel):
       return trackPanelState(state, action.payload);
-    case getType(browser.changeCurrentTrack):
+    case getType(browser.changeDrawerView):
       return {
         ...state,
-        currentDrawerSection: '',
-        currentTrack: action.payload,
-        drawerSections: drawerSectionConfig[action.payload]
+        drawerView: action.payload
       };
     case getType(browser.toggleDrawer):
       return drawerState(state, action.payload);
-    case getType(browser.changeCurrentDrawerSection):
-      return { ...state, currentDrawerSection: action.payload };
     case getType(browser.toggleBrowserNav):
       return { ...state, browserNavOpened: !state.browserNavOpened };
     case getType(browser.updateBrowserNavStates):

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

@@ -4,7 +4,6 @@ import {
   BrowserNavStates,
   ChrLocation
 } from './browserState';
-import { DrawerSection } from './drawer/drawerSectionConfig';
 
 export const getBrowserActivated = (state: RootState): boolean =>
   state.browser.browserActivated;
@@ -12,18 +11,12 @@ export const getBrowserActivated = (state: RootState): boolean =>
 export const getBrowserOpenState = (state: RootState): BrowserOpenState =>
   state.browser.browserOpenState;
 
-export const getCurrentDrawerSection = (state: RootState): string =>
-  state.browser.currentDrawerSection;
-
-export const getCurrentTrack = (state: RootState): string =>
-  state.browser.currentTrack;
+export const getDrawerView = (state: RootState): string =>
+  state.browser.drawerView;
 
 export const getDrawerOpened = (state: RootState): boolean =>
   state.browser.drawerOpened;
 
-export const getDrawerSections = (state: RootState): DrawerSection[] =>
-  state.browser.drawerSections;
-
 export const getTrackPanelOpened = (state: RootState): boolean =>
   state.browser.trackPanelOpened;
 

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

-import { DrawerSection } from './drawer/drawerSectionConfig';
-
 export enum BrowserOpenState {
   EXPANDED = 'expanded',
   SEMI_EXPANDED = 'semiExpanded',
@@ -24,11 +22,9 @@ export type BrowserState = Readonly<{
   browserNavStates: BrowserNavStates;
   browserOpenState: BrowserOpenState;
   chrLocation: ChrLocation;
-  currentDrawerSection: string;
-  currentTrack: string;
   defaultChrLocation: ChrLocation;
   drawerOpened: boolean;
-  drawerSections: DrawerSection[];
+  drawerView: string;
   trackPanelModalOpened: boolean;
   trackPanelModalView: string;
   trackPanelOpened: boolean;
@@ -40,11 +36,9 @@ export const defaultState: BrowserState = {
   browserNavStates: [true, true, true, true, true, true],
   browserOpenState: BrowserOpenState.SEMI_EXPANDED,
   chrLocation: ['13', 0, 0],
-  currentDrawerSection: '',
-  currentTrack: '',
   defaultChrLocation: ['13', 0, 0],
   drawerOpened: false,
-  drawerSections: [],
+  drawerView: '',
   trackPanelModalOpened: false,
   trackPanelModalView: '',
   trackPanelOpened: true
@@ -77,7 +71,10 @@ export const drawerState = (
     };
   } else {
     return {
-      ...defaultState
+      ...state,
+      browserOpenState: BrowserOpenState.SEMI_EXPANDED,
+      drawerOpened,
+      drawerView: ''
     };
   }
 };

src/ensembl/src/content/app/browser/drawer/Drawer.tsx

@@ -2,14 +2,8 @@ import React, { FunctionComponent } from 'react';
 import { connect } from 'react-redux';
 
 import { RootState } from 'src/rootReducer';
-import { changeCurrentDrawerSection, toggleDrawer } from '../browserActions';
-import {
-  getCurrentDrawerSection,
-  getCurrentTrack,
-  getDrawerSections
-} from '../browserSelectors';
-
-import { DrawerSection } from './drawerSectionConfig';
+import { toggleDrawer } from '../browserActions';
+import { getDrawerView } from '../browserSelectors';
 
 import DrawerGene from './drawer-views/DrawerGene';
 import DrawerTranscript from './drawer-views/DrawerTranscript';
@@ -23,13 +17,10 @@ import closeIcon from 'static/img/track-panel/close.svg';
 import styles from './Drawer.scss';
 
 type StateProps = {
-  currentDrawerSection: string;
-  currentTrack: string;
-  drawerSections: DrawerSection[];
+  drawerView: string;
 };
 
 type DispatchProps = {
-  changeCurrentDrawerSection: (currentDrawerSection: string) => void;
   toggleDrawer: (drawerOpened?: boolean) => void;
 };
 
@@ -38,8 +29,8 @@ type OwnProps = {};
 type DrawerProps = StateProps & DispatchProps & OwnProps;
 
 const Drawer: FunctionComponent<DrawerProps> = (props: DrawerProps) => {
-  const getDrawerView = () => {
-    switch (props.currentTrack) {
+  const getDrawerViewComponent = () => {
+    switch (props.drawerView) {
       case 'gene':
         return <DrawerGene />;
       case 'transcript':
@@ -66,19 +57,16 @@ const Drawer: FunctionComponent<DrawerProps> = (props: DrawerProps) => {
       <button className={styles.closeButton} onClick={closeDrawer}>
         <img src={closeIcon} alt="close drawer" />
       </button>
-      <div className={styles.drawerView}>{getDrawerView()}</div>
+      <div className={styles.drawerView}>{getDrawerViewComponent()}</div>
     </section>
   );
 };
 
 const mapStateToProps = (state: RootState): StateProps => ({
-  currentDrawerSection: getCurrentDrawerSection(state),
-  currentTrack: getCurrentTrack(state),
-  drawerSections: getDrawerSections(state)
+  drawerView: getDrawerView(state)
 });
 
 const mapDispatchToProps: DispatchProps = {
-  changeCurrentDrawerSection,
   toggleDrawer
 };
 

src/ensembl/src/content/app/browser/drawer/drawerSectionConfig.ts

-export type DrawerSection = {
-  label: string;
-  name: string;
-};
-
-export type DrawerSectionList = {
-  [key: string]: DrawerSection[];
-};
-
-export const drawerSectionConfig: DrawerSectionList = {
-  'track-one': [
-    {
-      label: 'Summary',
-      name: 'summary'
-    },
-    {
-      label: 'Miscellaneous',
-      name: 'miscellaneous'
-    }
-  ],
-  'track-two': []
-};

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

@@ -14,13 +14,13 @@ import { RootState } from 'src/rootReducer';
 import {
   toggleDrawer,
   toggleTrackPanel,
-  changeCurrentTrack,
+  changeDrawerView,
   closeTrackPanelModal,
   openTrackPanelModal
 } from '../browserActions';
 
 import {
-  getCurrentTrack,
+  getDrawerView,
   getDrawerOpened,
   getTrackPanelOpened,
   getBrowserActivated,
@@ -37,8 +37,8 @@ import TrackPanelModal from './track-panel-modal/TrackPanelModal';
 
 type StateProps = {
   browserActivated: boolean;
-  currentTrack: string;
   drawerOpened: boolean;
+  drawerView: string;
   breakpointWidth: BreakpointWidth;
   launchbarExpanded: boolean;
   trackPanelModalOpened: boolean;
@@ -47,7 +47,7 @@ type StateProps = {
 };
 
 type DispatchProps = {
-  changeCurrentTrack: (currentTrack: string) => void;
+  changeDrawerView: (drawerView: string) => void;
   closeTrackPanelModal: () => void;
   openTrackPanelModal: (trackPanelModalView: string) => void;
   toggleDrawer: (drawerOpened: boolean) => void;
@@ -89,10 +89,10 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
             <Fragment>
               <TrackPanelList
                 browserRef={props.browserRef}
-                currentTrack={props.currentTrack}
+                drawerView={props.drawerView}
                 launchbarExpanded={props.launchbarExpanded}
                 toggleDrawer={props.toggleDrawer}
-                updateTrack={props.changeCurrentTrack}
+                updateDrawerView={props.changeDrawerView}
               />
               {props.trackPanelModalOpened ? (
                 <TrackPanelModal
@@ -112,8 +112,8 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
 const mapStateToProps = (state: RootState): StateProps => ({
   breakpointWidth: getBreakpointWidth(state),
   browserActivated: getBrowserActivated(state),
-  currentTrack: getCurrentTrack(state),
   drawerOpened: getDrawerOpened(state),
+  drawerView: getDrawerView(state),
   launchbarExpanded: getLaunchbarExpanded(state),
   trackPanelModalOpened: getTrackPanelModalOpened(state),
   trackPanelModalView: getTrackPanelModalView(state),
@@ -121,7 +121,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
 });
 
 const mapDispatchToProps: DispatchProps = {
-  changeCurrentTrack,
+  changeDrawerView,
   closeTrackPanelModal,
   openTrackPanelModal,
   toggleDrawer,

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx

@@ -11,20 +11,23 @@ import styles from './TrackPanelList.scss';
 
 type TrackPanelListProps = {
   browserRef: RefObject<HTMLDivElement>;
-  currentTrack: string;
+  drawerView: string;
   launchbarExpanded: boolean;
   toggleDrawer: (drawerOpened: boolean) => void;
-  updateTrack: (currentTrack: string) => void;
+  updateDrawerView: (drawerView: string) => void;
 };
 
 const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
   props: TrackPanelListProps
 ) => {
-  const changeTrack = (currentTrack: string) => {
-    const { toggleDrawer, updateTrack } = props;
+  const changeDrawerView = (currentTrack: string) => {
+    const { drawerView, toggleDrawer, updateDrawerView } = props;
 
-    updateTrack(currentTrack);
-    toggleDrawer(true);
+    updateDrawerView(currentTrack);
+
+    if (!drawerView) {
+      toggleDrawer(true);
+    }
   };
 
   const getTrackPanelListClasses = () => {
@@ -35,13 +38,13 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
     return `${styles.trackPanelList} ${heightClass}`;
   };
 
-  const getTrackClass = (trackName: string): string => {
+  const getDrawerViewClass = (trackName: string): string => {
     if (trackName === 'gene') {
       return 'gene';
     }
 
-    if (props.currentTrack === trackName) {
-      return 'currentTrack';
+    if (props.drawerView === trackName) {
+      return styles.currentDrawerView;
     }
 
     return '';
@@ -50,8 +53,8 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
   const getTrackListItem = (track: TrackPanelItem) => (
     <TrackPanelListItem
       browserRef={props.browserRef}
-      className={getTrackClass(track.name)}
-      changeTrack={changeTrack}
+      className={getDrawerViewClass(track.name)}
+      updateDrawerView={changeDrawerView}
       key={track.id}
       track={track}
     >

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.scss

@@ -25,7 +25,7 @@
   }
 
   &:hover,
-  &.currentTrack {
+  &.currentDrawerView {
     background: lighten($ens-blue, 40%);
   }
 

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx

@@ -17,7 +17,7 @@ type TrackPanelListItemProps = {
   children?: ReactNode[];
   className: string;
   track: TrackPanelItem;
-  changeTrack: (name: string) => void;
+  updateDrawerView: (drawerView: string) => void;
 };
 
 // delete this when there is a better place to put this
@@ -33,8 +33,8 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
   const { ellipsis, eye } = trackPanelIconConfig;
   const listItemClass = styles[className] || '';
 
-  const changeTrackHandler = () => {
-    props.changeTrack(props.track.name);
+  const changeDrawerViewHandler = () => {
+    props.updateDrawerView(props.track.name);
   };
 
   const toggleExpand = () => {
@@ -83,7 +83,7 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
             </button>
           )}
         </label>
-        <button onClick={changeTrackHandler}>
+        <button onClick={changeDrawerViewHandler}>
           <img src={ellipsis.icon.on} alt={`Go to ${track.label}`} />
         </button>
         <button onClick={toggleTrack}>