Restore track states on browser refresh (#325)

This commit fixes the issues with restoring the track states in the following scenarios:
- Restoring after browser refresh
- Switching between species
- Switching between apps

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

@@ -64,7 +64,6 @@ describe('<Browser />', () => {
     isDrawerOpened: false,
     isTrackPanelOpened: false,
     exampleEnsObjects: [],
-    restoreBrowserTrackStates: jest.fn(),
     fetchGenomeData: jest.fn(),
     toggleTrackPanel: jest.fn(),
     toggleDrawer: jest.fn(),

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import upperFirst from 'lodash/upperFirst';
@@ -22,9 +22,7 @@ import upperFirst from 'lodash/upperFirst';
 import useBrowserRouting from './hooks/useBrowserRouting';
 
 import analyticsTracking from 'src/services/analytics-service';
-import browserStorageService from './browser-storage-service';
 import * as urlFor from 'src/shared/helpers/urlHelper';
-import { BrowserTrackStates } from './track-panel/trackPanelConfig';
 import { BreakpointWidth } from 'src/global/globalConfig';
 
 import {
@@ -32,7 +30,6 @@ import {
   buildFocusIdForUrl
 } from 'src/shared/state/ens-object/ensObjectHelpers';
 
-import { restoreBrowserTrackStates } from './browserActions';
 import { fetchGenomeData } from 'src/shared/state/genome/genomeActions';
 import { toggleTrackPanel } from 'src/content/app/browser/track-panel/trackPanelActions';
 import { toggleDrawer } from './drawer/drawerActions';
@@ -46,6 +43,7 @@ import {
   getBrowserActiveEnsObjectId,
   getBrowserActiveEnsObjectIds
 } from './browserSelectors';
+
 import { getIsTrackPanelOpened } from './track-panel/trackPanelSelectors';
 import { getIsDrawerOpened } from './drawer/drawerSelectors';
 import { getExampleEnsObjects } from 'src/shared/state/ens-object/ensObjectSelectors';
@@ -80,14 +78,12 @@ export type BrowserProps = {
   isTrackPanelOpened: boolean;
   exampleEnsObjects: EnsObject[];
   viewportWidth: BreakpointWidth;
-  restoreBrowserTrackStates: () => void;
   fetchGenomeData: (genomeId: string) => void;
   toggleTrackPanel: (isOpen: boolean) => void;
   toggleDrawer: (isDrawerOpened: boolean) => void;
 };
 
 export const Browser = (props: BrowserProps) => {
-  const [, setTrackStatesFromStorage] = useState<BrowserTrackStates>({});
   const { changeGenomeId } = useBrowserRouting();
 
   const { isDrawerOpened } = props;
@@ -101,11 +97,6 @@ export const Browser = (props: BrowserProps) => {
     analyticsTracking.setSpeciesDimension(activeGenomeId);
   }, [props.activeGenomeId]);
 
-  useEffect(() => {
-    setTrackStatesFromStorage(browserStorageService.getTrackStates());
-    props.restoreBrowserTrackStates();
-  }, [props.activeGenomeId, props.activeEnsObjectId]);
-
   const onSidebarToggle = () => {
     props.toggleTrackPanel(!props.isTrackPanelOpened); // FIXME
   };
@@ -207,7 +198,6 @@ const mapStateToProps = (state: RootState) => {
 const mapDispatchToProps = {
   fetchGenomeData,
   toggleDrawer,
-  restoreBrowserTrackStates,
   toggleTrackPanel
 };
 

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

@@ -44,7 +44,8 @@ describe('<TrackPanel />', () => {
     activeGenomeId: null,
     browserActivated: false,
     activeEnsObject: null,
-    isTrackPanelModalOpened: false
+    isTrackPanelModalOpened: false,
+    restoreBrowserTrackStates: jest.fn()
   };
 
   const mountTrackPanel = (props?: Partial<TrackPanelProps>) =>

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 import { connect } from 'react-redux';
 import isEqual from 'lodash/isEqual';
 
@@ -29,6 +29,8 @@ import {
   getBrowserActiveEnsObject
 } from '../browserSelectors';
 
+import { restoreBrowserTrackStates } from '../browserActions';
+
 import { EnsObject } from 'src/shared/state/ens-object/ensObjectTypes';
 
 export type TrackPanelProps = {
@@ -36,12 +38,17 @@ export type TrackPanelProps = {
   browserActivated: boolean;
   activeEnsObject: EnsObject | null;
   isTrackPanelModalOpened: boolean;
+  restoreBrowserTrackStates: () => void;
 };
 
 export const TrackPanel = (props: TrackPanelProps) => {
   const shouldRenderContent =
     props.activeGenomeId && props.browserActivated && props.activeEnsObject;
 
+  useEffect(() => {
+    props.restoreBrowserTrackStates();
+  }, [props.activeEnsObject]);
+
   return shouldRenderContent ? (
     props.isTrackPanelModalOpened ? (
       <TrackPanelModal />
@@ -62,4 +69,11 @@ const mapStateToProps = (state: RootState) => {
   };
 };
 
-export default connect(mapStateToProps)(memo(TrackPanel, isEqual));
+const mapDispatchToProps = {
+  restoreBrowserTrackStates
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(memo(TrackPanel, isEqual));

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

@@ -24,7 +24,6 @@ import {
 } from './TrackPanelListItem';
 import ImageButton from 'src/shared/components/image-button/ImageButton';
 
-import browserMessagingService from '../../browser-messaging-service';
 import { createMainTrackInfo } from 'tests/fixtures/track-panel';
 import { Status } from 'src/shared/types/status';
 
@@ -59,17 +58,6 @@ describe('<TrackPanelListItem />', () => {
   });
 
   describe('behaviour', () => {
-    test('updates genome browser on mount if track status and default track status do not match', () => {
-      jest.spyOn(browserMessagingService, 'send');
-
-      mount(
-        <TrackPanelListItem {...defaultProps} trackStatus={Status.UNSELECTED} />
-      );
-      expect(browserMessagingService.send).toHaveBeenCalledTimes(1);
-
-      (browserMessagingService.send as any).mockRestore();
-    });
-
     describe('on track list item click', () => {
       test('updates drawer view if drawer already opened', () => {
         const wrapper = mount(

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { MouseEvent, ReactNode, useEffect, useCallback } from 'react';
+import React, { MouseEvent, ReactNode, useCallback } from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 
@@ -94,13 +94,6 @@ export const TrackPanelListItem = (props: TrackPanelListItemProps) => {
     trackStatus
   } = props;
 
-  useEffect(() => {
-    const { defaultTrackStatus } = props;
-    if (trackStatus !== defaultTrackStatus) {
-      updateGenomeBrowser(trackStatus);
-    }
-  }, []);
-
   const updateDrawerView = (currentTrack: string) => {
     const { isDrawerOpened, toggleDrawer, changeDrawerView } = props;