Save the sidebar state for genomes in Genome browser and Entity viewer (#514)

src/ensembl/package-lock.json

@@ -102,7 +102,7 @@
         "dotenv-webpack": "7.0.2",
         "eslint": "7.27.0",
         "eslint-config-prettier": "8.3.0",
-        "eslint-plugin-jest": "^24.3.6",
+        "eslint-plugin-jest": "24.3.6",
         "eslint-plugin-prettier": "3.4.0",
         "eslint-plugin-react": "7.23.2",
         "eslint-plugin-react-hooks": "4.2.0",

src/ensembl/src/content/app/browser/track-panel/trackPanelReducer.ts

@@ -18,7 +18,7 @@ import { ActionType, getType } from 'typesafe-actions';
 import pickBy from 'lodash/pickBy';
 
 import {
-  getInitialTrackPanelState,
+  getTrackPanelState,
   getTrackPanelStateForGenome,
   TrackPanelState
 } from './trackPanelState';
@@ -26,7 +26,7 @@ import * as browserActions from 'src/content/app/browser/browserActions';
 import * as trackPanelActions from './trackPanelActions';
 
 export default function trackPanel(
-  state: TrackPanelState = getInitialTrackPanelState(),
+  state: TrackPanelState = getTrackPanelState(),
   action:
     | ActionType<typeof trackPanelActions>
     | ActionType<typeof browserActions>
@@ -34,10 +34,15 @@ export default function trackPanel(
   switch (action.type) {
     case getType(browserActions.setDataFromUrl):
       const { activeGenomeId } = action.payload;
-      return {
-        ...state,
-        [activeGenomeId]: getTrackPanelStateForGenome(activeGenomeId)
-      };
+
+      if (!state[activeGenomeId]) {
+        return {
+          ...state,
+          [activeGenomeId]: getTrackPanelStateForGenome(activeGenomeId)
+        };
+      } else {
+        return state;
+      }
     case getType(trackPanelActions.updateTrackPanelForGenome):
       return {
         ...state,

src/ensembl/src/content/app/browser/track-panel/trackPanelState.ts

@@ -55,7 +55,7 @@ export const defaultTrackPanelStateForGenome: TrackPanelStateForGenome = {
   collapsedTrackIds: []
 };
 
-export const getInitialTrackPanelState = (): TrackPanelState => {
+export const getTrackPanelState = (): TrackPanelState => {
   const genomeId = browserStorageService.getActiveGenomeId();
   return genomeId ? { [genomeId]: getTrackPanelStateForGenome(genomeId) } : {};
 };
@@ -63,14 +63,19 @@ export const getInitialTrackPanelState = (): TrackPanelState => {
 export const getTrackPanelStateForGenome = (
   genomeId: string
 ): TrackPanelStateForGenome => {
-  const storedTrackPanel =
-    browserStorageService.getTrackPanels()[genomeId] || {};
-  return {
-    ...defaultTrackPanelStateForGenome,
-    ...storedTrackPanel
-  };
+  return genomeId
+    ? {
+        ...defaultTrackPanelStateForGenome,
+        ...getPersistentTrackPanelStateForGenome(genomeId)
+      }
+    : defaultTrackPanelStateForGenome;
 };
 
+export const getPersistentTrackPanelStateForGenome = (
+  genomeId: string
+): Partial<TrackPanelStateForGenome> =>
+  browserStorageService.getTrackPanels()[genomeId] || {};
+
 export const pickPersistentTrackPanelProperties = (
   trackPanel: Partial<TrackPanelStateForGenome>
 ) => {

src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx

@@ -33,8 +33,6 @@ import {
   GeneViewTabName
 } from 'src/content/app/entity-viewer/state/gene-view/view/geneViewViewSlice';
 import { updatePreviouslyViewedEntities } from 'src/content/app/entity-viewer/state/bookmarks/entityViewerBookmarksSlice';
-import { closeSidebarModal } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice';
-import { isEntityViewerSidebarOpen } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSelectors';
 import {
   getFilters,
   getSortingRule
@@ -209,8 +207,6 @@ const GeneViewWithData = (props: GeneViewWithDataProps) => {
   const focusId = buildFocusIdForUrl({ type: 'gene', objectId: geneId });
   const gbUrl = urlFor.browser({ genomeId, focus: focusId });
 
-  const isSidebarOpen = useSelector(isEntityViewerSidebarOpen);
-
   const shouldShowFilterIndicator =
     sortingRule !== SortingRule.DEFAULT || Object.values(filters).some(Boolean);
 
@@ -233,10 +229,6 @@ const GeneViewWithData = (props: GeneViewWithDataProps) => {
       return;
     }
 
-    if (isSidebarOpen) {
-      dispatch(closeSidebarModal());
-    }
-
     dispatch(
       updatePreviouslyViewedEntities({
         genomeId,

src/ensembl/src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSelectors.ts

@@ -35,7 +35,7 @@ export const getEntityViewerGenomeState = (state: RootState) => {
 export const getEntityViewerSidebarUIState = (state: RootState) => {
   const activeEntityId = getEntityViewerActiveEntityId(state);
   return activeEntityId
-    ? getEntityViewerGenomeState(state)?.entities[activeEntityId]?.uIState ||
+    ? getEntityViewerGenomeState(state)?.entities[activeEntityId]?.uiState ||
         null
     : null;
 };

src/ensembl/src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice.ts

@@ -56,7 +56,7 @@ export type EntityViewerSidebarGenomeState = Readonly<{
   selectedTabName: SidebarTabName;
   entities: {
     [entityId: string]: {
-      uIState: EntityViewerSidebarUIState;
+      uiState: EntityViewerSidebarUIState;
     };
   };
   sidebarModalView: SidebarModalView | null;
@@ -222,7 +222,7 @@ const entityViewerSidebarSlice = createSlice({
       };
 
       mergeWith(
-        state[genomeId].entities[entityId].uIState,
+        state[genomeId].entities[entityId].uiState,
         newFragment,
         overwriteArray
       );