Commit 4b8ec1b5 authored by Imran Salam's avatar Imran Salam
Browse files

make selectors return the genome specific values for drawer and some browser...

make selectors return the genome specific values for drawer and some browser specific state properties
parent 10111976
......@@ -35,7 +35,7 @@ import {
import { getLaunchbarExpanded } from 'src/header/headerSelectors';
import { getTrackPanelOpened } from './track-panel/trackPanelSelectors';
import { getChrLocationFromStr, getChrLocationStr } from './browserHelper';
import { getDrawerOpened } from './drawer/drawerSelectors';
import { getIsDrawerOpened } from './drawer/drawerSelectors';
import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
import { CommittedItem } from 'src/content/app/species-selector/types/species-search';
import { getExampleEnsObjects } from 'src/ens-object/ensObjectSelectors';
......@@ -55,7 +55,7 @@ import styles from './Browser.scss';
import 'static/browser/browser.js';
type StateProps = {
activeGenomeId: string;
activeGenomeId: string | null;
activeEnsObjectId: string | null;
allActiveEnsObjectIds: { [genomeId: string]: string };
browserActivated: boolean;
......@@ -63,7 +63,7 @@ type StateProps = {
browserQueryParams: { [key: string]: string };
chrLocation: ChrLocation | null;
allChrLocations: { [genomeId: string]: ChrLocation };
drawerOpened: { [genomeId: string]: boolean };
isDrawerOpened: boolean;
genomeSelectorActive: boolean;
trackPanelOpened: boolean;
launchbarExpanded: boolean;
......@@ -79,7 +79,7 @@ type DispatchProps = {
) => void;
fetchGenomeData: (genomeId: string) => void;
replace: Replace;
toggleDrawer: (drawerOpened: boolean) => void;
toggleDrawer: (isDrawerOpened: boolean) => void;
setDataFromUrlAndSave: (payload: ParsedUrlPayload) => void;
};
......@@ -102,7 +102,8 @@ export const Browser: FunctionComponent<BrowserProps> = (
TrackStates
>({});
const lastGenomeIdRef = useRef(props.activeGenomeId);
const drawerOpenedForGenome = props.drawerOpened[props.activeGenomeId];
const { isDrawerOpened } = props;
const setDataFromUrl = () => {
const { genomeId = null } = props.match.params;
......@@ -254,7 +255,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
}, [props.chrLocation]);
const closeTrack = () => {
if (drawerOpenedForGenome === false) {
if (isDrawerOpened) {
return;
}
......@@ -268,7 +269,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
}));
const getBrowserWidth = (): string => {
if (drawerOpenedForGenome === true) {
if (isDrawerOpened) {
return 'calc(41px + 0vw)';
}
return props.trackPanelOpened
......@@ -280,7 +281,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
setTrackAnimation({
width: getBrowserWidth()
});
}, [drawerOpenedForGenome, props.trackPanelOpened]);
}, [isDrawerOpened, props.trackPanelOpened]);
const getHeightClass = (launchbarExpanded: boolean): string => {
return launchbarExpanded ? styles.shorter : styles.taller;
......@@ -314,7 +315,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
<animated.div style={trackAnimation}>
<div className={styles.browserImageWrapper} onClick={closeTrack}>
{props.browserNavOpened &&
!drawerOpenedForGenome &&
!isDrawerOpened &&
browserRef.current ? (
<BrowserNavBar browserElement={browserRef.current} />
) : null}
......@@ -369,7 +370,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserQueryParams: getBrowserQueryParams(state),
chrLocation: getChrLocation(state),
allChrLocations: getAllChrLocations(state),
drawerOpened: getDrawerOpened(state),
isDrawerOpened: getIsDrawerOpened(state),
genomeSelectorActive: getGenomeSelectorActive(state),
trackPanelOpened: getTrackPanelOpened(state),
launchbarExpanded: getLaunchbarExpanded(state),
......
......@@ -16,7 +16,7 @@ import {
getBrowserActiveGenomeId,
getBrowserActiveEnsObject
} from '../browserSelectors';
import { getDrawerOpened } from '../drawer/drawerSelectors';
import { getIsDrawerOpened } from '../drawer/drawerSelectors';
import {
getSelectedBrowserTab,
getTrackPanelModalOpened,
......@@ -34,15 +34,15 @@ import BrowserTabs from '../browser-tabs/BrowserTabs';
import styles from './BrowserBar.scss';
type StateProps = {
activeGenomeId: string;
activeGenomeId: string | null;
browserActivated: boolean;
browserNavOpened: boolean;
chrLocation: ChrLocation | null;
defaultChrLocation: ChrLocation | null;
drawerOpened: { [genomeId: string]: boolean };
isDrawerOpened: boolean;
genomeSelectorActive: boolean;
ensObject: EnsObject | null;
selectedBrowserTab: { [genomeId: string]: TrackType };
selectedBrowserTab: TrackType;
trackPanelModalOpened: boolean;
trackPanelOpened: boolean;
};
......@@ -50,7 +50,7 @@ type StateProps = {
type DispatchProps = {
selectBrowserTabAndSave: (selectedBrowserTab: TrackType) => void;
toggleBrowserNav: () => void;
toggleDrawer: (drawerOpened: boolean) => void;
toggleDrawer: (isDrawerOpened: boolean) => void;
toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
};
......@@ -73,7 +73,7 @@ type BrowserNavigatorButtonProps = {
export const BrowserBar: FunctionComponent<BrowserBarProps> = (
props: BrowserBarProps
) => {
const drawerOpenedForGenome = props.drawerOpened[props.activeGenomeId];
const { isDrawerOpened } = props;
const shouldShowBrowserInfo = () => {
const { defaultChrLocation } = props;
......@@ -99,7 +99,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
}, [props.defaultChrLocation, props.genomeSelectorActive]);
const getBrowserNavIcon = () => {
if (drawerOpenedForGenome === true) {
if (isDrawerOpened) {
return navigator.icon.grey as string;
} else if (props.browserNavOpened) {
return navigator.icon.selected as string;
......@@ -109,7 +109,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
};
const toggleNavigator = () => {
if (drawerOpenedForGenome === true) {
if (isDrawerOpened) {
return;
}
......@@ -118,7 +118,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
const className = classNames(styles.browserInfo, {
[styles.browserInfoExpanded]: !props.trackPanelOpened,
[styles.browserInfoGreyed]: drawerOpenedForGenome
[styles.browserInfoGreyed]: isDrawerOpened
});
if (!(props.chrLocation && props.ensObject)) {
......@@ -134,7 +134,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
dispatchBrowserLocation={props.dispatchBrowserLocation}
chrLocation={props.chrLocation}
defaultChrLocation={props.defaultChrLocation}
drawerOpened={props.drawerOpened}
isDrawerOpened={isDrawerOpened}
/>
{showBrowserInfo && <BrowserInfo ensObject={props.ensObject} />}
</dl>
......@@ -144,7 +144,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
browserActivated={props.browserActivated}
dispatchBrowserLocation={props.dispatchBrowserLocation}
chrLocation={props.chrLocation}
drawerOpened={props.drawerOpened}
isDrawerOpened={isDrawerOpened}
genomeSelectorActive={props.genomeSelectorActive}
toggleGenomeSelector={props.toggleGenomeSelector}
/>
......@@ -159,9 +159,8 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
</div>
{props.trackPanelOpened && props.activeGenomeId && (
<BrowserTabs
activeGenomeId={props.activeGenomeId}
ensObject={props.ensObject}
drawerOpened={props.drawerOpened}
isDrawerOpened={props.isDrawerOpened}
genomeSelectorActive={props.genomeSelectorActive}
selectBrowserTabAndSave={props.selectBrowserTabAndSave}
selectedBrowserTab={props.selectedBrowserTab}
......@@ -228,7 +227,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserNavOpened: getBrowserNavOpened(state),
chrLocation: getChrLocation(state),
defaultChrLocation: getDefaultChrLocation(state),
drawerOpened: getDrawerOpened(state),
isDrawerOpened: getIsDrawerOpened(state),
ensObject: getBrowserActiveEnsObject(state),
genomeSelectorActive: getGenomeSelectorActive(state),
selectedBrowserTab: getSelectedBrowserTab(state),
......
......@@ -15,11 +15,11 @@ import styles from './BrowserGenomeSelector.scss';
import { getChrLocationStr } from '../browserHelper';
type BrowserGenomeSelectorProps = {
activeGenomeId: string;
activeGenomeId: string | null;
browserActivated: boolean;
chrLocation: ChrLocation;
dispatchBrowserLocation: (genomeId: string, chrLocation: ChrLocation) => void;
drawerOpened: { [genomeId: string]: boolean };
isDrawerOpened: boolean;
genomeSelectorActive: boolean;
toggleGenomeSelector: (genomeSelectorActive: boolean) => void;
};
......@@ -27,7 +27,7 @@ type BrowserGenomeSelectorProps = {
const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
props: BrowserGenomeSelectorProps
) => {
const { activeGenomeId, chrLocation, drawerOpened } = props;
const { activeGenomeId, chrLocation, isDrawerOpened } = props;
const chrLocationStr = getChrLocationStr(chrLocation);
const [chrLocationPlaceholder, setChrLocationPlaceholder] = useState('');
......@@ -36,8 +36,6 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
const [chrCode, chrStart, chrEnd] = chrLocation;
const displayChrRegion = !(chrStart === 0 && chrEnd === 0);
const drawerOpenedForGenome = drawerOpened[activeGenomeId];
useEffect(() => {
setChrLocationPlaceholder(chrLocationStr);
}, []);
......@@ -45,7 +43,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
const getGenomeSelectorClasses = () => {
let classNames = styles.browserGenomeSelector;
if (drawerOpenedForGenome === true) {
if (isDrawerOpened) {
classNames += ` ${styles.browserGenomeSelectorDisabled}`;
}
......@@ -53,7 +51,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
};
const activateForm = () => {
if (drawerOpenedForGenome === true) {
if (isDrawerOpened) {
return;
}
......
......@@ -10,11 +10,11 @@ import styles from './BrowserReset.scss';
import { getChrLocationStr } from '../browserHelper';
type BrowserResetProps = {
activeGenomeId: string;
activeGenomeId: string | null;
chrLocation: ChrLocation | null;
defaultChrLocation: ChrLocation | null;
dispatchBrowserLocation: (genomeId: string, chrLocation: ChrLocation) => void;
drawerOpened: { [genomeId: string]: boolean };
isDrawerOpened: boolean;
};
export const BrowserReset: FunctionComponent<BrowserResetProps> = (
......@@ -24,11 +24,9 @@ export const BrowserReset: FunctionComponent<BrowserResetProps> = (
activeGenomeId,
chrLocation,
defaultChrLocation,
drawerOpened
isDrawerOpened
} = props;
const drawerOpenedForGenome = drawerOpened[activeGenomeId];
const getResetIconStatus = (): ImageButtonStatus => {
if (!(activeGenomeId && chrLocation && defaultChrLocation)) {
return ImageButtonStatus.DISABLED;
......@@ -37,10 +35,7 @@ export const BrowserReset: FunctionComponent<BrowserResetProps> = (
const chrLocationStr = getChrLocationStr(chrLocation);
const defaultChrLocationStr = getChrLocationStr(defaultChrLocation);
if (
chrLocationStr === defaultChrLocationStr ||
drawerOpenedForGenome === true
) {
if (chrLocationStr === defaultChrLocationStr || isDrawerOpened) {
return ImageButtonStatus.DISABLED;
}
......@@ -48,7 +43,7 @@ export const BrowserReset: FunctionComponent<BrowserResetProps> = (
};
const resetBrowser = () => {
if (drawerOpenedForGenome === true) {
if (isDrawerOpened) {
return;
}
......
......@@ -5,27 +5,24 @@ import { EnsObject } from 'src/ens-object/ensObjectTypes';
import styles from './BrowserTabs.scss';
type BrowserTabsProps = {
activeGenomeId: string;
ensObject: EnsObject;
drawerOpened: { [genomeId: string]: boolean };
isDrawerOpened: boolean;
genomeSelectorActive: boolean;
selectBrowserTabAndSave: (selectedBrowserTab: TrackType) => void;
selectedBrowserTab: { [genomeId: string]: TrackType };
toggleDrawer: (drawerOpened: boolean) => void;
selectedBrowserTab: TrackType;
toggleDrawer: (isDrawerOpened: boolean) => void;
trackPanelModalOpened: boolean;
};
const BrowserTabs: FunctionComponent<BrowserTabsProps> = (
props: BrowserTabsProps
) => {
const drawerOpenedForGenome = props.drawerOpened[props.activeGenomeId];
const handleTabClick = (value: TrackType) => {
if (props.genomeSelectorActive || !props.ensObject.genome_id) {
return;
}
if (drawerOpenedForGenome === true) {
if (props.isDrawerOpened) {
props.toggleDrawer(false);
}
......@@ -33,15 +30,13 @@ const BrowserTabs: FunctionComponent<BrowserTabsProps> = (
};
const getBrowserTabClasses = (trackType: TrackType) => {
const { activeGenomeId, drawerOpened, trackPanelModalOpened } = props;
const selectedBrowserTab =
props.selectedBrowserTab[activeGenomeId] || TrackType.GENOMIC;
const { isDrawerOpened, selectedBrowserTab, trackPanelModalOpened } = props;
let classNames = styles.browserTab;
if (
props.ensObject.genome_id &&
selectedBrowserTab === trackType &&
drawerOpened[activeGenomeId] === false &&
isDrawerOpened === false &&
trackPanelModalOpened === false
) {
classNames += ` ${styles.browserTabActive} ${styles.browserTabArrow}`;
......
......@@ -15,7 +15,7 @@ export const getBrowserActivated = (state: RootState): boolean =>
export const getBrowserOpenState = (state: RootState): BrowserOpenState =>
state.browser.browserInfo.browserOpenState;
export const getBrowserActiveGenomeId = (state: RootState): string =>
export const getBrowserActiveGenomeId = (state: RootState) =>
state.browser.browserEntity.activeGenomeId;
export const getBrowserActiveGenomeInfo = (state: RootState) => {
......
......@@ -42,7 +42,7 @@ export const defaultBrowserState: BrowserState = {
};
export type BrowserEntityState = Readonly<{
activeGenomeId: string;
activeGenomeId: string | null;
activeEnsObjectIds: { [genomeId: string]: string };
trackStates: TrackStates;
}>;
......
......@@ -4,10 +4,7 @@ import { connect } from 'react-redux';
import { RootState } from 'src/store';
import { toggleDrawer } from './drawerActions';
import { getDrawerView } from './drawerSelectors';
import {
getBrowserActiveEnsObject,
getBrowserActiveGenomeId
} from '../browserSelectors';
import { getBrowserActiveEnsObject } from '../browserSelectors';
import DrawerGene from './drawer-views/DrawerGene';
import DrawerTranscript from './drawer-views/DrawerTranscript';
......@@ -24,13 +21,12 @@ import SnpIndels from './drawer-views/SnpIndels';
import { EnsObject } from 'src/ens-object/ensObjectTypes';
type StateProps = {
activeGenomeId: string;
drawerView: { [genomeId: string]: string };
drawerView: string;
ensObject: EnsObject | null;
};
type DispatchProps = {
toggleDrawer: (drawerOpened: boolean) => void;
toggleDrawer: (isDrawerOpened: boolean) => void;
};
type OwnProps = {};
......@@ -38,14 +34,14 @@ type OwnProps = {};
type DrawerProps = StateProps & DispatchProps & OwnProps;
const Drawer: FunctionComponent<DrawerProps> = (props: DrawerProps) => {
const { ensObject, drawerView, activeGenomeId } = props;
const { ensObject, drawerView } = props;
if (!ensObject) {
return null;
}
const getDrawerViewComponent = () => {
switch (drawerView[activeGenomeId]) {
switch (drawerView) {
case 'gene-feat':
return <DrawerGene ensObject={ensObject} />;
case 'gene-feat-1':
......@@ -80,7 +76,6 @@ const Drawer: FunctionComponent<DrawerProps> = (props: DrawerProps) => {
};
const mapStateToProps = (state: RootState): StateProps => ({
activeGenomeId: getBrowserActiveGenomeId(state),
drawerView: getDrawerView(state),
ensObject: getBrowserActiveEnsObject(state)
});
......
......@@ -26,24 +26,24 @@ export const changeDrawerView: ActionCreator<
return;
}
const drawerView = {
dispatch(
changeDrawerViewForGenome({
[activeGenomeId]: drawerViewForGenome
};
dispatch(changeDrawerViewForGenome(drawerView));
})
);
};
export const toggleDrawerForGenome = createAction(
'drawer/toggle-drawer',
(resolve) => {
return (drawerOpened: { [genomeId: string]: boolean }) =>
resolve(drawerOpened, getDrawerAnalyticsObject('User Interaction'));
return (isDrawerOpened: { [genomeId: string]: boolean }) =>
resolve(isDrawerOpened, getDrawerAnalyticsObject('User Interaction'));
}
);
export const toggleDrawer: ActionCreator<
ThunkAction<void, any, null, Action<boolean>>
> = (drawerOpened: boolean) => (
> = (isDrawerOpened: boolean) => (
dispatch: Dispatch,
getState: () => RootState
) => {
......@@ -53,9 +53,9 @@ export const toggleDrawer: ActionCreator<
return;
}
const drawerOpenedForGenome = {
[activeGenomeId]: drawerOpened
};
dispatch(toggleDrawerForGenome(drawerOpenedForGenome));
dispatch(
toggleDrawerForGenome({
[activeGenomeId]: isDrawerOpened
})
);
};
......@@ -22,7 +22,7 @@ export default function drawer(
return {
...state,
drawerOpened: { ...state.drawerOpened, ...action.payload },
isDrawerOpened: { ...state.isDrawerOpened, ...action.payload },
drawerView: { ...state.drawerView, [genomeId]: drawerViewForGenome }
};
default:
......
import { RootState } from 'src/store';
import { getBrowserActiveEnsObjectId } from '../browserSelectors';
export const getDrawerView = (state: RootState) => state.drawer.drawerView;
export const getDrawerView = (state: RootState) => {
const activeGenomeId = getBrowserActiveEnsObjectId(state);
return activeGenomeId ? state.drawer.drawerView[activeGenomeId] : '';
};
export const getDrawerOpened = (state: RootState) => state.drawer.drawerOpened;
export const getIsDrawerOpened = (state: RootState) => {
const activeGenomeId = getBrowserActiveEnsObjectId(state);
return activeGenomeId ? state.drawer.isDrawerOpened[activeGenomeId] : false;
};
export type DrawerState = Readonly<{
drawerOpened: { [genomeId: string]: boolean };
isDrawerOpened: { [genomeId: string]: boolean };
drawerView: { [genomeId: string]: string };
}>;
export const defaultDrawerState = {
drawerOpened: {},
isDrawerOpened: {},
drawerView: {}
};
......@@ -24,7 +24,7 @@ import {
getTrackPanelModalView,
getSelectedBrowserTab
} from './trackPanelSelectors';
import { getDrawerView, getDrawerOpened } from '../drawer/drawerSelectors';
import { getDrawerView, getIsDrawerOpened } from '../drawer/drawerSelectors';
import {
getBrowserActivated,
getBrowserActiveGenomeId,
......@@ -43,14 +43,14 @@ import { EnsObject } from 'src/ens-object/ensObjectTypes';
import styles from './TrackPanel.scss';
type StateProps = {
activeGenomeId: string;
activeGenomeId: string | null;
breakpointWidth: BreakpointWidth;
browserActivated: boolean;
drawerOpened: { [genomeId: string]: boolean };
drawerView: { [genomeId: string]: string };
isDrawerOpened: boolean;
drawerView: string;
ensObject: EnsObject | null;
launchbarExpanded: boolean;
selectedBrowserTab: { [genomeId: string]: TrackType };
selectedBrowserTab: TrackType;
genomeTrackCategories: GenomeTrackCategory[];
trackPanelModalOpened: boolean;
trackPanelModalView: string;
......@@ -62,7 +62,7 @@ type DispatchProps = {
changeDrawerView: (drawerView: string) => void;
closeTrackPanelModal: () => void;
openTrackPanelModal: (trackPanelModalView: string) => void;
toggleDrawer: (drawerOpened: boolean) => void;
toggleDrawer: (isDrawerOpened: boolean) => void;
toggleTrackPanel: (trackPanelOpened?: boolean) => void;
updateTrackStates: (payload: UpdateTrackStatesPayload) => void;
};
......@@ -76,8 +76,7 @@ type TrackPanelProps = StateProps & DispatchProps & OwnProps;
const TrackPanel: FunctionComponent<TrackPanelProps> = (
props: TrackPanelProps
) => {
const drawerOpenedForGenome =
props.drawerOpened[props.activeGenomeId as string];
const { isDrawerOpened } = props;
useEffect(() => {
if (props.breakpointWidth !== BreakpointWidth.LARGE) {
......@@ -96,7 +95,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
}));
const getBrowserWidth = (): string => {
if (drawerOpenedForGenome === true) {
if (isDrawerOpened) {
return 'calc(41px + 0vw)';
}
return props.trackPanelOpened
......@@ -108,7 +107,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
setTrackAnimation({
left: getBrowserWidth()
});
}, [drawerOpenedForGenome, props.trackPanelOpened]);
}, [isDrawerOpened, props.trackPanelOpened]);
return props.activeGenomeId ? (
<animated.div style={trackAnimation}>
......@@ -117,7 +116,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
<TrackPanelBar
activeGenomeId={props.activeGenomeId}
closeTrackPanelModal={props.closeTrackPanelModal}
drawerOpened={props.drawerOpened}
isDrawerOpened={props.isDrawerOpened}
launchbarExpanded={props.launchbarExpanded}
openTrackPanelModal={props.openTrackPanelModal}
toggleDrawer={props.toggleDrawer}
......@@ -129,7 +128,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
<TrackPanelList
activeGenomeId={props.activeGenomeId}
browserRef={props.browserRef}
drawerOpened={props.drawerOpened}
isDrawerOpened={props.isDrawerOpened}
drawerView={props.drawerView}
launchbarExpanded={props.launchbarExpanded}
ensObject={props.ensObject}
......@@ -148,7 +147,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
trackPanelModalView={props.trackPanelModalView}
/>
) : null}
{drawerOpenedForGenome && <Drawer />}
{isDrawerOpened && <Drawer />}