Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
5e994de9
Commit
5e994de9
authored
Mar 02, 2019
by
Imran Salam
Browse files
remove drawer sections and add drawer view to state
parent
d952c1e2
Changes
10
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
47 additions
and
101 deletions
+47
-101
src/ensembl/src/content/app/browser/browserActions.ts
src/ensembl/src/content/app/browser/browserActions.ts
+3
-10
src/ensembl/src/content/app/browser/browserReducer.ts
src/ensembl/src/content/app/browser/browserReducer.ts
+2
-8
src/ensembl/src/content/app/browser/browserSelectors.ts
src/ensembl/src/content/app/browser/browserSelectors.ts
+2
-9
src/ensembl/src/content/app/browser/browserState.ts
src/ensembl/src/content/app/browser/browserState.ts
+6
-9
src/ensembl/src/content/app/browser/drawer/Drawer.tsx
src/ensembl/src/content/app/browser/drawer/Drawer.tsx
+7
-19
src/ensembl/src/content/app/browser/drawer/drawerSectionConfig.ts
...mbl/src/content/app/browser/drawer/drawerSectionConfig.ts
+0
-22
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
...nsembl/src/content/app/browser/track-panel/TrackPanel.tsx
+8
-8
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
...p/browser/track-panel/track-panel-list/TrackPanelList.tsx
+14
-11
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.scss
...wser/track-panel/track-panel-list/TrackPanelListItem.scss
+1
-1
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx
...owser/track-panel/track-panel-list/TrackPanelListItem.tsx
+4
-4
No files found.
src/ensembl/src/content/app/browser/browserActions.ts
View file @
5e994de9
...
...
@@ -15,10 +15,10 @@ export const toggleTrackPanel = createAction(
}
);
export
const
change
CurrentTrack
=
createAction
(
'
browser/change-
current-track
'
,
export
const
change
DrawerView
=
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
'
);
...
...
src/ensembl/src/content/app/browser/browserReducer.ts
View file @
5e994de9
...
...
@@ -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
.
change
CurrentTrack
):
case
getType
(
browser
.
change
DrawerView
):
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
):
...
...
src/ensembl/src/content/app/browser/browserSelectors.ts
View file @
5e994de9
...
...
@@ -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
;
...
...
src/ensembl/src/content/app/browser/browserState.ts
View file @
5e994de9
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
;
drawer
Sections
:
DrawerSection
[]
;
drawer
View
:
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
,
drawer
Sections
:
[]
,
drawer
View
:
''
,
trackPanelModalOpened
:
false
,
trackPanelModalView
:
''
,
trackPanelOpened
:
true
...
...
@@ -77,7 +71,10 @@ export const drawerState = (
};
}
else
{
return
{
...
defaultState
...
state
,
browserOpenState
:
BrowserOpenState
.
SEMI_EXPANDED
,
drawerOpened
,
drawerView
:
''
};
}
};
src/ensembl/src/content/app/browser/drawer/Drawer.tsx
View file @
5e994de9
...
...
@@ -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
getDrawerView
Component
=
()
=>
{
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
}
>
{
getDrawerView
Component
()
}
</
div
>
</
section
>
);
};
const
mapStateToProps
=
(
state
:
RootState
):
StateProps
=>
({
currentDrawerSection
:
getCurrentDrawerSection
(
state
),
currentTrack
:
getCurrentTrack
(
state
),
drawerSections
:
getDrawerSections
(
state
)
drawerView
:
getDrawerView
(
state
)
});
const
mapDispatchToProps
:
DispatchProps
=
{
changeCurrentDrawerSection
,
toggleDrawer
};
...
...
src/ensembl/src/content/app/browser/drawer/drawerSectionConfig.ts
deleted
100644 → 0
View file @
d952c1e2
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
'
:
[]
};
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
View file @
5e994de9
...
...
@@ -14,13 +14,13 @@ import { RootState } from 'src/rootReducer';
import
{
toggleDrawer
,
toggleTrackPanel
,
change
CurrentTrack
,
change
DrawerView
,
closeTrackPanelModal
,
openTrackPanelModal
}
from
'
../browserActions
'
;
import
{
get
CurrentTrack
,
get
DrawerView
,
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
=
{
change
CurrentTrack
:
(
currentTrack
:
string
)
=>
void
;
change
DrawerView
:
(
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
}
update
T
ra
ck
=
{
props
.
change
CurrentTrack
}
update
D
ra
werView
=
{
props
.
change
DrawerView
}
/>
{
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
=
{
change
CurrentTrack
,
change
DrawerView
,
closeTrackPanelModal
,
openTrackPanelModal
,
toggleDrawer
,
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
View file @
5e994de9
...
...
@@ -11,20 +11,23 @@ import styles from './TrackPanelList.scss';
type
TrackPanelListProps
=
{
browserRef
:
RefObject
<
HTMLDivElement
>
;
currentTrack
:
string
;
drawerView
:
string
;
launchbarExpanded
:
boolean
;
toggleDrawer
:
(
drawerOpened
:
boolean
)
=>
void
;
update
T
ra
ck
:
(
currentTrack
:
string
)
=>
void
;
update
D
ra
werView
:
(
drawerView
:
string
)
=>
void
;
};
const
TrackPanelList
:
FunctionComponent
<
TrackPanelListProps
>
=
(
props
:
TrackPanelListProps
)
=>
{
const
change
T
ra
ck
=
(
currentTrack
:
string
)
=>
{
const
{
toggleDrawer
,
update
T
ra
ck
}
=
props
;
const
change
D
ra
werView
=
(
currentTrack
:
string
)
=>
{
const
{
drawerView
,
toggleDrawer
,
update
D
ra
werView
}
=
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
get
T
ra
ck
Class
=
(
trackName
:
string
):
string
=>
{
const
get
D
ra
werView
Class
=
(
trackName
:
string
):
string
=>
{
if
(
trackName
===
'
gene
'
)
{
return
'
gene
'
;
}
if
(
props
.
currentTrack
===
trackName
)
{
return
'
current
T
ra
ck
'
;
if
(
props
.
drawerView
===
trackName
)
{
return
styles
.
current
D
ra
werView
;
}
return
''
;
...
...
@@ -50,8 +53,8 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
const
getTrackListItem
=
(
track
:
TrackPanelItem
)
=>
(
<
TrackPanelListItem
browserRef
=
{
props
.
browserRef
}
className
=
{
get
T
ra
ck
Class
(
track
.
name
)
}
changeTrack
=
{
change
T
ra
ck
}
className
=
{
get
D
ra
werView
Class
(
track
.
name
)
}
updateDrawerView
=
{
change
D
ra
werView
}
key
=
{
track
.
id
}
track
=
{
track
}
>
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.scss
View file @
5e994de9
...
...
@@ -25,7 +25,7 @@
}
&
:hover
,
&
.current
T
ra
ck
{
&
.current
D
ra
werView
{
background
:
lighten
(
$ens-blue
,
40%
);
}
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx
View file @
5e994de9
...
...
@@ -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
change
T
ra
ck
Handler
=
()
=>
{
props
.
changeTrack
(
props
.
track
.
name
);
const
change
D
ra
werView
Handler
=
()
=>
{
props
.
updateDrawerView
(
props
.
track
.
name
);
};
const
toggleExpand
=
()
=>
{
...
...
@@ -83,7 +83,7 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
</
button
>
)
}
</
label
>
<
button
onClick
=
{
change
T
ra
ck
Handler
}
>
<
button
onClick
=
{
change
D
ra
werView
Handler
}
>
<
img
src
=
{
ellipsis
.
icon
.
on
}
alt
=
{
`Go to
${
track
.
label
}
`
}
/>
</
button
>
<
button
onClick
=
{
toggleTrack
}
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment