add BrowserTabs and hide browser bar info when genome selector is on focus

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

@@ -11,11 +11,11 @@
 
 .browserImageWrapper {
   &.semiExpanded {
-    width: calc(100vw - 357px);
+    width: calc(100vw - 356px);
   }
 
   &.expanded {
-    width: calc(100vw - 37px);
+    width: calc(100vw - 36px);
   }
 
   &.collapsed {
@@ -26,3 +26,12 @@
     }
   }
 }
+
+.browserOverlay {
+  background: $ens-white;
+  height: 100%;
+  opacity: 0.7;
+  position: absolute;
+  width: 100vw;
+  z-index: 150;
+}

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

@@ -30,7 +30,8 @@ import {
   getBrowserOpenState,
   getDrawerOpened,
   getBrowserNavOpened,
-  getChrLocation
+  getChrLocation,
+  getGenomeSelectorActive
 } from './browserSelectors';
 
 import styles from './Browser.scss';
@@ -43,6 +44,7 @@ type StateProps = {
   browserOpenState: BrowserOpenState;
   chrLocation: ChrLocation;
   drawerOpened: boolean;
+  genomeSelectorActive: boolean;
 };
 
 type DispatchProps = {
@@ -124,6 +126,9 @@ export const Browser: FunctionComponent<BrowserProps> = (
   return (
     <section className={styles.browser}>
       <BrowserBar changeBrowserLocation={changeBrowserLocation} />
+      {props.genomeSelectorActive ? (
+        <div className={styles.browserOverlay} />
+      ) : null}
       <div className={styles.browserInnerWrapper}>
         <div
           className={`${styles.browserImageWrapper} ${
@@ -151,7 +156,8 @@ const mapStateToProps = (state: RootState): StateProps => ({
   browserNavOpened: getBrowserNavOpened(state),
   browserOpenState: getBrowserOpenState(state),
   chrLocation: getChrLocation(state),
-  drawerOpened: getDrawerOpened(state)
+  drawerOpened: getDrawerOpened(state),
+  genomeSelectorActive: getGenomeSelectorActive(state)
 });
 
 const mapDispatchToProps: DispatchProps = {

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

@@ -79,36 +79,3 @@
     }
   }
 }
-
-.browserTabs {
-  @include flex;
-  font-size: 13px;
-  justify-content: space-between;
-  margin-left: 44px;
-  padding-right: 5px;
-  width: 312px;
-
-  button {
-    color: $ens-blue;
-
-    &.active {
-      color: inherit;
-      position: relative;
-
-      &::after {
-        border: 6px solid $ens-grey;
-        border-color: transparent transparent $ens-light-grey $ens-light-grey;
-        box-shadow: -2px 2px 2px 0 $ens-grey;
-        box-sizing: border-box;
-        content: '';
-        height: 0;
-        position: absolute;
-        right: calc(60% - 6px);
-        transform-origin: 0 0;
-        transform: rotate(-45deg);
-        top: 21px;
-        width: 0;
-      }
-    }
-  }
-}

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

-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, Fragment } from 'react';
 import { connect } from 'react-redux';
 
 import { browserInfoConfig } from '../browserConfig';
 import {
   toggleBrowserNav,
   updateDefaultChrLocation,
-  updateChrLocation
+  updateChrLocation,
+  toggleGenomeSelector
 } from '../browserActions';
 import { ChrLocation } from '../browserState';
 import {
   getBrowserNavOpened,
   getChrLocation,
   getBrowserActivated,
-  getDefaultChrLocation
+  getDefaultChrLocation,
+  getGenomeSelectorActive
 } from '../browserSelectors';
 import { RootState } from 'src/rootReducer';
 
 import BrowserReset from '../browser-reset/BrowserReset';
 import BrowserGenomeSelector from '../browser-genome-selector/BrowserGenomeSelector';
+import BrowserTabs from '../browser-tabs/BrowserTabs';
 
 import styles from './BrowserBar.scss';
 
@@ -26,10 +29,12 @@ type StateProps = {
   browserNavOpened: boolean;
   chrLocation: ChrLocation;
   defaultChrLocation: ChrLocation;
+  genomeSelectorActive: boolean;
 };
 
 type DispatchProps = {
   toggleBrowserNav: () => void;
+  toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
   updateChrLocation: (chrLocation: ChrLocation) => void;
   updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
 };
@@ -56,57 +61,55 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
             defaultChrLocation={props.defaultChrLocation}
             updateChrLocation={props.updateChrLocation}
           />
-          <dd className={styles.geneSymbol}>
-            <label>Gene</label>
-            <span className={styles.value}>BRAC2</span>
-          </dd>
-          <dd>
-            <label>Stable ID</label>
-            <span className={styles.value}>ENSG00000139618</span>
-          </dd>
-          <dd className="show-for-large">
-            <label>Spliced mRNA length</label>
-            <span className={styles.value}>84,793</span>
-            <label>bp</label>
-          </dd>
-          <dd className="show-for-large">protein coding</dd>
-          <dd className="show-for-large">forward strand</dd>
+          {props.genomeSelectorActive ? null : (
+            <Fragment>
+              <dd className={styles.geneSymbol}>
+                <label>Gene</label>
+                <span className={styles.value}>BRAC2</span>
+              </dd>
+              <dd>
+                <label>Stable ID</label>
+                <span className={styles.value}>ENSG00000139618</span>
+              </dd>
+              <dd className="show-for-large">
+                <label>Spliced mRNA length</label>
+                <span className={styles.value}>84,793</span>
+                <label>bp</label>
+              </dd>
+              <dd className="show-for-large">protein coding</dd>
+              <dd className="show-for-large">forward strand</dd>
+            </Fragment>
+          )}
         </dl>
         <dl className={styles.browserInfoRight}>
           <BrowserGenomeSelector
             browserActivated={props.browserActivated}
             changeBrowserLocation={props.changeBrowserLocation}
             defaultChrLocation={props.defaultChrLocation}
+            genomeSelectorActive={props.genomeSelectorActive}
+            toggleGenomeSelector={props.toggleGenomeSelector}
             updateDefaultChrLocation={props.updateDefaultChrLocation}
           />
-          <dd className={styles.navigator}>
-            <button
-              title={navigator.description}
-              onClick={props.toggleBrowserNav}
-            >
-              <img
-                src={
-                  props.browserNavOpened
-                    ? navigator.icon.selected
-                    : navigator.icon.default
-                }
-                alt={navigator.description}
-              />
-            </button>
-          </dd>
+          {props.genomeSelectorActive ? null : (
+            <dd className={styles.navigator}>
+              <button
+                title={navigator.description}
+                onClick={props.toggleBrowserNav}
+              >
+                <img
+                  src={
+                    props.browserNavOpened
+                      ? navigator.icon.selected
+                      : navigator.icon.default
+                  }
+                  alt={navigator.description}
+                />
+              </button>
+            </dd>
+          )}
         </dl>
       </div>
-      <dl className={`${styles.browserTabs} show-for-large`}>
-        <dd>
-          <button className={styles.active}>Genomic</button>
-        </dd>
-        <dd>
-          <button>Variation</button>
-        </dd>
-        <dd>
-          <button>Expression</button>
-        </dd>
-      </dl>
+      <BrowserTabs />
     </div>
   );
 };
@@ -115,11 +118,13 @@ const mapStateToProps = (state: RootState): StateProps => ({
   browserActivated: getBrowserActivated(state),
   browserNavOpened: getBrowserNavOpened(state),
   chrLocation: getChrLocation(state),
-  defaultChrLocation: getDefaultChrLocation(state)
+  defaultChrLocation: getDefaultChrLocation(state),
+  genomeSelectorActive: getGenomeSelectorActive(state)
 });
 
 const mapDispatchToProps: DispatchProps = {
   toggleBrowserNav,
+  toggleGenomeSelector,
   updateChrLocation,
   updateDefaultChrLocation
 };

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

@@ -18,6 +18,8 @@ type BrowserGenomeSelectorProps = {
   browserActivated: boolean;
   changeBrowserLocation: () => void;
   defaultChrLocation: ChrLocation;
+  genomeSelectorActive: boolean;
+  toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
   updateDefaultChrLocation: (chrLocation: ChrLocation) => void;
 };
 
@@ -25,7 +27,6 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
   props: BrowserGenomeSelectorProps
 ) => {
   const chrLocationStr = getChrLocationStr(props.defaultChrLocation);
-  const [showInputs, setShowInputs] = useState(false);
 
   const [chrLocationPlaceholder, setChrLocationPlaceholder] = useState('');
   const [chrLocationInput, setChrLocationInput] = useState('');
@@ -38,7 +39,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
 
   const activateForm = () => {
     setChrLocationPlaceholder(chrLocationStr);
-    setShowInputs(true);
+    props.toggleGenomeSelector(true);
   };
 
   const changeChrLocationInput = (event: ChangeEvent<HTMLInputElement>) =>
@@ -46,7 +47,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
 
   const closeForm = () => {
     setChrLocationInput('');
-    setShowInputs(false);
+    props.toggleGenomeSelector(false);
   };
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -73,7 +74,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
 
   return props.browserActivated ? (
     <dd className={styles.browserGenomeSelector}>
-      {showInputs ? (
+      {props.genomeSelectorActive ? (
         <form onSubmit={handleSubmit}>
           <input
             type="text"

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

+@import 'src/styles/common';
+
+.browserTabs {
+  @include flex;
+  font-size: 13px;
+  justify-content: space-between;
+  margin-left: 44px;
+  padding-right: 5px;
+  width: 312px;
+}
+
+.browserTab {
+  color: $ens-blue;
+}
+
+.browserTabActive {
+  color: inherit;
+}
+
+.browserTabArrow {
+  position: relative;
+
+  &::after {
+    border: 6px solid $ens-grey;
+    border-color: transparent transparent $ens-light-grey $ens-light-grey;
+    box-shadow: -2px 2px 2px 0 $ens-grey;
+    box-sizing: border-box;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: calc(60% - 6px);
+    transform-origin: 0 0;
+    transform: rotate(-45deg);
+    top: 21px;
+    width: 0;
+  }
+}

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

+import React, { FunctionComponent } from 'react';
+
+import styles from './BrowserTabs.scss';
+
+type BrowserTabsProps = {};
+
+const BrowserTabs: FunctionComponent<BrowserTabsProps> = (
+  props: BrowserTabsProps
+) => {
+  return (
+    <dl className={`${styles.browserTabs} show-for-large`}>
+      <dd>
+        <button className={styles.browserTabActive}>Genomic</button>
+      </dd>
+      <dd>
+        <button>Variation</button>
+      </dd>
+      <dd>
+        <button>Expression</button>
+      </dd>
+    </dl>
+  );
+};
+
+export default BrowserTabs;

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

@@ -61,3 +61,10 @@ export const openTrackPanelModal = createAction(
 export const closeTrackPanelModal = createAction(
   'browser/close-track-panel-modal'
 );
+
+export const toggleGenomeSelector = createAction(
+  'toggle-genome-selector',
+  (resolve) => {
+    return (genomeSelectorActive: boolean) => resolve(genomeSelectorActive);
+  }
+);

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

@@ -48,6 +48,8 @@ export default (
         trackPanelModalOpened: false,
         trackPanelModalView: ''
       };
+    case getType(browser.toggleGenomeSelector):
+      return { ...state, genomeSelectorActive: action.payload };
     default:
       return state;
   }

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

@@ -37,3 +37,6 @@ export const getTrackPanelModalOpened = (state: RootState): boolean =>
 
 export const getTrackPanelModalView = (state: RootState): string =>
   state.browser.trackPanelModalView;
+
+export const getGenomeSelectorActive = (state: RootState): boolean =>
+  state.browser.genomeSelectorActive;

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

@@ -25,6 +25,7 @@ export type BrowserState = Readonly<{
   defaultChrLocation: ChrLocation;
   drawerOpened: boolean;
   drawerView: string;
+  genomeSelectorActive: boolean;
   trackPanelModalOpened: boolean;
   trackPanelModalView: string;
   trackPanelOpened: boolean;
@@ -39,6 +40,7 @@ export const defaultState: BrowserState = {
   defaultChrLocation: ['13', 0, 0],
   drawerOpened: false,
   drawerView: '',
+  genomeSelectorActive: false,
   trackPanelModalOpened: false,
   trackPanelModalView: '',
   trackPanelOpened: true