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
bcfd2588
Commit
bcfd2588
authored
Mar 05, 2019
by
Imran Salam
Browse files
implement browser tabs and grey out browser navigator icon when drawer opened
parent
ca1e18a1
Changes
13
Hide whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
205 additions
and
32 deletions
+205
-32
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss
...sembl/src/content/app/browser/browser-bar/BrowserBar.scss
+1
-0
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx
...nsembl/src/content/app/browser/browser-bar/BrowserBar.tsx
+28
-8
src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.scss
...mbl/src/content/app/browser/browser-tabs/BrowserTabs.scss
+7
-3
src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.tsx
...embl/src/content/app/browser/browser-tabs/BrowserTabs.tsx
+55
-11
src/ensembl/src/content/app/browser/browserActions.ts
src/ensembl/src/content/app/browser/browserActions.ts
+8
-0
src/ensembl/src/content/app/browser/browserConfig.ts
src/ensembl/src/content/app/browser/browserConfig.ts
+2
-0
src/ensembl/src/content/app/browser/browserReducer.ts
src/ensembl/src/content/app/browser/browserReducer.ts
+2
-0
src/ensembl/src/content/app/browser/browserSelectors.ts
src/ensembl/src/content/app/browser/browserSelectors.ts
+4
-0
src/ensembl/src/content/app/browser/browserState.ts
src/ensembl/src/content/app/browser/browserState.ts
+4
-0
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
...nsembl/src/content/app/browser/track-panel/TrackPanel.tsx
+7
-2
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
...p/browser/track-panel/track-panel-list/TrackPanelList.tsx
+24
-3
src/ensembl/src/content/app/browser/track-panel/trackPanelConfig.ts
...l/src/content/app/browser/track-panel/trackPanelConfig.ts
+53
-5
src/ensembl/static/img/browser/navigator-grey.svg
src/ensembl/static/img/browser/navigator-grey.svg
+10
-0
No files found.
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss
View file @
bcfd2588
...
...
@@ -4,6 +4,7 @@
@include
flex
;
background
:
$ens-light-grey
;
box-shadow
:
0
2px
3px
$ens-grey
;
height
:
32px
;
padding
:
7px
0
3px
0
;
position
:
relative
;
z-index
:
200
;
...
...
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx
View file @
bcfd2588
...
...
@@ -2,11 +2,14 @@ import React, { FunctionComponent, Fragment } from 'react';
import
{
connect
}
from
'
react-redux
'
;
import
{
browserInfoConfig
}
from
'
../browserConfig
'
;
import
{
TrackType
}
from
'
../track-panel/trackPanelConfig
'
;
import
{
toggleBrowserNav
,
updateDefaultChrLocation
,
updateChrLocation
,
toggleGenomeSelector
toggleGenomeSelector
,
selectBrowserTab
}
from
'
../browserActions
'
;
import
{
ChrLocation
}
from
'
../browserState
'
;
import
{
...
...
@@ -15,7 +18,8 @@ import {
getBrowserActivated
,
getDefaultChrLocation
,
getGenomeSelectorActive
,
getDrawerOpened
getDrawerOpened
,
getSelectedBrowserTab
}
from
'
../browserSelectors
'
;
import
{
RootState
}
from
'
src/rootReducer
'
;
...
...
@@ -32,9 +36,11 @@ type StateProps = {
defaultChrLocation
:
ChrLocation
;
drawerOpened
:
boolean
;
genomeSelectorActive
:
boolean
;
selectedBrowserTab
:
TrackType
;
};
type
DispatchProps
=
{
selectBrowserTab
:
(
selectedBrowserTab
:
TrackType
)
=>
void
;
toggleBrowserNav
:
()
=>
void
;
toggleGenomeSelector
:
(
genomeSelectorActive
:
boolean
)
=>
void
;
updateChrLocation
:
(
chrLocation
:
ChrLocation
)
=>
void
;
...
...
@@ -65,11 +71,21 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
const
getBrowserNavIcon
=
()
=>
{
if
(
props
.
browserNavOpened
===
true
)
{
return
navigator
.
icon
.
selected
;
}
else
if
(
props
.
drawerOpened
===
true
)
{
return
navigator
.
icon
.
grey
;
}
else
{
return
navigator
.
icon
.
default
;
}
};
const
toggleNavigator
=
()
=>
{
if
(
props
.
drawerOpened
===
true
)
{
return
;
}
props
.
toggleBrowserNav
();
};
return
(
<
div
className
=
{
styles
.
browserBar
}
>
<
div
className
=
{
getBrowserInfoClasses
()
}
>
...
...
@@ -118,17 +134,19 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
/>
{
props
.
genomeSelectorActive
?
null
:
(
<
dd
className
=
{
styles
.
navigator
}
>
<
button
title
=
{
navigator
.
description
}
onClick
=
{
props
.
toggleBrowserNav
}
>
<
button
title
=
{
navigator
.
description
}
onClick
=
{
toggleNavigator
}
>
<
img
src
=
{
getBrowserNavIcon
()
}
alt
=
{
navigator
.
description
}
/>
</
button
>
</
dd
>
)
}
</
dl
>
</
div
>
<
BrowserTabs
/>
<
BrowserTabs
drawerOpened
=
{
props
.
drawerOpened
}
genomeSelectorActive
=
{
props
.
genomeSelectorActive
}
selectBrowserTab
=
{
props
.
selectBrowserTab
}
selectedBrowserTab
=
{
props
.
selectedBrowserTab
}
/>
</
div
>
);
};
...
...
@@ -139,10 +157,12 @@ const mapStateToProps = (state: RootState): StateProps => ({
chrLocation
:
getChrLocation
(
state
),
defaultChrLocation
:
getDefaultChrLocation
(
state
),
drawerOpened
:
getDrawerOpened
(
state
),
genomeSelectorActive
:
getGenomeSelectorActive
(
state
)
genomeSelectorActive
:
getGenomeSelectorActive
(
state
),
selectedBrowserTab
:
getSelectedBrowserTab
(
state
)
});
const
mapDispatchToProps
:
DispatchProps
=
{
selectBrowserTab
,
toggleBrowserNav
,
toggleGenomeSelector
,
updateChrLocation
,
...
...
src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.scss
View file @
bcfd2588
...
...
@@ -10,11 +10,15 @@
}
.browserTab
{
color
:
$ens-blue
;
button
{
color
:
$ens-blue
;
}
}
.browserTabActive
{
color
:
inherit
;
button
{
color
:
inherit
;
}
}
.browserTabArrow
{
...
...
@@ -31,7 +35,7 @@
right
:
calc
(
60%
-
6px
);
transform-origin
:
0
0
;
transform
:
rotate
(
-45deg
);
top
:
2
1
px
;
top
:
2
4
px
;
width
:
0
;
}
}
src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.tsx
View file @
bcfd2588
import
React
,
{
FunctionComponent
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
useEffect
,
useState
}
from
'
react
'
;
import
{
TrackType
}
from
'
../track-panel/trackPanelConfig
'
;
import
styles
from
'
./BrowserTabs.scss
'
;
type
BrowserTabsProps
=
{};
type
BrowserTabsProps
=
{
drawerOpened
:
boolean
;
genomeSelectorActive
:
boolean
;
selectBrowserTab
:
(
selectedBrowserTab
:
TrackType
)
=>
void
;
selectedBrowserTab
:
TrackType
;
};
type
ClickHandlers
=
{
[
key
:
string
]:
()
=>
void
;
};
const
BrowserTabs
:
FunctionComponent
<
BrowserTabsProps
>
=
(
props
:
BrowserTabsProps
)
=>
{
const
initClickHandlers
:
ClickHandlers
=
{};
const
[
clickHandlers
,
setClickHandlers
]
=
useState
(
initClickHandlers
);
const
getBrowserTabClasses
=
(
trackType
:
TrackType
)
=>
{
let
classNames
=
styles
.
browserTab
;
if
(
props
.
selectedBrowserTab
===
trackType
)
{
classNames
+=
`
${
styles
.
browserTabActive
}
`
;
if
(
props
.
drawerOpened
===
false
)
{
classNames
+=
`
${
styles
.
browserTabArrow
}
`
;
}
}
return
classNames
;
};
useEffect
(()
=>
{
const
callbacks
:
ClickHandlers
=
{};
Object
.
values
(
TrackType
).
forEach
((
value
:
TrackType
)
=>
{
callbacks
[
value
]
=
()
=>
{
if
(
props
.
genomeSelectorActive
===
true
)
{
return
;
}
props
.
selectBrowserTab
(
value
);
};
});
setClickHandlers
(
callbacks
);
},
[
props
.
genomeSelectorActive
]);
return
(
<
dl
className
=
{
`
${
styles
.
browserTabs
}
show-for-large`
}
>
<
dd
>
<
button
className
=
{
styles
.
browserTabActive
}
>
Genomic
</
button
>
</
dd
>
<
dd
>
<
button
>
Variation
</
button
>
</
dd
>
<
dd
>
<
button
>
Expression
</
button
>
</
dd
>
{
Object
.
values
(
TrackType
).
map
((
value
:
TrackType
)
=>
(
<
dd
className
=
{
getBrowserTabClasses
(
value
)
}
key
=
{
value
}
onClick
=
{
clickHandlers
[
value
]
}
>
<
button
>
{
value
}
</
button
>
<
/
dd
>
))
}
</
dl
>
);
};
...
...
src/ensembl/src/content/app/browser/browserActions.ts
View file @
bcfd2588
import
{
createAction
}
from
'
typesafe-actions
'
;
import
{
BrowserNavStates
,
ChrLocation
}
from
'
./browserState
'
;
import
{
TrackType
}
from
'
./track-panel/trackPanelConfig
'
;
export
const
updateBrowserActivated
=
createAction
(
'
browser/update-browser-activated
'
,
...
...
@@ -68,3 +69,10 @@ export const toggleGenomeSelector = createAction(
return
(
genomeSelectorActive
:
boolean
)
=>
resolve
(
genomeSelectorActive
);
}
);
export
const
selectBrowserTab
=
createAction
(
'
select-browser-tab
'
,
(
resolve
)
=>
{
return
(
selectedBrowserTab
:
TrackType
)
=>
resolve
(
selectedBrowserTab
);
}
);
src/ensembl/src/content/app/browser/browserConfig.ts
View file @
bcfd2588
...
...
@@ -3,6 +3,7 @@ import resetGreyIcon from 'static/img/browser/reset-grey.svg';
import
navigatorIcon
from
'
static/img/browser/navigator.svg
'
;
import
navigatorSelectedIcon
from
'
static/img/browser/navigator-selected.svg
'
;
import
navigatorGreyIcon
from
'
static/img/browser/navigator-grey.svg
'
;
import
navigateUpIcon
from
'
static/img/browser/navigate-up.svg
'
;
import
navigateUpOffIcon
from
'
static/img/browser/navigate-up-off.svg
'
;
...
...
@@ -53,6 +54,7 @@ export const browserInfoConfig: BrowserInfoType = {
description
:
'
toggle browser navigation
'
,
icon
:
{
default
:
navigatorIcon
,
grey
:
navigatorGreyIcon
,
selected
:
navigatorSelectedIcon
},
name
:
'
navigator
'
...
...
src/ensembl/src/content/app/browser/browserReducer.ts
View file @
bcfd2588
...
...
@@ -50,6 +50,8 @@ export default (
};
case
getType
(
browser
.
toggleGenomeSelector
):
return
{
...
state
,
genomeSelectorActive
:
action
.
payload
};
case
getType
(
browser
.
selectBrowserTab
):
return
{
...
state
,
selectedBrowserTab
:
action
.
payload
};
default
:
return
state
;
}
...
...
src/ensembl/src/content/app/browser/browserSelectors.ts
View file @
bcfd2588
...
...
@@ -4,6 +4,7 @@ import {
BrowserNavStates
,
ChrLocation
}
from
'
./browserState
'
;
import
{
TrackType
}
from
'
./track-panel/trackPanelConfig
'
;
export
const
getBrowserActivated
=
(
state
:
RootState
):
boolean
=>
state
.
browser
.
browserActivated
;
...
...
@@ -40,3 +41,6 @@ export const getTrackPanelModalView = (state: RootState): string =>
export
const
getGenomeSelectorActive
=
(
state
:
RootState
):
boolean
=>
state
.
browser
.
genomeSelectorActive
;
export
const
getSelectedBrowserTab
=
(
state
:
RootState
):
TrackType
=>
state
.
browser
.
selectedBrowserTab
;
src/ensembl/src/content/app/browser/browserState.ts
View file @
bcfd2588
import
{
TrackType
}
from
'
./track-panel/trackPanelConfig
'
;
export
enum
BrowserOpenState
{
EXPANDED
=
'
expanded
'
,
SEMI_EXPANDED
=
'
semiExpanded
'
,
...
...
@@ -26,6 +28,7 @@ export type BrowserState = Readonly<{
drawerOpened
:
boolean
;
drawerView
:
string
;
genomeSelectorActive
:
boolean
;
selectedBrowserTab
:
TrackType
;
trackPanelModalOpened
:
boolean
;
trackPanelModalView
:
string
;
trackPanelOpened
:
boolean
;
...
...
@@ -41,6 +44,7 @@ export const defaultState: BrowserState = {
drawerOpened
:
false
,
drawerView
:
''
,
genomeSelectorActive
:
false
,
selectedBrowserTab
:
TrackType
.
GENOMIC
,
trackPanelModalOpened
:
false
,
trackPanelModalView
:
''
,
trackPanelOpened
:
true
...
...
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
View file @
bcfd2588
...
...
@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
import
TrackPanelBar
from
'
./track-panel-bar/TrackPanelBar
'
;
import
TrackPanelList
from
'
./track-panel-list/TrackPanelList
'
;
import
TrackPanelModal
from
'
./track-panel-modal/TrackPanelModal
'
;
import
{
RootState
}
from
'
src/rootReducer
'
;
...
...
@@ -25,15 +26,16 @@ import {
getTrackPanelOpened
,
getBrowserActivated
,
getTrackPanelModalOpened
,
getTrackPanelModalView
getTrackPanelModalView
,
getSelectedBrowserTab
}
from
'
../browserSelectors
'
;
import
{
getLaunchbarExpanded
}
from
'
src/header/headerSelectors
'
;
import
{
getBreakpointWidth
}
from
'
src/globalSelectors
'
;
import
{
BreakpointWidth
}
from
'
src/globalConfig
'
;
import
{
TrackType
}
from
'
./trackPanelConfig
'
;
import
styles
from
'
./TrackPanel.scss
'
;
import
TrackPanelModal
from
'
./track-panel-modal/TrackPanelModal
'
;
type
StateProps
=
{
browserActivated
:
boolean
;
...
...
@@ -41,6 +43,7 @@ type StateProps = {
drawerView
:
string
;
breakpointWidth
:
BreakpointWidth
;
launchbarExpanded
:
boolean
;
selectedBrowserTab
:
TrackType
;
trackPanelModalOpened
:
boolean
;
trackPanelModalView
:
string
;
trackPanelOpened
:
boolean
;
...
...
@@ -91,6 +94,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
browserRef
=
{
props
.
browserRef
}
drawerView
=
{
props
.
drawerView
}
launchbarExpanded
=
{
props
.
launchbarExpanded
}
selectedBrowserTab
=
{
props
.
selectedBrowserTab
}
toggleDrawer
=
{
props
.
toggleDrawer
}
updateDrawerView
=
{
props
.
changeDrawerView
}
/>
...
...
@@ -115,6 +119,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
drawerOpened
:
getDrawerOpened
(
state
),
drawerView
:
getDrawerView
(
state
),
launchbarExpanded
:
getLaunchbarExpanded
(
state
),
selectedBrowserTab
:
getSelectedBrowserTab
(
state
),
trackPanelModalOpened
:
getTrackPanelModalOpened
(
state
),
trackPanelModalView
:
getTrackPanelModalView
(
state
),
trackPanelOpened
:
getTrackPanelOpened
(
state
)
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
View file @
bcfd2588
import
React
,
{
FunctionComponent
,
RefObject
,
useCallback
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
RefObject
,
useCallback
,
useState
,
useEffect
}
from
'
react
'
;
import
TrackPanelListItem
from
'
./TrackPanelListItem
'
;
import
{
TrackPanelCategory
,
TrackPanelItem
,
trackPanelConfig
trackPanelConfig
,
TrackType
}
from
'
../trackPanelConfig
'
;
import
styles
from
'
./TrackPanelList.scss
'
;
...
...
@@ -13,6 +20,7 @@ type TrackPanelListProps = {
browserRef
:
RefObject
<
HTMLDivElement
>
;
drawerView
:
string
;
launchbarExpanded
:
boolean
;
selectedBrowserTab
:
TrackType
;
toggleDrawer
:
(
drawerOpened
:
boolean
)
=>
void
;
updateDrawerView
:
(
drawerView
:
string
)
=>
void
;
};
...
...
@@ -20,6 +28,19 @@ type TrackPanelListProps = {
const
TrackPanelList
:
FunctionComponent
<
TrackPanelListProps
>
=
(
props
:
TrackPanelListProps
)
=>
{
const
[
trackCategories
,
setTrackCategories
]
=
useState
(
trackPanelConfig
.
categories
);
useEffect
(()
=>
{
setTrackCategories
(
trackPanelConfig
.
categories
.
filter
(
(
category
:
TrackPanelCategory
)
=>
category
.
types
.
indexOf
(
props
.
selectedBrowserTab
)
>
-
1
)
);
},
[
props
.
selectedBrowserTab
]);
const
changeDrawerView
=
useCallback
(
(
currentTrack
:
string
)
=>
{
const
{
drawerView
,
toggleDrawer
,
updateDrawerView
}
=
props
;
...
...
@@ -61,7 +82,7 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
<
section
>
<
dl
>
{
getTrackListItem
(
trackPanelConfig
.
main
)
}
</
dl
>
</
section
>
{
track
PanelConfig
.
c
ategories
.
map
((
category
:
TrackPanelCategory
)
=>
(
{
track
C
ategories
.
map
((
category
:
TrackPanelCategory
)
=>
(
<
section
key
=
{
category
.
name
}
>
<
h4
>
{
category
.
name
}
</
h4
>
<
dl
>
...
...
src/ensembl/src/content/app/browser/track-panel/trackPanelConfig.ts
View file @
bcfd2588
...
...
@@ -21,9 +21,16 @@ export type TrackPanelItem = {
selectedInfo
?:
string
;
};
export
enum
TrackType
{
GENOMIC
=
'
Genomic
'
,
VARIATION
=
'
Variation
'
,
EXPRESSION
=
'
Expression
'
}
export
type
TrackPanelCategory
=
{
name
:
string
;
trackList
:
TrackPanelItem
[];
types
:
TrackType
[];
};
export
type
TrackPanelIcon
=
{
...
...
@@ -76,7 +83,8 @@ export const trackPanelConfig: TrackPanelConfig = {
label
:
'
Other genes
'
,
name
:
'
gene-other-rev
'
}
]
],
types
:
[
TrackType
.
GENOMIC
]
},
{
name
:
'
Assembly
'
,
...
...
@@ -91,19 +99,59 @@ export const trackPanelConfig: TrackPanelConfig = {
label
:
'
%GC
'
,
name
:
'
gc
'
}
]
],
types
:
[
TrackType
.
GENOMIC
]
},
{
name
:
'
Comparative genomics
'
,
trackList
:
[]
trackList
:
[],
types
:
[
TrackType
.
GENOMIC
]
},
{
name
:
'
Short variants
'
,
trackList
:
[
{
id
:
201
,
label
:
'
1000 Genomes all SNPs & indels
'
,
name
:
'
snps-and-indels
'
}
],
types
:
[
TrackType
.
VARIATION
]
},
{
name
:
'
Somatic variants
'
,
trackList
:
[],
types
:
[
TrackType
.
VARIATION
]
},
{
name
:
'
Structural variants
'
,
trackList
:
[],
types
:
[
TrackType
.
VARIATION
]
},
{
name
:
'
Experiment design
'
,
trackList
:
[]
trackList
:
[],
types
:
[
TrackType
.
EXPRESSION
,
TrackType
.
GENOMIC
,
TrackType
.
VARIATION
]
},
{
name
:
'
References & evidence
'
,
trackList
:
[]
trackList
:
[],
types
:
[
TrackType
.
GENOMIC
]
},
{
name
:
'
Regulatory features
'
,
trackList
:
[],
types
:
[
TrackType
.
EXPRESSION
]
},
{
name
:
'
Gene expression correlations
'
,
trackList
:
[],
types
:
[
TrackType
.
EXPRESSION
]
},
{
name
:
'
Other regulatory regions
'
,
trackList
:
[],
types
:
[
TrackType
.
EXPRESSION
]
}
],
main
:
{
...
...
src/ensembl/static/img/browser/navigator-grey.svg
0 → 100644
View file @
bcfd2588
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version=
"1.1"
id=
"Layer_1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
x=
"0px"
y=
"0px"
viewBox=
"0 0 28 28"
style=
"enable-background:new 0 0 28 28;"
xml:space=
"preserve"
>
<style
type=
"text/css"
>
.st0{fill:#B7C0C8;}
</style>
<path
class=
"st0"
d=
"M13.2,24.5c-6.2-9-7.3-9.9-7.3-13.2c0-4.5,3.7-8.2,8.2-8.2s8.2,3.7,8.2,8.2c0,3.3-1.1,4.2-7.3,13.2
C14.4,25,13.6,25,13.2,24.5L13.2,24.5z M14,14.7c1.9,0,3.4-1.5,3.4-3.4S15.9,7.9,14,7.9s-3.4,1.5-3.4,3.4S12.1,14.7,14,14.7z"
/>
</svg>
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