Unverified Commit c9d5c9f4 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

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

parent fc06033d
Pipeline #268433 passed with stages
in 4 minutes and 36 seconds
......@@ -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>
);
};
......
......@@ -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();
......
/**
* 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;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment