make selectors return the genome specific values for drawer and some browser...

make selectors return the genome specific values for drawer and some browser specific state properties

src/ensembl/src/content/app/browser/Browser.tsx

@@ -35,7 +35,7 @@ import {
 import { getLaunchbarExpanded } from 'src/header/headerSelectors';
 import { getTrackPanelOpened } from './track-panel/trackPanelSelectors';
 import { getChrLocationFromStr, getChrLocationStr } from './browserHelper';
-import { getDrawerOpened } from './drawer/drawerSelectors';
+import { getIsDrawerOpened } from './drawer/drawerSelectors';
 import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
 import { CommittedItem } from 'src/content/app/species-selector/types/species-search';
 import { getExampleEnsObjects } from 'src/ens-object/ensObjectSelectors';
@@ -55,7 +55,7 @@ import styles from './Browser.scss';
 import 'static/browser/browser.js';
 
 type StateProps = {
-  activeGenomeId: string;
+  activeGenomeId: string | null;
   activeEnsObjectId: string | null;
   allActiveEnsObjectIds: { [genomeId: string]: string };
   browserActivated: boolean;
@@ -63,7 +63,7 @@ type StateProps = {
   browserQueryParams: { [key: string]: string };
   chrLocation: ChrLocation | null;
   allChrLocations: { [genomeId: string]: ChrLocation };
-  drawerOpened: { [genomeId: string]: boolean };
+  isDrawerOpened: boolean;
   genomeSelectorActive: boolean;
   trackPanelOpened: boolean;
   launchbarExpanded: boolean;
@@ -79,7 +79,7 @@ type DispatchProps = {
   ) => void;
   fetchGenomeData: (genomeId: string) => void;
   replace: Replace;
-  toggleDrawer: (drawerOpened: boolean) => void;
+  toggleDrawer: (isDrawerOpened: boolean) => void;
   setDataFromUrlAndSave: (payload: ParsedUrlPayload) => void;
 };
 
@@ -102,7 +102,8 @@ export const Browser: FunctionComponent<BrowserProps> = (
     TrackStates
   >({});
   const lastGenomeIdRef = useRef(props.activeGenomeId);
-  const drawerOpenedForGenome = props.drawerOpened[props.activeGenomeId];
+
+  const { isDrawerOpened } = props;
 
   const setDataFromUrl = () => {
     const { genomeId = null } = props.match.params;
@@ -254,7 +255,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
   }, [props.chrLocation]);
 
   const closeTrack = () => {
-    if (drawerOpenedForGenome === false) {
+    if (isDrawerOpened) {
       return;
     }
 
@@ -268,7 +269,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
   }));
 
   const getBrowserWidth = (): string => {
-    if (drawerOpenedForGenome === true) {
+    if (isDrawerOpened) {
       return 'calc(41px + 0vw)';
     }
     return props.trackPanelOpened
@@ -280,7 +281,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
     setTrackAnimation({
       width: getBrowserWidth()
     });
-  }, [drawerOpenedForGenome, props.trackPanelOpened]);
+  }, [isDrawerOpened, props.trackPanelOpened]);
 
   const getHeightClass = (launchbarExpanded: boolean): string => {
     return launchbarExpanded ? styles.shorter : styles.taller;
@@ -314,7 +315,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
             <animated.div style={trackAnimation}>
               <div className={styles.browserImageWrapper} onClick={closeTrack}>
                 {props.browserNavOpened &&
-                !drawerOpenedForGenome &&
+                !isDrawerOpened &&
                 browserRef.current ? (
                   <BrowserNavBar browserElement={browserRef.current} />
                 ) : null}
@@ -369,7 +370,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
   browserQueryParams: getBrowserQueryParams(state),
   chrLocation: getChrLocation(state),
   allChrLocations: getAllChrLocations(state),
-  drawerOpened: getDrawerOpened(state),
+  isDrawerOpened: getIsDrawerOpened(state),
   genomeSelectorActive: getGenomeSelectorActive(state),
   trackPanelOpened: getTrackPanelOpened(state),
   launchbarExpanded: getLaunchbarExpanded(state),

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx

@@ -16,7 +16,7 @@ import {
   getBrowserActiveGenomeId,
   getBrowserActiveEnsObject
 } from '../browserSelectors';
-import { getDrawerOpened } from '../drawer/drawerSelectors';
+import { getIsDrawerOpened } from '../drawer/drawerSelectors';
 import {
   getSelectedBrowserTab,
   getTrackPanelModalOpened,
@@ -34,15 +34,15 @@ import BrowserTabs from '../browser-tabs/BrowserTabs';
 import styles from './BrowserBar.scss';
 
 type StateProps = {
-  activeGenomeId: string;
+  activeGenomeId: string | null;
   browserActivated: boolean;
   browserNavOpened: boolean;
   chrLocation: ChrLocation | null;
   defaultChrLocation: ChrLocation | null;
-  drawerOpened: { [genomeId: string]: boolean };
+  isDrawerOpened: boolean;
   genomeSelectorActive: boolean;
   ensObject: EnsObject | null;
-  selectedBrowserTab: { [genomeId: string]: TrackType };
+  selectedBrowserTab: TrackType;
   trackPanelModalOpened: boolean;
   trackPanelOpened: boolean;
 };
@@ -50,7 +50,7 @@ type StateProps = {
 type DispatchProps = {
   selectBrowserTabAndSave: (selectedBrowserTab: TrackType) => void;
   toggleBrowserNav: () => void;
-  toggleDrawer: (drawerOpened: boolean) => void;
+  toggleDrawer: (isDrawerOpened: boolean) => void;
   toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
 };
 
@@ -73,7 +73,7 @@ type BrowserNavigatorButtonProps = {
 export const BrowserBar: FunctionComponent<BrowserBarProps> = (
   props: BrowserBarProps
 ) => {
-  const drawerOpenedForGenome = props.drawerOpened[props.activeGenomeId];
+  const { isDrawerOpened } = props;
 
   const shouldShowBrowserInfo = () => {
     const { defaultChrLocation } = props;
@@ -99,7 +99,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
   }, [props.defaultChrLocation, props.genomeSelectorActive]);
 
   const getBrowserNavIcon = () => {
-    if (drawerOpenedForGenome === true) {
+    if (isDrawerOpened) {
       return navigator.icon.grey as string;
     } else if (props.browserNavOpened) {
       return navigator.icon.selected as string;
@@ -109,7 +109,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
   };
 
   const toggleNavigator = () => {
-    if (drawerOpenedForGenome === true) {
+    if (isDrawerOpened) {
       return;
     }
 
@@ -118,7 +118,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
 
   const className = classNames(styles.browserInfo, {
     [styles.browserInfoExpanded]: !props.trackPanelOpened,
-    [styles.browserInfoGreyed]: drawerOpenedForGenome
+    [styles.browserInfoGreyed]: isDrawerOpened
   });
 
   if (!(props.chrLocation && props.ensObject)) {
@@ -134,7 +134,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
             dispatchBrowserLocation={props.dispatchBrowserLocation}
             chrLocation={props.chrLocation}
             defaultChrLocation={props.defaultChrLocation}
-            drawerOpened={props.drawerOpened}
+            isDrawerOpened={isDrawerOpened}
           />
           {showBrowserInfo && <BrowserInfo ensObject={props.ensObject} />}
         </dl>
@@ -144,7 +144,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
             browserActivated={props.browserActivated}
             dispatchBrowserLocation={props.dispatchBrowserLocation}
             chrLocation={props.chrLocation}
-            drawerOpened={props.drawerOpened}
+            isDrawerOpened={isDrawerOpened}
             genomeSelectorActive={props.genomeSelectorActive}
             toggleGenomeSelector={props.toggleGenomeSelector}
           />
@@ -159,9 +159,8 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
       </div>
       {props.trackPanelOpened && props.activeGenomeId && (
         <BrowserTabs
-          activeGenomeId={props.activeGenomeId}
           ensObject={props.ensObject}
-          drawerOpened={props.drawerOpened}
+          isDrawerOpened={props.isDrawerOpened}
           genomeSelectorActive={props.genomeSelectorActive}
           selectBrowserTabAndSave={props.selectBrowserTabAndSave}
           selectedBrowserTab={props.selectedBrowserTab}
@@ -228,7 +227,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
   browserNavOpened: getBrowserNavOpened(state),
   chrLocation: getChrLocation(state),
   defaultChrLocation: getDefaultChrLocation(state),
-  drawerOpened: getDrawerOpened(state),
+  isDrawerOpened: getIsDrawerOpened(state),
   ensObject: getBrowserActiveEnsObject(state),
   genomeSelectorActive: getGenomeSelectorActive(state),
   selectedBrowserTab: getSelectedBrowserTab(state),

src/ensembl/src/content/app/browser/browser-genome-selector/BrowserGenomeSelector.tsx

@@ -15,11 +15,11 @@ import styles from './BrowserGenomeSelector.scss';
 import { getChrLocationStr } from '../browserHelper';
 
 type BrowserGenomeSelectorProps = {
-  activeGenomeId: string;
+  activeGenomeId: string | null;
   browserActivated: boolean;
   chrLocation: ChrLocation;
   dispatchBrowserLocation: (genomeId: string, chrLocation: ChrLocation) => void;
-  drawerOpened: { [genomeId: string]: boolean };
+  isDrawerOpened: boolean;
   genomeSelectorActive: boolean;
   toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
 };
@@ -27,7 +27,7 @@ type BrowserGenomeSelectorProps = {
 const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
   props: BrowserGenomeSelectorProps
 ) => {
-  const { activeGenomeId, chrLocation, drawerOpened } = props;
+  const { activeGenomeId, chrLocation, isDrawerOpened } = props;
   const chrLocationStr = getChrLocationStr(chrLocation);
 
   const [chrLocationPlaceholder, setChrLocationPlaceholder] = useState('');
@@ -36,8 +36,6 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
   const [chrCode, chrStart, chrEnd] = chrLocation;
   const displayChrRegion = !(chrStart === 0 && chrEnd === 0);
 
-  const drawerOpenedForGenome = drawerOpened[activeGenomeId];
-
   useEffect(() => {
     setChrLocationPlaceholder(chrLocationStr);
   }, []);
@@ -45,7 +43,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
   const getGenomeSelectorClasses = () => {
     let classNames = styles.browserGenomeSelector;
 
-    if (drawerOpenedForGenome === true) {
+    if (isDrawerOpened) {
       classNames += ` ${styles.browserGenomeSelectorDisabled}`;
     }
 
@@ -53,7 +51,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
   };
 
   const activateForm = () => {
-    if (drawerOpenedForGenome === true) {
+    if (isDrawerOpened) {
       return;
     }
 

src/ensembl/src/content/app/browser/browser-reset/BrowserReset.tsx

@@ -10,11 +10,11 @@ import styles from './BrowserReset.scss';
 import { getChrLocationStr } from '../browserHelper';
 
 type BrowserResetProps = {
-  activeGenomeId: string;
+  activeGenomeId: string | null;
   chrLocation: ChrLocation | null;
   defaultChrLocation: ChrLocation | null;
   dispatchBrowserLocation: (genomeId: string, chrLocation: ChrLocation) => void;
-  drawerOpened: { [genomeId: string]: boolean };
+  isDrawerOpened: boolean;
 };
 
 export const BrowserReset: FunctionComponent<BrowserResetProps> = (
@@ -24,11 +24,9 @@ export const BrowserReset: FunctionComponent<BrowserResetProps> = (
     activeGenomeId,
     chrLocation,
     defaultChrLocation,
-    drawerOpened
+    isDrawerOpened
   } = props;
 
-  const drawerOpenedForGenome = drawerOpened[activeGenomeId];
-
   const getResetIconStatus = (): ImageButtonStatus => {
     if (!(activeGenomeId && chrLocation && defaultChrLocation)) {
       return ImageButtonStatus.DISABLED;
@@ -37,10 +35,7 @@ export const BrowserReset: FunctionComponent<BrowserResetProps> = (
     const chrLocationStr = getChrLocationStr(chrLocation);
     const defaultChrLocationStr = getChrLocationStr(defaultChrLocation);
 
-    if (
-      chrLocationStr === defaultChrLocationStr ||
-      drawerOpenedForGenome === true
-    ) {
+    if (chrLocationStr === defaultChrLocationStr || isDrawerOpened) {
       return ImageButtonStatus.DISABLED;
     }
 
@@ -48,7 +43,7 @@ export const BrowserReset: FunctionComponent<BrowserResetProps> = (
   };
 
   const resetBrowser = () => {
-    if (drawerOpenedForGenome === true) {
+    if (isDrawerOpened) {
       return;
     }
 

src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.tsx

@@ -5,27 +5,24 @@ import { EnsObject } from 'src/ens-object/ensObjectTypes';
 import styles from './BrowserTabs.scss';
 
 type BrowserTabsProps = {
-  activeGenomeId: string;
   ensObject: EnsObject;
-  drawerOpened: { [genomeId: string]: boolean };
+  isDrawerOpened: boolean;
   genomeSelectorActive: boolean;
   selectBrowserTabAndSave: (selectedBrowserTab: TrackType) => void;
-  selectedBrowserTab: { [genomeId: string]: TrackType };
-  toggleDrawer: (drawerOpened: boolean) => void;
+  selectedBrowserTab: TrackType;
+  toggleDrawer: (isDrawerOpened: boolean) => void;
   trackPanelModalOpened: boolean;
 };
 
 const BrowserTabs: FunctionComponent<BrowserTabsProps> = (
   props: BrowserTabsProps
 ) => {
-  const drawerOpenedForGenome = props.drawerOpened[props.activeGenomeId];
-
   const handleTabClick = (value: TrackType) => {
     if (props.genomeSelectorActive || !props.ensObject.genome_id) {
       return;
     }
 
-    if (drawerOpenedForGenome === true) {
+    if (props.isDrawerOpened) {
       props.toggleDrawer(false);
     }
 
@@ -33,15 +30,13 @@ const BrowserTabs: FunctionComponent<BrowserTabsProps> = (
   };
 
   const getBrowserTabClasses = (trackType: TrackType) => {
-    const { activeGenomeId, drawerOpened, trackPanelModalOpened } = props;
-    const selectedBrowserTab =
-      props.selectedBrowserTab[activeGenomeId] || TrackType.GENOMIC;
+    const { isDrawerOpened, selectedBrowserTab, trackPanelModalOpened } = props;
     let classNames = styles.browserTab;
 
     if (
       props.ensObject.genome_id &&
       selectedBrowserTab === trackType &&
-      drawerOpened[activeGenomeId] === false &&
+      isDrawerOpened === false &&
       trackPanelModalOpened === false
     ) {
       classNames += ` ${styles.browserTabActive} ${styles.browserTabArrow}`;

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

@@ -15,7 +15,7 @@ export const getBrowserActivated = (state: RootState): boolean =>
 export const getBrowserOpenState = (state: RootState): BrowserOpenState =>
   state.browser.browserInfo.browserOpenState;
 
-export const getBrowserActiveGenomeId = (state: RootState): string =>
+export const getBrowserActiveGenomeId = (state: RootState) =>
   state.browser.browserEntity.activeGenomeId;
 
 export const getBrowserActiveGenomeInfo = (state: RootState) => {

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

@@ -42,7 +42,7 @@ export const defaultBrowserState: BrowserState = {
 };
 
 export type BrowserEntityState = Readonly<{
-  activeGenomeId: string;
+  activeGenomeId: string | null;
   activeEnsObjectIds: { [genomeId: string]: string };
   trackStates: TrackStates;
 }>;

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

@@ -4,10 +4,7 @@ import { connect } from 'react-redux';
 import { RootState } from 'src/store';
 import { toggleDrawer } from './drawerActions';
 import { getDrawerView } from './drawerSelectors';
-import {
-  getBrowserActiveEnsObject,
-  getBrowserActiveGenomeId
-} from '../browserSelectors';
+import { getBrowserActiveEnsObject } from '../browserSelectors';
 
 import DrawerGene from './drawer-views/DrawerGene';
 import DrawerTranscript from './drawer-views/DrawerTranscript';
@@ -24,13 +21,12 @@ import SnpIndels from './drawer-views/SnpIndels';
 import { EnsObject } from 'src/ens-object/ensObjectTypes';
 
 type StateProps = {
-  activeGenomeId: string;
-  drawerView: { [genomeId: string]: string };
+  drawerView: string;
   ensObject: EnsObject | null;
 };
 
 type DispatchProps = {
-  toggleDrawer: (drawerOpened: boolean) => void;
+  toggleDrawer: (isDrawerOpened: boolean) => void;
 };
 
 type OwnProps = {};
@@ -38,14 +34,14 @@ type OwnProps = {};
 type DrawerProps = StateProps & DispatchProps & OwnProps;
 
 const Drawer: FunctionComponent<DrawerProps> = (props: DrawerProps) => {
-  const { ensObject, drawerView, activeGenomeId } = props;
+  const { ensObject, drawerView } = props;
 
   if (!ensObject) {
     return null;
   }
 
   const getDrawerViewComponent = () => {
-    switch (drawerView[activeGenomeId]) {
+    switch (drawerView) {
       case 'gene-feat':
         return <DrawerGene ensObject={ensObject} />;
       case 'gene-feat-1':
@@ -80,7 +76,6 @@ const Drawer: FunctionComponent<DrawerProps> = (props: DrawerProps) => {
 };
 
 const mapStateToProps = (state: RootState): StateProps => ({
-  activeGenomeId: getBrowserActiveGenomeId(state),
   drawerView: getDrawerView(state),
   ensObject: getBrowserActiveEnsObject(state)
 });

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

@@ -26,24 +26,24 @@ export const changeDrawerView: ActionCreator<
     return;
   }
 
-  const drawerView = {
-    [activeGenomeId]: drawerViewForGenome
-  };
-
-  dispatch(changeDrawerViewForGenome(drawerView));
+  dispatch(
+    changeDrawerViewForGenome({
+      [activeGenomeId]: drawerViewForGenome
+    })
+  );
 };
 
 export const toggleDrawerForGenome = createAction(
   'drawer/toggle-drawer',
   (resolve) => {
-    return (drawerOpened: { [genomeId: string]: boolean }) =>
-      resolve(drawerOpened, getDrawerAnalyticsObject('User Interaction'));
+    return (isDrawerOpened: { [genomeId: string]: boolean }) =>
+      resolve(isDrawerOpened, getDrawerAnalyticsObject('User Interaction'));
   }
 );
 
 export const toggleDrawer: ActionCreator<
   ThunkAction<void, any, null, Action<boolean>>
-> = (drawerOpened: boolean) => (
+> = (isDrawerOpened: boolean) => (
   dispatch: Dispatch,
   getState: () => RootState
 ) => {
@@ -53,9 +53,9 @@ export const toggleDrawer: ActionCreator<
     return;
   }
 
-  const drawerOpenedForGenome = {
-    [activeGenomeId]: drawerOpened
-  };
-
-  dispatch(toggleDrawerForGenome(drawerOpenedForGenome));
+  dispatch(
+    toggleDrawerForGenome({
+      [activeGenomeId]: isDrawerOpened
+    })
+  );
 };

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

@@ -22,7 +22,7 @@ export default function drawer(
 
       return {
         ...state,
-        drawerOpened: { ...state.drawerOpened, ...action.payload },
+        isDrawerOpened: { ...state.isDrawerOpened, ...action.payload },
         drawerView: { ...state.drawerView, [genomeId]: drawerViewForGenome }
       };
     default:

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

 import { RootState } from 'src/store';
+import { getBrowserActiveEnsObjectId } from '../browserSelectors';
 
-export const getDrawerView = (state: RootState) => state.drawer.drawerView;
+export const getDrawerView = (state: RootState) => {
+  const activeGenomeId = getBrowserActiveEnsObjectId(state);
+  return activeGenomeId ? state.drawer.drawerView[activeGenomeId] : '';
+};
 
-export const getDrawerOpened = (state: RootState) => state.drawer.drawerOpened;
+export const getIsDrawerOpened = (state: RootState) => {
+  const activeGenomeId = getBrowserActiveEnsObjectId(state);
+  return activeGenomeId ? state.drawer.isDrawerOpened[activeGenomeId] : false;
+};

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

 export type DrawerState = Readonly<{
-  drawerOpened: { [genomeId: string]: boolean };
+  isDrawerOpened: { [genomeId: string]: boolean };
   drawerView: { [genomeId: string]: string };
 }>;
 
 export const defaultDrawerState = {
-  drawerOpened: {},
+  isDrawerOpened: {},
   drawerView: {}
 };

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

@@ -24,7 +24,7 @@ import {
   getTrackPanelModalView,
   getSelectedBrowserTab
 } from './trackPanelSelectors';
-import { getDrawerView, getDrawerOpened } from '../drawer/drawerSelectors';
+import { getDrawerView, getIsDrawerOpened } from '../drawer/drawerSelectors';
 import {
   getBrowserActivated,
   getBrowserActiveGenomeId,
@@ -43,14 +43,14 @@ import { EnsObject } from 'src/ens-object/ensObjectTypes';
 import styles from './TrackPanel.scss';
 
 type StateProps = {
-  activeGenomeId: string;
+  activeGenomeId: string | null;
   breakpointWidth: BreakpointWidth;
   browserActivated: boolean;
-  drawerOpened: { [genomeId: string]: boolean };
-  drawerView: { [genomeId: string]: string };
+  isDrawerOpened: boolean;
+  drawerView: string;
   ensObject: EnsObject | null;
   launchbarExpanded: boolean;
-  selectedBrowserTab: { [genomeId: string]: TrackType };
+  selectedBrowserTab: TrackType;
   genomeTrackCategories: GenomeTrackCategory[];
   trackPanelModalOpened: boolean;
   trackPanelModalView: string;
@@ -62,7 +62,7 @@ type DispatchProps = {
   changeDrawerView: (drawerView: string) => void;
   closeTrackPanelModal: () => void;
   openTrackPanelModal: (trackPanelModalView: string) => void;
-  toggleDrawer: (drawerOpened: boolean) => void;
+  toggleDrawer: (isDrawerOpened: boolean) => void;
   toggleTrackPanel: (trackPanelOpened?: boolean) => void;
   updateTrackStates: (payload: UpdateTrackStatesPayload) => void;
 };
@@ -76,8 +76,7 @@ type TrackPanelProps = StateProps & DispatchProps & OwnProps;
 const TrackPanel: FunctionComponent<TrackPanelProps> = (
   props: TrackPanelProps
 ) => {
-  const drawerOpenedForGenome =
-    props.drawerOpened[props.activeGenomeId as string];
+  const { isDrawerOpened } = props;
 
   useEffect(() => {
     if (props.breakpointWidth !== BreakpointWidth.LARGE) {
@@ -96,7 +95,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
   }));
 
   const getBrowserWidth = (): string => {
-    if (drawerOpenedForGenome === true) {
+    if (isDrawerOpened) {
       return 'calc(41px + 0vw)';
     }
     return props.trackPanelOpened
@@ -108,7 +107,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
     setTrackAnimation({
       left: getBrowserWidth()
     });
-  }, [drawerOpenedForGenome, props.trackPanelOpened]);
+  }, [isDrawerOpened, props.trackPanelOpened]);
 
   return props.activeGenomeId ? (
     <animated.div style={trackAnimation}>
@@ -117,7 +116,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
           <TrackPanelBar
             activeGenomeId={props.activeGenomeId}
             closeTrackPanelModal={props.closeTrackPanelModal}
-            drawerOpened={props.drawerOpened}
+            isDrawerOpened={props.isDrawerOpened}
             launchbarExpanded={props.launchbarExpanded}
             openTrackPanelModal={props.openTrackPanelModal}
             toggleDrawer={props.toggleDrawer}
@@ -129,7 +128,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
           <TrackPanelList
             activeGenomeId={props.activeGenomeId}
             browserRef={props.browserRef}
-            drawerOpened={props.drawerOpened}
+            isDrawerOpened={props.isDrawerOpened}
             drawerView={props.drawerView}
             launchbarExpanded={props.launchbarExpanded}
             ensObject={props.ensObject}
@@ -148,7 +147,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
               trackPanelModalView={props.trackPanelModalView}
             />