Commit 5e994de9 authored by Imran Salam's avatar Imran Salam
Browse files

remove drawer sections and add drawer view to state

parent d952c1e2
......@@ -15,10 +15,10 @@ export const toggleTrackPanel = createAction(
}
);
export const changeCurrentTrack = createAction(
'browser/change-current-track',
export const changeDrawerView = createAction(
'browser/change-drawer-view',
(resolve) => {
return (currentTrack: string) => resolve(currentTrack);
return (drawerView: string) => resolve(drawerView);
}
);
......@@ -26,13 +26,6 @@ export const toggleDrawer = createAction('browser/toggle-drawer', (resolve) => {
return (drawerOpened?: boolean) => resolve(drawerOpened);
});
export const changeCurrentDrawerSection = createAction(
'browser/change-current-drawer-section',
(resolve) => {
return (currentDrawerSection: string) => resolve(currentDrawerSection);
}
);
export const toggleBrowserNav = createAction(
'browser/toggle-browser-navigation'
);
......
......@@ -8,8 +8,6 @@ import {
drawerState
} from './browserState';
import { drawerSectionConfig } from './drawer/drawerSectionConfig';
export default (
state: BrowserState = defaultState,
action: ActionType<typeof browser>
......@@ -19,17 +17,13 @@ export default (
return { ...state, browserActivated: action.payload };
case getType(browser.toggleTrackPanel):
return trackPanelState(state, action.payload);
case getType(browser.changeCurrentTrack):
case getType(browser.changeDrawerView):
return {
...state,
currentDrawerSection: '',
currentTrack: action.payload,
drawerSections: drawerSectionConfig[action.payload]
drawerView: action.payload
};
case getType(browser.toggleDrawer):
return drawerState(state, action.payload);
case getType(browser.changeCurrentDrawerSection):
return { ...state, currentDrawerSection: action.payload };
case getType(browser.toggleBrowserNav):
return { ...state, browserNavOpened: !state.browserNavOpened };
case getType(browser.updateBrowserNavStates):
......
......@@ -4,7 +4,6 @@ import {
BrowserNavStates,
ChrLocation
} from './browserState';
import { DrawerSection } from './drawer/drawerSectionConfig';
export const getBrowserActivated = (state: RootState): boolean =>
state.browser.browserActivated;
......@@ -12,18 +11,12 @@ export const getBrowserActivated = (state: RootState): boolean =>
export const getBrowserOpenState = (state: RootState): BrowserOpenState =>
state.browser.browserOpenState;
export const getCurrentDrawerSection = (state: RootState): string =>
state.browser.currentDrawerSection;
export const getCurrentTrack = (state: RootState): string =>
state.browser.currentTrack;
export const getDrawerView = (state: RootState): string =>
state.browser.drawerView;
export const getDrawerOpened = (state: RootState): boolean =>
state.browser.drawerOpened;
export const getDrawerSections = (state: RootState): DrawerSection[] =>
state.browser.drawerSections;
export const getTrackPanelOpened = (state: RootState): boolean =>
state.browser.trackPanelOpened;
......
import { DrawerSection } from './drawer/drawerSectionConfig';
export enum BrowserOpenState {
EXPANDED = 'expanded',
SEMI_EXPANDED = 'semiExpanded',
......@@ -24,11 +22,9 @@ export type BrowserState = Readonly<{
browserNavStates: BrowserNavStates;
browserOpenState: BrowserOpenState;
chrLocation: ChrLocation;
currentDrawerSection: string;
currentTrack: string;
defaultChrLocation: ChrLocation;
drawerOpened: boolean;
drawerSections: DrawerSection[];
drawerView: string;
trackPanelModalOpened: boolean;
trackPanelModalView: string;
trackPanelOpened: boolean;
......@@ -40,11 +36,9 @@ export const defaultState: BrowserState = {
browserNavStates: [true, true, true, true, true, true],
browserOpenState: BrowserOpenState.SEMI_EXPANDED,
chrLocation: ['13', 0, 0],
currentDrawerSection: '',
currentTrack: '',
defaultChrLocation: ['13', 0, 0],
drawerOpened: false,
drawerSections: [],
drawerView: '',
trackPanelModalOpened: false,
trackPanelModalView: '',
trackPanelOpened: true
......@@ -77,7 +71,10 @@ export const drawerState = (
};
} else {
return {
...defaultState
...state,
browserOpenState: BrowserOpenState.SEMI_EXPANDED,
drawerOpened,
drawerView: ''
};
}
};
......@@ -2,14 +2,8 @@ import React, { FunctionComponent } from 'react';
import { connect } from 'react-redux';
import { RootState } from 'src/rootReducer';
import { changeCurrentDrawerSection, toggleDrawer } from '../browserActions';
import {
getCurrentDrawerSection,
getCurrentTrack,
getDrawerSections
} from '../browserSelectors';
import { DrawerSection } from './drawerSectionConfig';
import { toggleDrawer } from '../browserActions';
import { getDrawerView } from '../browserSelectors';
import DrawerGene from './drawer-views/DrawerGene';
import DrawerTranscript from './drawer-views/DrawerTranscript';
......@@ -23,13 +17,10 @@ import closeIcon from 'static/img/track-panel/close.svg';
import styles from './Drawer.scss';
type StateProps = {
currentDrawerSection: string;
currentTrack: string;
drawerSections: DrawerSection[];
drawerView: string;
};
type DispatchProps = {
changeCurrentDrawerSection: (currentDrawerSection: string) => void;
toggleDrawer: (drawerOpened?: boolean) => void;
};
......@@ -38,8 +29,8 @@ type OwnProps = {};
type DrawerProps = StateProps & DispatchProps & OwnProps;
const Drawer: FunctionComponent<DrawerProps> = (props: DrawerProps) => {
const getDrawerView = () => {
switch (props.currentTrack) {
const getDrawerViewComponent = () => {
switch (props.drawerView) {
case 'gene':
return <DrawerGene />;
case 'transcript':
......@@ -66,19 +57,16 @@ const Drawer: FunctionComponent<DrawerProps> = (props: DrawerProps) => {
<button className={styles.closeButton} onClick={closeDrawer}>
<img src={closeIcon} alt="close drawer" />
</button>
<div className={styles.drawerView}>{getDrawerView()}</div>
<div className={styles.drawerView}>{getDrawerViewComponent()}</div>
</section>
);
};
const mapStateToProps = (state: RootState): StateProps => ({
currentDrawerSection: getCurrentDrawerSection(state),
currentTrack: getCurrentTrack(state),
drawerSections: getDrawerSections(state)
drawerView: getDrawerView(state)
});
const mapDispatchToProps: DispatchProps = {
changeCurrentDrawerSection,
toggleDrawer
};
......
export type DrawerSection = {
label: string;
name: string;
};
export type DrawerSectionList = {
[key: string]: DrawerSection[];
};
export const drawerSectionConfig: DrawerSectionList = {
'track-one': [
{
label: 'Summary',
name: 'summary'
},
{
label: 'Miscellaneous',
name: 'miscellaneous'
}
],
'track-two': []
};
......@@ -14,13 +14,13 @@ import { RootState } from 'src/rootReducer';
import {
toggleDrawer,
toggleTrackPanel,
changeCurrentTrack,
changeDrawerView,
closeTrackPanelModal,
openTrackPanelModal
} from '../browserActions';
import {
getCurrentTrack,
getDrawerView,
getDrawerOpened,
getTrackPanelOpened,
getBrowserActivated,
......@@ -37,8 +37,8 @@ import TrackPanelModal from './track-panel-modal/TrackPanelModal';
type StateProps = {
browserActivated: boolean;
currentTrack: string;
drawerOpened: boolean;
drawerView: string;
breakpointWidth: BreakpointWidth;
launchbarExpanded: boolean;
trackPanelModalOpened: boolean;
......@@ -47,7 +47,7 @@ type StateProps = {
};
type DispatchProps = {
changeCurrentTrack: (currentTrack: string) => void;
changeDrawerView: (drawerView: string) => void;
closeTrackPanelModal: () => void;
openTrackPanelModal: (trackPanelModalView: string) => void;
toggleDrawer: (drawerOpened: boolean) => void;
......@@ -89,10 +89,10 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
<Fragment>
<TrackPanelList
browserRef={props.browserRef}
currentTrack={props.currentTrack}
drawerView={props.drawerView}
launchbarExpanded={props.launchbarExpanded}
toggleDrawer={props.toggleDrawer}
updateTrack={props.changeCurrentTrack}
updateDrawerView={props.changeDrawerView}
/>
{props.trackPanelModalOpened ? (
<TrackPanelModal
......@@ -112,8 +112,8 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
const mapStateToProps = (state: RootState): StateProps => ({
breakpointWidth: getBreakpointWidth(state),
browserActivated: getBrowserActivated(state),
currentTrack: getCurrentTrack(state),
drawerOpened: getDrawerOpened(state),
drawerView: getDrawerView(state),
launchbarExpanded: getLaunchbarExpanded(state),
trackPanelModalOpened: getTrackPanelModalOpened(state),
trackPanelModalView: getTrackPanelModalView(state),
......@@ -121,7 +121,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
});
const mapDispatchToProps: DispatchProps = {
changeCurrentTrack,
changeDrawerView,
closeTrackPanelModal,
openTrackPanelModal,
toggleDrawer,
......
......@@ -11,20 +11,23 @@ import styles from './TrackPanelList.scss';
type TrackPanelListProps = {
browserRef: RefObject<HTMLDivElement>;
currentTrack: string;
drawerView: string;
launchbarExpanded: boolean;
toggleDrawer: (drawerOpened: boolean) => void;
updateTrack: (currentTrack: string) => void;
updateDrawerView: (drawerView: string) => void;
};
const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
props: TrackPanelListProps
) => {
const changeTrack = (currentTrack: string) => {
const { toggleDrawer, updateTrack } = props;
const changeDrawerView = (currentTrack: string) => {
const { drawerView, toggleDrawer, updateDrawerView } = props;
updateTrack(currentTrack);
toggleDrawer(true);
updateDrawerView(currentTrack);
if (!drawerView) {
toggleDrawer(true);
}
};
const getTrackPanelListClasses = () => {
......@@ -35,13 +38,13 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
return `${styles.trackPanelList} ${heightClass}`;
};
const getTrackClass = (trackName: string): string => {
const getDrawerViewClass = (trackName: string): string => {
if (trackName === 'gene') {
return 'gene';
}
if (props.currentTrack === trackName) {
return 'currentTrack';
if (props.drawerView === trackName) {
return styles.currentDrawerView;
}
return '';
......@@ -50,8 +53,8 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
const getTrackListItem = (track: TrackPanelItem) => (
<TrackPanelListItem
browserRef={props.browserRef}
className={getTrackClass(track.name)}
changeTrack={changeTrack}
className={getDrawerViewClass(track.name)}
updateDrawerView={changeDrawerView}
key={track.id}
track={track}
>
......
......@@ -25,7 +25,7 @@
}
&:hover,
&.currentTrack {
&.currentDrawerView {
background: lighten($ens-blue, 40%);
}
......
......@@ -17,7 +17,7 @@ type TrackPanelListItemProps = {
children?: ReactNode[];
className: string;
track: TrackPanelItem;
changeTrack: (name: string) => void;
updateDrawerView: (drawerView: string) => void;
};
// delete this when there is a better place to put this
......@@ -33,8 +33,8 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
const { ellipsis, eye } = trackPanelIconConfig;
const listItemClass = styles[className] || '';
const changeTrackHandler = () => {
props.changeTrack(props.track.name);
const changeDrawerViewHandler = () => {
props.updateDrawerView(props.track.name);
};
const toggleExpand = () => {
......@@ -83,7 +83,7 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
</button>
)}
</label>
<button onClick={changeTrackHandler}>
<button onClick={changeDrawerViewHandler}>
<img src={ellipsis.icon.on} alt={`Go to ${track.label}`} />
</button>
<button onClick={toggleTrack}>
......
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