add track panel modal view

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

@@ -6,7 +6,7 @@
   box-shadow: 0 2px 3px $ens-grey;
   padding: 7px 0 3px 0;
   position: relative;
-  z-index: 1;
+  z-index: 200;
 
   dd {
     display: inline-block;

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

@@ -2,5 +2,5 @@
 
 .trackPanel {
   @include flex;
-  border-left: 1px solid $ens-medium-grey;
+  position: relative;
 }

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

@@ -14,14 +14,18 @@ import { RootState } from 'src/rootReducer';
 import {
   toggleDrawer,
   toggleTrackPanel,
-  changeCurrentTrack
+  changeCurrentTrack,
+  closeTrackPanelModal,
+  openTrackPanelModal
 } from '../browserActions';
 
 import {
   getCurrentTrack,
   getDrawerOpened,
   getTrackPanelOpened,
-  getBrowserActivated
+  getBrowserActivated,
+  getTrackPanelModalOpened,
+  getTrackPanelModalView
 } from '../browserSelectors';
 
 import { getLaunchbarExpanded } from 'src/header/headerSelectors';
@@ -29,6 +33,7 @@ import { getBreakpointWidth } from 'src/globalSelectors';
 import { BreakpointWidth } from 'src/globalConfig';
 
 import styles from './TrackPanel.scss';
+import TrackPanelModal from './track-panel-modal/TrackPanelModal';
 
 type StateProps = {
   browserActivated: boolean;
@@ -36,11 +41,15 @@ type StateProps = {
   drawerOpened: boolean;
   breakpointWidth: BreakpointWidth;
   launchbarExpanded: boolean;
+  trackPanelModalOpened: boolean;
+  trackPanelModalView: string;
   trackPanelOpened: boolean;
 };
 
 type DispatchProps = {
   changeCurrentTrack: (currentTrack: string) => void;
+  closeTrackPanelModal: () => void;
+  openTrackPanelModal: (trackPanelModalView: string) => void;
   toggleDrawer: (drawerOpened: boolean) => void;
   toggleTrackPanel: (trackPanelOpened?: boolean) => void;
 };
@@ -67,20 +76,32 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
       {props.browserActivated && (
         <Fragment>
           <TrackPanelBar
+            closeTrackPanelModal={props.closeTrackPanelModal}
             drawerOpened={props.drawerOpened}
             launchbarExpanded={props.launchbarExpanded}
+            openTrackPanelModal={props.openTrackPanelModal}
             toggleDrawer={props.toggleDrawer}
             toggleTrackPanel={props.toggleTrackPanel}
+            trackPanelModalView={props.trackPanelModalView}
             trackPanelOpened={props.trackPanelOpened}
           />
           {props.trackPanelOpened ? (
-            <TrackPanelList
-              browserRef={props.browserRef}
-              currentTrack={props.currentTrack}
-              launchbarExpanded={props.launchbarExpanded}
-              toggleDrawer={props.toggleDrawer}
-              updateTrack={props.changeCurrentTrack}
-            />
+            <Fragment>
+              <TrackPanelList
+                browserRef={props.browserRef}
+                currentTrack={props.currentTrack}
+                launchbarExpanded={props.launchbarExpanded}
+                toggleDrawer={props.toggleDrawer}
+                updateTrack={props.changeCurrentTrack}
+              />
+              {props.trackPanelModalOpened ? (
+                <TrackPanelModal
+                  closeTrackPanelModal={props.closeTrackPanelModal}
+                  launchbarExpanded={props.launchbarExpanded}
+                  trackPanelModalView={props.trackPanelModalView}
+                />
+              ) : null}
+            </Fragment>
           ) : null}
         </Fragment>
       )}
@@ -94,11 +115,15 @@ const mapStateToProps = (state: RootState): StateProps => ({
   currentTrack: getCurrentTrack(state),
   drawerOpened: getDrawerOpened(state),
   launchbarExpanded: getLaunchbarExpanded(state),
+  trackPanelModalOpened: getTrackPanelModalOpened(state),
+  trackPanelModalView: getTrackPanelModalView(state),
   trackPanelOpened: getTrackPanelOpened(state)
 });
 
 const mapDispatchToProps: DispatchProps = {
   changeCurrentTrack,
+  closeTrackPanelModal,
+  openTrackPanelModal,
   toggleDrawer,
   toggleTrackPanel
 };

src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx

@@ -10,11 +10,14 @@ import chevronRightIcon from 'static/img/shared/chevron-right.svg';
 import styles from './TrackPanelBar.scss';
 
 type TrackPanelBarProps = {
-  toggleDrawer: (drawerOpened: boolean) => void;
+  closeTrackPanelModal: () => void;
   drawerOpened: boolean;
   launchbarExpanded: boolean;
-  trackPanelOpened: boolean;
+  openTrackPanelModal: (trackPanelModalView: string) => void;
+  toggleDrawer: (drawerOpened: boolean) => void;
   toggleTrackPanel: (trackPanelOpened?: boolean) => void;
+  trackPanelModalView: string;
+  trackPanelOpened: boolean;
 };
 
 const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
@@ -49,7 +52,13 @@ const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
           </button>
         </dt>
         {trackPanelBarConfig.map((item: TrackPanelBarItem) => (
-          <TrackPanelBarIcon key={item.name} iconConfig={item} />
+          <TrackPanelBarIcon
+            key={item.name}
+            iconConfig={item}
+            closeTrackPanelModal={props.closeTrackPanelModal}
+            openTrackPanelModal={props.openTrackPanelModal}
+            trackPanelModalView={props.trackPanelModalView}
+          />
         ))}
       </dl>
     </div>

src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBarIcon.tsx

-import React, { FunctionComponent, memo } from 'react';
+import React, { FunctionComponent, memo, useState, useCallback } from 'react';
 import { TrackPanelBarItem } from './trackPanelBarConfig';
 
 import styles from './TrackPanelBarIcon.scss';
 
 type TrackPanelBarIconProps = {
+  closeTrackPanelModal: () => void;
   iconConfig: TrackPanelBarItem;
+  openTrackPanelModal: (trackPanelModalView: string) => void;
+  trackPanelModalView: string;
 };
 
 const TrackPanelBarIcon: FunctionComponent<TrackPanelBarIconProps> = memo(
-  (props: TrackPanelBarIconProps) => (
-    <dt className={styles.barIcon}>
-      <button>
-        <img
-          src={props.iconConfig.icon.default}
-          alt={props.iconConfig.description}
-        />
-      </button>
-    </dt>
-  )
+  (props: TrackPanelBarIconProps) => {
+    const [toggleState, setToggleState] = useState(false);
+
+    const toggleModalView = useCallback(() => {
+      const newToggleState: boolean = !toggleState;
+
+      if (newToggleState === true) {
+        props.openTrackPanelModal(props.iconConfig.name);
+      } else {
+        props.closeTrackPanelModal();
+      }
+
+      setToggleState(newToggleState);
+    }, [props.iconConfig.name, toggleState]);
+
+    const getViewIcon = () => {
+      const { iconConfig, trackPanelModalView } = props;
+
+      return iconConfig.name === trackPanelModalView
+        ? iconConfig.icon.selected
+        : iconConfig.icon.default;
+    };
+
+    return (
+      <dt className={styles.barIcon}>
+        <button onClick={toggleModalView}>
+          <img src={getViewIcon()} alt={props.iconConfig.description} />
+        </button>
+      </dt>
+    );
+  }
 );
 
 export default TrackPanelBarIcon;

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/TrackPanelModal.scss

+@import 'src/styles/common';
+
+.trackPanelModal {
+  background: $ens-white;
+  font-weight: $light;
+  left: 36px;
+  padding: 10px 20px;
+  position: absolute;
+  width: 320px;
+  z-index: 100;
+
+  &.shorter {
+    height: calc(100vh - 177px);
+  }
+
+  &.taller {
+    height: calc(100vh - 129px);
+  }
+
+  h3 {
+    font-size: 14px;
+  }
+
+  p {
+    margin-bottom: 30px;
+  }
+}
+
+.closeButton {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+
+  img {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+.previouslyViewed {
+  margin-top: 60px;
+
+  dt {
+    font-size: 12px;
+  }
+
+  dd {
+    margin: 15px 0 0 15px;
+  }
+}

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/TrackPanelModal.tsx

+import React, { FunctionComponent } from 'react';
+
+import closeIcon from 'static/img/track-panel/close.svg';
+
+import TrackPanelSearch from './modal-views/TrackPanelSearch';
+import TracksManager from './modal-views/TracksManager';
+import TrackPanelBookmarks from './modal-views/TrackPanelBookmarks';
+import PersonalData from './modal-views/PersonalData';
+import TrackPanelShare from './modal-views/TrackPanelShare';
+import TrackPanelDownloads from './modal-views/TrackPanelDownloads';
+
+import styles from './TrackPanelModal.scss';
+
+type TrackPanelModalProps = {
+  closeTrackPanelModal: () => void;
+  launchbarExpanded: boolean;
+  trackPanelModalView: string;
+};
+
+const TrackPanelModal: FunctionComponent<TrackPanelModalProps> = (
+  props: TrackPanelModalProps
+) => {
+  const getTrackPanelModalClasses = () => {
+    const heightClass: string = props.launchbarExpanded
+      ? styles.shorter
+      : styles.taller;
+
+    return `${styles.trackPanelModal} ${heightClass}`;
+  };
+
+  const getModalView = () => {
+    switch (props.trackPanelModalView) {
+      case 'search':
+        return <TrackPanelSearch />;
+      case 'tracks-manager':
+        return <TracksManager />;
+      case 'bookmarks':
+        return <TrackPanelBookmarks />;
+      case 'personal-data':
+        return <PersonalData />;
+      case 'share':
+        return <TrackPanelShare />;
+      case 'downloads':
+        return <TrackPanelDownloads />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <section className={getTrackPanelModalClasses()}>
+      <button
+        onClick={props.closeTrackPanelModal}
+        className={styles.closeButton}
+      >
+        <img src={closeIcon} alt="Close track panel modal" />
+      </button>
+      <div className={styles.trackPanelModalView}>{getModalView()}</div>
+    </section>
+  );
+};
+
+export default TrackPanelModal;

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/PersonalData.tsx

+import React, { FunctionComponent } from 'react';
+
+const PersonalData: FunctionComponent = () => {
+  return (
+    <section className="personaData">
+      <h3>Personal Data</h3>
+      <p>Upload your own data to be displayed in the browser</p>
+      <p>Not ready yet &hellip;</p>
+    </section>
+  );
+};
+
+export default PersonalData;

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelBookmarks.tsx

+import React, { FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
+
+import styles from '../TrackPanelModal.scss';
+
+const TrackPanelBookmarks: FunctionComponent = () => {
+  return (
+    <section className="trackPanelBookmarks">
+      <h3>Bookmarks</h3>
+      <p>Save multiple browser configurations</p>
+      <p>Not ready yet &hellip;</p>
+      <dl className={styles.previouslyViewed}>
+        <dt>Previously viewed</dt>
+        <dd>
+          <Link to="/app/browser/human/BRCA2/13:32315474-32400266">
+            Human gene BRCA2
+          </Link>
+        </dd>
+        <dd>
+          <Link to="/app/browser/human/TTN/2:178525989-178830802">
+            Human transcript TTN
+          </Link>
+        </dd>
+      </dl>
+    </section>
+  );
+};
+
+export default TrackPanelBookmarks;

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelDownloads.tsx

+import React, { FunctionComponent } from 'react';
+
+const TrackPanelDownloads: FunctionComponent = () => {
+  return (
+    <section className="trackPanelDownloads">
+      <h3>Downloads</h3>
+      <p>Export your browser configurations as images or data</p>
+      <p>Not ready yet &hellip;</p>
+    </section>
+  );
+};
+
+export default TrackPanelDownloads;

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelSearch.tsx

+import React, { FunctionComponent } from 'react';
+
+const TrackPanelSearch: FunctionComponent = () => {
+  return (
+    <section className="trackPanelSearch">
+      <h3>Search</h3>
+      <p>Quickly find the tracks you want to show or hide in the browser</p>
+      <p>Not ready yet &hellip;</p>
+    </section>
+  );
+};
+
+export default TrackPanelSearch;

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelShare.tsx

+import React, { FunctionComponent } from 'react';
+
+const TrackPanelShare: FunctionComponent = () => {
+  return (
+    <section className="trackPanelShare">
+      <h3>Share</h3>
+      <p>Share your browser configurations or your own data views</p>
+      <p>Not ready yet &hellip;</p>
+    </section>
+  );
+};
+
+export default TrackPanelShare;

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TracksManager.tsx

+import React, { FunctionComponent } from 'react';
+
+const TracksManager: FunctionComponent = () => {
+  return (
+    <section className="tracksManager">
+      <h3>Tracks Manager</h3>
+      <p>Save multiple browser configurations</p>
+      <p>Not ready yet &hellip;</p>
+    </section>
+  );
+};
+
+export default TracksManager;