use react ref instead of query selector and implement track toggling

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

-import React, { FunctionComponent, useCallback } from 'react';
+import React, { FunctionComponent, useCallback, useRef } from 'react';
 import { connect } from 'react-redux';
 
 import BrowserBar from './browser-bar/BrowserBar';
@@ -37,6 +37,8 @@ type BrowserProps = StateProps & DispatchProps & OwnProps;
 export const Browser: FunctionComponent<BrowserProps> = (
   props: BrowserProps
 ) => {
+  const browserRef: React.RefObject<HTMLDivElement> = useRef(null);
+
   const closeTrack = useCallback(() => {
     if (props.drawerOpened === false) {
       return;
@@ -47,7 +49,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
 
   return (
     <section className={styles.browser}>
-      <BrowserBar />
+      <BrowserBar browserRef={browserRef} />
       <div className={styles.browserInnerWrapper}>
         <div
           className={`${styles.browserImageWrapper} ${
@@ -55,10 +57,10 @@ export const Browser: FunctionComponent<BrowserProps> = (
           }`}
           onClick={closeTrack}
         >
-          {props.browserNavOpened && <BrowserNavBar />}
-          <BrowserImage />
+          {props.browserNavOpened && <BrowserNavBar browserRef={browserRef} />}
+          <BrowserImage browserRef={browserRef} />
         </div>
-        <TrackPanel />
+        <TrackPanel browserRef={browserRef} />
         {props.drawerOpened && <Drawer />}
       </div>
     </section>

src/ensembl/src/content/app/browser/browser-image/BrowserImage.tsx

-import React, { FunctionComponent, useEffect } from 'react';
+import React, { FunctionComponent, RefObject, useEffect } from 'react';
 import { connect } from 'react-redux';
 
-import styles from './BrowserImage.scss';
 import { updateBrowserNavStates, updateChrLocation } from '../browserActions';
 import { BrowserNavStates, ChrLocation } from '../browserState';
 import { getBrowserNavOpened } from '../browserSelectors';
 import { RootState } from 'src/rootReducer';
 
+import styles from './BrowserImage.scss';
+
 type StateProps = {
   browserNavOpened: boolean;
 };
@@ -16,7 +17,9 @@ type DispatchProps = {
   updateChrLocation: (chrLocation: ChrLocation) => void;
 };
 
-type OwnProps = {};
+type OwnProps = {
+  browserRef: RefObject<HTMLDivElement>;
+};
 
 type BrowserImageProps = StateProps & DispatchProps & OwnProps;
 
@@ -30,8 +33,6 @@ type BpaneOutEvent = Event & {
 export const BrowserImage: FunctionComponent<BrowserImageProps> = (
   props: BrowserImageProps
 ) => {
-  const browserCanvas: React.RefObject<HTMLDivElement> = React.createRef();
-
   const listenBpaneOut = (event: Event) => {
     const bpaneOutEvent = event as BpaneOutEvent;
     const navIconStates = bpaneOutEvent.detail.bumper as BrowserNavStates;
@@ -49,8 +50,8 @@ export const BrowserImage: FunctionComponent<BrowserImageProps> = (
   useEffect(() => {
     let currentEl: HTMLDivElement | null = null;
 
-    if (browserCanvas) {
-      currentEl = browserCanvas.current as HTMLDivElement;
+    if (props.browserRef) {
+      currentEl = props.browserRef.current as HTMLDivElement;
 
       activateIfPossible(currentEl as HTMLDivElement);
 
@@ -67,7 +68,7 @@ export const BrowserImage: FunctionComponent<BrowserImageProps> = (
   return (
     <div
       className={getBrowserImageClasses(props.browserNavOpened)}
-      ref={browserCanvas}
+      ref={props.browserRef}
     />
   );
 };

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

-import React, { FunctionComponent, useEffect } from 'react';
+import React, { FunctionComponent, RefObject, useEffect } from 'react';
 import { connect } from 'react-redux';
 
 import TrackPanelBar from './track-panel-bar/TrackPanelBar';
@@ -38,7 +38,9 @@ type DispatchProps = {
   toggleTrackPanel: (trackPanelOpened?: boolean) => void;
 };
 
-type OwnProps = {};
+type OwnProps = {
+  browserRef: RefObject<HTMLDivElement>;
+};
 
 type TrackPanelProps = StateProps & DispatchProps & OwnProps;
 
@@ -64,6 +66,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
       />
       {props.trackPanelOpened ? (
         <TrackPanelList
+          browserRef={props.browserRef}
           currentTrack={props.currentTrack}
           launchbarExpanded={props.launchbarExpanded}
           toggleDrawer={props.toggleDrawer}

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

-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, RefObject } from 'react';
 
 import TrackPanelListItem from './TrackPanelListItem';
 import {
@@ -10,6 +10,7 @@ import {
 import styles from './TrackPanelList.scss';
 
 type TrackPanelListProps = {
+  browserRef: RefObject<HTMLDivElement>;
   currentTrack: string;
   launchbarExpanded: boolean;
   toggleDrawer: (drawerOpened: boolean) => void;
@@ -19,6 +20,8 @@ type TrackPanelListProps = {
 const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
   props: TrackPanelListProps
 ) => {
+  const browserImageEl = props.browserRef.current as HTMLDivElement;
+
   const changeTrack = (currentTrack: string) => {
     const { toggleDrawer, updateTrack } = props;
 
@@ -48,10 +51,11 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
 
   const getTrackListItem = (track: TrackPanelItem) => (
     <TrackPanelListItem
-      key={track.id}
+      browserImageEl={browserImageEl}
       className={getTrackClass(track.name)}
-      track={track}
       changeTrack={changeTrack}
+      key={track.id}
+      track={track}
     >
       {track.childTrackList &&
         track.childTrackList.map((childTrack: TrackPanelItem) =>

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

@@ -29,7 +29,7 @@
     background: lighten($ens-blue, 40%);
   }
 
-  &.gene {
+  &.main {
     font-weight: $bold;
   }
 

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

@@ -7,6 +7,7 @@ import chevronUpIcon from 'static/img/shared/chevron-up.svg';
 import styles from './TrackPanelListItem.scss';
 
 type TrackPanelListItemProps = {
+  browserImageEl: HTMLDivElement | null;
   children?: ReactNode[];
   className: string;
   track: TrackPanelItem;
@@ -17,8 +18,10 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
   props: TrackPanelListItemProps
 ) => {
   const [expanded, setExpanded] = useState(false);
+  const [trackStatus, setTrackStatus] = useState('on');
 
-  const { className, track } = props;
+  const { browserImageEl, className, track } = props;
+  const { ellipsis, eye } = trackPanelIconConfig;
   const listItemClass = styles[className] || '';
 
   const changeTrackHandler = () => {
@@ -29,6 +32,23 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
     setExpanded(!expanded);
   };
 
+  const toggleTrack = () => {
+    const currentTrackStatus = trackStatus === 'on' ? 'off' : 'on';
+
+    const navEvent = new CustomEvent('bpane', {
+      bubbles: true,
+      detail: {
+        [currentTrackStatus]: track.name
+      }
+    });
+
+    if (browserImageEl) {
+      browserImageEl.dispatchEvent(navEvent);
+    }
+
+    setTrackStatus(currentTrackStatus);
+  };
+
   return (
     <Fragment>
       <dd className={`${styles.listItem} ${listItemClass}`}>
@@ -55,15 +75,12 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
           )}
         </label>
         <button onClick={changeTrackHandler}>
-          <img
-            src={trackPanelIconConfig.ellipsis.icon.on}
-            alt={`Go to ${track.label}`}
-          />
+          <img src={ellipsis.icon.on} alt={`Go to ${track.label}`} />
         </button>
-        <button>
+        <button onClick={toggleTrack}>
           <img
-            src={trackPanelIconConfig.eye.icon.on}
-            alt={trackPanelIconConfig.ellipsis.description}
+            src={trackStatus === 'on' ? eye.icon.on : eye.icon.off}
+            alt={eye.description}
           />
         </button>
       </dd>