Commit 256f36da authored by Imran Salam's avatar Imran Salam
Browse files

Update transcript track eye behaviour

parent c2627749
Pipeline #293150 passed with stages
in 5 minutes and 59 seconds
......@@ -24,7 +24,10 @@ import { useGetTrackPanelGeneQuery } from 'src/content/app/genome-browser/state/
import { changeDrawerViewForGenome } from 'src/content/app/genome-browser/state/drawer/drawerSlice';
import { updateTrackStatesAndSave } from 'src/content/app/genome-browser/state/browser-general/browserGeneralSlice';
import { getBrowserTrackState } from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
import {
getBrowserActiveGenomeTrackStates,
getBrowserTrackState
} from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
import { defaultSort } from 'src/content/app/entity-viewer/shared/helpers/transcripts-sorter';
......@@ -33,10 +36,8 @@ import TrackPanelItemsCount from './TrackPanelItemsCount';
import GroupTrackPanelItemLayout from './track-panel-item-layout/GroupTrackPanelItemLayout';
import { Status } from 'src/shared/types/status';
import {
TrackActivityStatus,
TrackId
} from 'src/content/app/genome-browser/components/track-panel/trackPanelConfig';
import { TrackId } from 'src/content/app/genome-browser/components/track-panel/trackPanelConfig';
import type { TrackPanelTranscript as TrackPanelTranscriptType } from 'src/content/app/genome-browser/state/types/track-panel-gene';
import type { RootState } from 'src/store';
import styles from './TrackPanelItem.scss';
......@@ -49,8 +50,6 @@ type TrackPanelGeneProps = {
// TODO: figure out proper gene and transcript track naming conventions
const GENE_TRACK_ID = TrackId.GENE;
const getTranscriptTrackId = (num: number) => `track:transcript-feat-${num}`;
const TrackPanelGene = (props: TrackPanelGeneProps) => {
const { genomeId, geneId, focusObjectId } = props;
const startWithCollapsed = !isEnvironment([Environment.PRODUCTION]); // TODO: remove after multiple transcripts are available
......@@ -68,18 +67,55 @@ const TrackPanelGene = (props: TrackPanelGeneProps) => {
trackId: GENE_TRACK_ID
})
);
const { toggleTrack, genomeBrowser } = useGenomeBrowser();
const browserGenomeTrackStates = useAppSelector(
getBrowserActiveGenomeTrackStates
);
const { toggleTrack, updateTranscriptTracks, genomeBrowser } =
useGenomeBrowser();
const dispatch = useAppDispatch();
const transcriptTrackStatuses =
browserGenomeTrackStates?.transcriptTracks?.[focusObjectId] ?? {};
let sortedTranscripts: TrackPanelTranscriptType[] = [];
useEffect(() => {
toggleTrack({ trackId: GENE_TRACK_ID, status: trackStatus });
}, [genomeBrowser]);
useEffect(() => {
if (sortedTranscripts.length) {
const visibleTranscriptIds = sortedTranscripts
.map((transcript) => transcript.stable_id)
.filter((transcriptId) => {
if (
transcriptTrackStatuses[transcriptId] === Status.SELECTED ||
transcriptTrackStatuses[transcriptId] === undefined
) {
return true;
} else {
return false;
}
});
updateTranscriptTracks(visibleTranscriptIds);
}
}, [sortedTranscripts]);
if (!currentData) {
return null;
}
const { gene } = currentData;
if (isEnvironment([Environment.PRODUCTION])) {
// TODO: remove this branch when multiple transcripts become available
sortedTranscripts = isCollapsed ? [] : [defaultSort(gene.transcripts)[0]];
} else {
sortedTranscripts = isCollapsed
? [defaultSort(gene.transcripts)[0]]
: defaultSort(gene.transcripts);
}
const toggleExpand = () => {
setIsCollapsed(!isCollapsed);
};
......@@ -122,18 +158,6 @@ const TrackPanelGene = (props: TrackPanelGeneProps) => {
);
};
const { gene } = currentData;
let sortedTranscripts;
if (isEnvironment([Environment.PRODUCTION])) {
// TODO: remove this branch when multiple transcripts become available
sortedTranscripts = isCollapsed ? [] : [defaultSort(gene.transcripts)[0]];
} else {
sortedTranscripts = isCollapsed
? [defaultSort(gene.transcripts)[0]]
: defaultSort(gene.transcripts);
}
return (
<>
<GroupTrackPanelItemLayout
......@@ -154,21 +178,14 @@ const TrackPanelGene = (props: TrackPanelGeneProps) => {
</span>
</div>
</GroupTrackPanelItemLayout>
{sortedTranscripts.map((transcript, index) => {
const trackId = getTranscriptTrackId(index + 1);
return (
<TrackPanelTranscript
transcript={transcript}
trackId={trackId}
genomeId={genomeId}
focusObjectId={focusObjectId}
onChangeVisibility={(trackStatus: TrackActivityStatus) =>
onChangeVisibility({ trackId, status: trackStatus })
}
key={transcript.stable_id}
/>
);
})}
{sortedTranscripts.map((transcript) => (
<TrackPanelTranscript
transcript={transcript}
genomeId={genomeId}
focusObjectId={focusObjectId}
key={transcript.stable_id}
/>
))}
{!isEnvironment([Environment.PRODUCTION]) &&
isCollapsed &&
gene.transcripts.length > 1 && (
......
......@@ -14,26 +14,27 @@
* limitations under the License.
*/
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import React from 'react';
import useGenomeBrowser from 'src/content/app/genome-browser/hooks/useGenomeBrowser';
import { useAppSelector, useAppDispatch, type RootState } from 'src/store';
import {
getBrowserActiveGenomeId,
getBrowserTrackState
getBrowserActiveGenomeTrackStates,
getBrowserTranscriptTrackState
} from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
import { changeDrawerViewForGenome } from 'src/content/app/genome-browser/state/drawer/drawerSlice';
import { updateTrackStatesAndSave } from 'src/content/app/genome-browser/state/browser-general/browserGeneralSlice';
import { getTranscriptMetadata as getTranscriptSupportLevel } from 'src/content/app/entity-viewer/shared/components/default-transcript-label/TranscriptQualityLabel';
import { isProteinCodingTranscript } from 'src/content/app/entity-viewer/shared/helpers/entity-helpers';
import SimpleTrackPanelItemLayout from './track-panel-item-layout/SimpleTrackPanelItemLayout';
import type { TrackActivityStatus } from 'src/content/app/genome-browser/components/track-panel/trackPanelConfig';
import { TrackPanelTranscript as TrackPanelTranscriptType } from 'src/content/app/genome-browser/state/types/track-panel-gene';
import type { RootState } from 'src/store';
import type { TrackPanelTranscript as TrackPanelTranscriptType } from 'src/content/app/genome-browser/state/types/track-panel-gene';
import { Status } from 'src/shared/types/status';
import styles from './TrackPanelItem.scss';
......@@ -41,31 +42,27 @@ type Props = {
transcript: TrackPanelTranscriptType;
genomeId: string;
focusObjectId: string;
trackId: string;
onChangeVisibility: (status: TrackActivityStatus) => void;
};
const TrackPanelTranscript = (props: Props) => {
const { genomeId, transcript, focusObjectId, trackId } = props;
const activeGenomeId = useSelector(getBrowserActiveGenomeId);
const trackVisibilityStatus = useSelector((state: RootState) =>
getBrowserTrackState(state, {
const { genomeId, transcript, focusObjectId } = props;
const browserGenomeTrackStates = useAppSelector(
getBrowserActiveGenomeTrackStates
);
const trackVisibilityStatus = useAppSelector((state: RootState) =>
getBrowserTranscriptTrackState(state, {
genomeId,
objectId: focusObjectId,
tracksGroup: 'objectTracks',
categoryName: 'main',
trackId
transcriptId: transcript.stable_id
})
);
const dispatch = useAppDispatch();
const { updateTranscriptTracks } = useGenomeBrowser();
const dispatch = useDispatch();
const { toggleTrack, genomeBrowser } = useGenomeBrowser();
useEffect(() => {
toggleTrack({ trackId: trackId, status: trackVisibilityStatus });
}, [genomeBrowser]);
const transcriptTrackStatuses =
browserGenomeTrackStates?.transcriptTracks?.[focusObjectId] ?? {};
if (!activeGenomeId) {
if (!genomeId) {
return null;
}
......@@ -74,7 +71,7 @@ const TrackPanelTranscript = (props: Props) => {
const onShowMore = () => {
dispatch(
changeDrawerViewForGenome({
genomeId: activeGenomeId,
genomeId,
drawerView: {
name: 'transcript_summary',
transcriptId: transcript.stable_id
......@@ -83,6 +80,33 @@ const TrackPanelTranscript = (props: Props) => {
);
};
const onChangeVisibility = () => {
const newStatus =
trackVisibilityStatus === Status.SELECTED
? Status.UNSELECTED
: Status.SELECTED;
const updatedTranscriptTracks = {
...transcriptTrackStatuses,
[transcript.stable_id]: newStatus
};
const visibleTranscriptIds = Object.keys(updatedTranscriptTracks).filter(
Boolean
);
updateTranscriptTracks(visibleTranscriptIds);
dispatch(
updateTrackStatesAndSave({
[genomeId]: {
transcriptTracks: {
[focusObjectId]: updatedTranscriptTracks
}
}
})
);
};
const secondaryLabel = isCanonicalTranscript ? (
<span className={styles.labelTextSecondaryStrong}>
{getTranscriptSupportLevel(transcript)?.label as string}
......@@ -96,7 +120,7 @@ const TrackPanelTranscript = (props: Props) => {
return (
<SimpleTrackPanelItemLayout
visibilityStatus={trackVisibilityStatus}
onChangeVisibility={() => props.onChangeVisibility(trackVisibilityStatus)}
onChangeVisibility={() => onChangeVisibility()}
onShowMore={onShowMore}
>
<div className={styles.label}>
......
......@@ -54,7 +54,12 @@ export type TrackStates = {
export type GenomeTrackStates = {
commonTracks?: TrackStates;
objectTracks?: { [objctId: string]: TrackStates };
objectTracks?: { [objectId: string]: TrackStates };
transcriptTracks?: {
[objectId: string]: {
[transcriptId: string]: TrackActivityStatus;
};
};
};
export type BrowserTrackStates = {
......
......@@ -395,6 +395,7 @@ const useGenomeBrowser = () => {
const allTrackNamesOn =
trackConfigs && trackConfigs[trackId]?.showTrackName;
if (allTrackNamesOn && isTurnedOn) {
genomeBrowser?.send({
type: allTrackNamesOn
......@@ -405,6 +406,26 @@ const useGenomeBrowser = () => {
}
});
}
if (trackIdToSend === 'focus' && !isTurnedOn) {
genomeBrowser?.send({
type: OutgoingActionType.SET_VISIBLE_TRANSCRIPTS,
payload: {
track_id: 'focus',
transcript_ids: []
}
});
}
};
const updateTranscriptTracks = (visibleTranscriptIds: string[]) => {
genomeBrowser?.send({
type: OutgoingActionType.SET_VISIBLE_TRANSCRIPTS,
payload: {
track_id: 'focus',
transcript_ids: visibleTranscriptIds
}
});
};
return {
......@@ -417,6 +438,7 @@ const useGenomeBrowser = () => {
restoreTrackConfigStates,
setZmenus,
toggleTrack,
updateTranscriptTracks,
toggleTrackName,
toggleFeatureLabels,
toggleSeveralTranscripts,
......
......@@ -79,6 +79,21 @@ export const getBrowserTrackState = (
return savedTrackStatus ?? Status.SELECTED;
};
export const getBrowserTranscriptTrackState = (
state: RootState,
params: {
genomeId: string;
objectId: string;
transcriptId: string;
}
) => {
const { genomeId, objectId, transcriptId } = params;
const allBrowserTrackStates = getBrowserTrackStates(state);
const transcriptTrackStatuses =
allBrowserTrackStates?.[genomeId]?.transcriptTracks?.[objectId];
return transcriptTrackStatuses?.[transcriptId] ?? Status.SELECTED;
};
export const getBrowserActiveGenomeTrackStates = (state: RootState) => {
const activeGenomeId = getBrowserActiveGenomeId(state);
......
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