Update the location parameter in the url when genome browser changes position (#732)

src/content/app/genome-browser/components/browser-image/BrowserImage.test.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router';
 import thunk from 'redux-thunk';
 import set from 'lodash/fp/set';
 
@@ -64,9 +65,11 @@ let store: ReturnType<typeof mockStore>;
 const renderComponent = (state: typeof mockState = mockState) => {
   store = mockStore(state);
   return render(
-    <Provider store={store}>
-      <BrowserImage />
-    </Provider>
+    <MemoryRouter>
+      <Provider store={store}>
+        <BrowserImage />
+      </Provider>
+    </MemoryRouter>
   );
 };
 

src/content/app/genome-browser/components/browser-image/BrowserImage.tsx

@@ -15,15 +15,11 @@
  */
 
 import React, { useRef, useEffect, memo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import classNames from 'classnames';
-import {
-  BrowserCurrentLocationUpdateAction,
-  BrowserTargetLocationUpdateAction,
-  IncomingActionType
-} from '@ensembl/ensembl-genome-browser';
 
 import useGenomeBrowser from 'src/content/app/genome-browser/hooks/useGenomeBrowser';
+import useGenomeBrowserPosition from 'src/content/app/genome-browser/hooks/useGenomeBrowserPosition';
 
 import BrowserCogList from '../browser-cog/BrowserCogList';
 import { ZmenuController } from 'src/content/app/genome-browser/components/zmenu';
@@ -36,11 +32,6 @@ import {
   getRegionEditorActive,
   getRegionFieldActive
 } from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
-import {
-  updateActualChrLocation,
-  ChrLocation,
-  setChrLocation
-} from 'src/content/app/genome-browser/state/browser-general/browserGeneralSlice';
 import { getBrowserNavOpenState } from 'src/content/app/genome-browser/state/browser-nav/browserNavSelectors';
 
 import styles from './BrowserImage.scss';
@@ -51,46 +42,13 @@ export const BrowserImage = () => {
   const { activateGenomeBrowser, clearGenomeBrowser, genomeBrowser } =
     useGenomeBrowser();
 
+  useGenomeBrowserPosition();
+
   const isNavbarOpen = useSelector(getBrowserNavOpenState);
   const isRegionEditorActive = useSelector(getRegionEditorActive);
   const isRegionFieldActive = useSelector(getRegionFieldActive);
   const isDisabled = isRegionEditorActive || isRegionFieldActive;
 
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    const positionUpdate = (
-      action:
-        | BrowserCurrentLocationUpdateAction
-        | BrowserTargetLocationUpdateAction
-    ) => {
-      if (action.type === IncomingActionType.CURRENT_POSITION) {
-        const { stick, start, end } = action.payload;
-        const chromosome = stick.split(':')[1];
-        dispatch(updateActualChrLocation([chromosome, start, end]));
-      } else if (action.type === IncomingActionType.TARGET_POSITION) {
-        const { stick, start, end } = action.payload;
-        const chromosome = stick.split(':')[1];
-        const chrLocation = [chromosome, start, end] as ChrLocation;
-        dispatch(setChrLocation(chrLocation));
-      }
-    };
-
-    const subscriptionToActualPotitionMessages = genomeBrowser?.subscribe(
-      IncomingActionType.CURRENT_POSITION,
-      positionUpdate
-    );
-    const subscriptionToTargetPotitionMessages = genomeBrowser?.subscribe(
-      IncomingActionType.TARGET_POSITION,
-      positionUpdate
-    );
-
-    return () => {
-      subscriptionToActualPotitionMessages?.unsubscribe();
-      subscriptionToTargetPotitionMessages?.unsubscribe();
-    };
-  }, [genomeBrowser]);
-
   useEffect(() => {
     if (!genomeBrowser) {
       activateGenomeBrowser();

src/content/app/genome-browser/hooks/useGenomeBrowserPosition.ts

+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import {
+  IncomingActionType,
+  type BrowserCurrentLocationUpdateAction,
+  type BrowserTargetLocationUpdateAction
+} from '@ensembl/ensembl-genome-browser';
+
+import * as urlFor from 'src/shared/helpers/urlHelper';
+import {
+  buildFocusIdForUrl,
+  parseFocusObjectId
+} from 'src/shared/helpers/focusObjectHelpers';
+import { getChrLocationStr } from 'src/content/app/genome-browser/helpers/browserHelper';
+
+import useGenomeBrowser from 'src/content/app/genome-browser/hooks/useGenomeBrowser';
+
+import {
+  getBrowserActiveFocusObjectId,
+  getBrowserActiveGenomeId
+} from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
+
+import {
+  updateActualChrLocation,
+  type ChrLocation
+} from 'src/content/app/genome-browser/state/browser-general/browserGeneralSlice';
+
+/**
+ * The purpose of this hook is to listen and react to genome browser position change messages.
+ *
+ * NOTE: We should only have a single instance of this hook running at any given time.
+ * Therefore, only import it in a single unique component within genome browser page component tree.
+ */
+
+const useGenomeBrowserPosition = () => {
+  const activeGenomeId = useSelector(getBrowserActiveGenomeId);
+  const activeFocusId = useSelector(getBrowserActiveFocusObjectId);
+
+  // keep ids in the ref to avoid them turning into stale closures
+  // by the time to use them inside onBrowserLocationChange
+  const idRef = useRef({
+    activeGenomeId,
+    activeFocusId
+  });
+
+  const { genomeBrowser } = useGenomeBrowser();
+
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    idRef.current = { activeGenomeId, activeFocusId };
+  }, [activeGenomeId, activeFocusId]);
+
+  useEffect(() => {
+    const subscriptionToActualPotitionMessages = genomeBrowser?.subscribe(
+      IncomingActionType.CURRENT_POSITION,
+      onBrowserLocationChange
+    );
+    const subscriptionToTargetPotitionMessages = genomeBrowser?.subscribe(
+      IncomingActionType.TARGET_POSITION,
+      onBrowserLocationChange
+    );
+
+    return () => {
+      subscriptionToActualPotitionMessages?.unsubscribe();
+      subscriptionToTargetPotitionMessages?.unsubscribe();
+    };
+  }, [genomeBrowser]);
+
+  const onBrowserLocationChange = (
+    action:
+      | BrowserCurrentLocationUpdateAction
+      | BrowserTargetLocationUpdateAction
+  ) => {
+    const { activeGenomeId, activeFocusId } = idRef.current;
+    const { stick, start, end } = action.payload;
+    const chromosome = stick.split(':')[1];
+
+    if (action.type === IncomingActionType.CURRENT_POSITION) {
+      dispatch(updateActualChrLocation([chromosome, start, end]));
+    } else {
+      const chrLocation = [chromosome, start, end] as ChrLocation;
+
+      const newFocus = buildFocusIdForUrl(
+        parseFocusObjectId(activeFocusId as string)
+      );
+
+      navigate(
+        urlFor.browser({
+          genomeId: activeGenomeId,
+          focus: newFocus,
+          location: getChrLocationStr(chrLocation)
+        }),
+        {
+          replace: true
+        }
+      );
+      action;
+    }
+  };
+};
+
+export default useGenomeBrowserPosition;