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
739afb09
Commit
739afb09
authored
Mar 04, 2019
by
Imran Salam
Browse files
add BrowserTabs and hide browser bar info when genome selector is on focus
parent
c1ad3f69
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
150 additions
and
86 deletions
+150
-86
src/ensembl/src/content/app/browser/Browser.scss
src/ensembl/src/content/app/browser/Browser.scss
+11
-2
src/ensembl/src/content/app/browser/Browser.tsx
src/ensembl/src/content/app/browser/Browser.tsx
+8
-2
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss
...sembl/src/content/app/browser/browser-bar/BrowserBar.scss
+0
-33
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx
...nsembl/src/content/app/browser/browser-bar/BrowserBar.tsx
+50
-45
src/ensembl/src/content/app/browser/browser-genome-selector/BrowserGenomeSelector.tsx
...browser/browser-genome-selector/BrowserGenomeSelector.tsx
+5
-4
src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.scss
...mbl/src/content/app/browser/browser-tabs/BrowserTabs.scss
+37
-0
src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.tsx
...embl/src/content/app/browser/browser-tabs/BrowserTabs.tsx
+25
-0
src/ensembl/src/content/app/browser/browserActions.ts
src/ensembl/src/content/app/browser/browserActions.ts
+7
-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
+3
-0
src/ensembl/src/content/app/browser/browserState.ts
src/ensembl/src/content/app/browser/browserState.ts
+2
-0
No files found.
src/ensembl/src/content/app/browser/Browser.scss
View file @
739afb09
...
...
@@ -11,11 +11,11 @@
.browserImageWrapper
{
&
.semiExpanded
{
width
:
calc
(
100vw
-
35
7
px
);
width
:
calc
(
100vw
-
35
6
px
);
}
&
.expanded
{
width
:
calc
(
100vw
-
3
7
px
);
width
:
calc
(
100vw
-
3
6
px
);
}
&
.collapsed
{
...
...
@@ -26,3 +26,12 @@
}
}
}
.browserOverlay
{
background
:
$ens-white
;
height
:
100%
;
opacity
:
0
.7
;
position
:
absolute
;
width
:
100vw
;
z-index
:
150
;
}
src/ensembl/src/content/app/browser/Browser.tsx
View file @
739afb09
...
...
@@ -30,7 +30,8 @@ import {
getBrowserOpenState
,
getDrawerOpened
,
getBrowserNavOpened
,
getChrLocation
getChrLocation
,
getGenomeSelectorActive
}
from
'
./browserSelectors
'
;
import
styles
from
'
./Browser.scss
'
;
...
...
@@ -43,6 +44,7 @@ type StateProps = {
browserOpenState
:
BrowserOpenState
;
chrLocation
:
ChrLocation
;
drawerOpened
:
boolean
;
genomeSelectorActive
:
boolean
;
};
type
DispatchProps
=
{
...
...
@@ -124,6 +126,9 @@ export const Browser: FunctionComponent<BrowserProps> = (
return
(
<
section
className
=
{
styles
.
browser
}
>
<
BrowserBar
changeBrowserLocation
=
{
changeBrowserLocation
}
/>
{
props
.
genomeSelectorActive
?
(
<
div
className
=
{
styles
.
browserOverlay
}
/>
)
:
null
}
<
div
className
=
{
styles
.
browserInnerWrapper
}
>
<
div
className
=
{
`
${
styles
.
browserImageWrapper
}
${
...
...
@@ -151,7 +156,8 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserNavOpened
:
getBrowserNavOpened
(
state
),
browserOpenState
:
getBrowserOpenState
(
state
),
chrLocation
:
getChrLocation
(
state
),
drawerOpened
:
getDrawerOpened
(
state
)
drawerOpened
:
getDrawerOpened
(
state
),
genomeSelectorActive
:
getGenomeSelectorActive
(
state
)
});
const
mapDispatchToProps
:
DispatchProps
=
{
...
...
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss
View file @
739afb09
...
...
@@ -79,36 +79,3 @@
}
}
}
.browserTabs
{
@include
flex
;
font-size
:
13px
;
justify-content
:
space-between
;
margin-left
:
44px
;
padding-right
:
5px
;
width
:
312px
;
button
{
color
:
$ens-blue
;
&
.active
{
color
:
inherit
;
position
:
relative
;
&
::after
{
border
:
6px
solid
$ens-grey
;
border-color
:
transparent
transparent
$ens-light-grey
$ens-light-grey
;
box-shadow
:
-2px
2px
2px
0
$ens-grey
;
box-sizing
:
border-box
;
content
:
''
;
height
:
0
;
position
:
absolute
;
right
:
calc
(
60%
-
6px
);
transform-origin
:
0
0
;
transform
:
rotate
(
-45deg
);
top
:
21px
;
width
:
0
;
}
}
}
}
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx
View file @
739afb09
import
React
,
{
FunctionComponent
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
Fragment
}
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
browserInfoConfig
}
from
'
../browserConfig
'
;
import
{
toggleBrowserNav
,
updateDefaultChrLocation
,
updateChrLocation
updateChrLocation
,
toggleGenomeSelector
}
from
'
../browserActions
'
;
import
{
ChrLocation
}
from
'
../browserState
'
;
import
{
getBrowserNavOpened
,
getChrLocation
,
getBrowserActivated
,
getDefaultChrLocation
getDefaultChrLocation
,
getGenomeSelectorActive
}
from
'
../browserSelectors
'
;
import
{
RootState
}
from
'
src/rootReducer
'
;
import
BrowserReset
from
'
../browser-reset/BrowserReset
'
;
import
BrowserGenomeSelector
from
'
../browser-genome-selector/BrowserGenomeSelector
'
;
import
BrowserTabs
from
'
../browser-tabs/BrowserTabs
'
;
import
styles
from
'
./BrowserBar.scss
'
;
...
...
@@ -26,10 +29,12 @@ type StateProps = {
browserNavOpened
:
boolean
;
chrLocation
:
ChrLocation
;
defaultChrLocation
:
ChrLocation
;
genomeSelectorActive
:
boolean
;
};
type
DispatchProps
=
{
toggleBrowserNav
:
()
=>
void
;
toggleGenomeSelector
:
(
genomeSelectorActive
:
boolean
)
=>
void
;
updateChrLocation
:
(
chrLocation
:
ChrLocation
)
=>
void
;
updateDefaultChrLocation
:
(
chrLocation
:
ChrLocation
)
=>
void
;
};
...
...
@@ -56,57 +61,55 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
defaultChrLocation
=
{
props
.
defaultChrLocation
}
updateChrLocation
=
{
props
.
updateChrLocation
}
/>
<
dd
className
=
{
styles
.
geneSymbol
}
>
<
label
>
Gene
</
label
>
<
span
className
=
{
styles
.
value
}
>
BRAC2
</
span
>
</
dd
>
<
dd
>
<
label
>
Stable ID
</
label
>
<
span
className
=
{
styles
.
value
}
>
ENSG00000139618
</
span
>
</
dd
>
<
dd
className
=
"show-for-large"
>
<
label
>
Spliced mRNA length
</
label
>
<
span
className
=
{
styles
.
value
}
>
84,793
</
span
>
<
label
>
bp
</
label
>
</
dd
>
<
dd
className
=
"show-for-large"
>
protein coding
</
dd
>
<
dd
className
=
"show-for-large"
>
forward strand
</
dd
>
{
props
.
genomeSelectorActive
?
null
:
(
<
Fragment
>
<
dd
className
=
{
styles
.
geneSymbol
}
>
<
label
>
Gene
</
label
>
<
span
className
=
{
styles
.
value
}
>
BRAC2
</
span
>
</
dd
>
<
dd
>
<
label
>
Stable ID
</
label
>
<
span
className
=
{
styles
.
value
}
>
ENSG00000139618
</
span
>
</
dd
>
<
dd
className
=
"show-for-large"
>
<
label
>
Spliced mRNA length
</
label
>
<
span
className
=
{
styles
.
value
}
>
84,793
</
span
>
<
label
>
bp
</
label
>
</
dd
>
<
dd
className
=
"show-for-large"
>
protein coding
</
dd
>
<
dd
className
=
"show-for-large"
>
forward strand
</
dd
>
</
Fragment
>
)
}
</
dl
>
<
dl
className
=
{
styles
.
browserInfoRight
}
>
<
BrowserGenomeSelector
browserActivated
=
{
props
.
browserActivated
}
changeBrowserLocation
=
{
props
.
changeBrowserLocation
}
defaultChrLocation
=
{
props
.
defaultChrLocation
}
genomeSelectorActive
=
{
props
.
genomeSelectorActive
}
toggleGenomeSelector
=
{
props
.
toggleGenomeSelector
}
updateDefaultChrLocation
=
{
props
.
updateDefaultChrLocation
}
/>
<
dd
className
=
{
styles
.
navigator
}
>
<
button
title
=
{
navigator
.
description
}
onClick
=
{
props
.
toggleBrowserNav
}
>
<
img
src
=
{
props
.
browserNavOpened
?
navigator
.
icon
.
selected
:
navigator
.
icon
.
default
}
alt
=
{
navigator
.
description
}
/>
</
button
>
</
dd
>
{
props
.
genomeSelectorActive
?
null
:
(
<
dd
className
=
{
styles
.
navigator
}
>
<
button
title
=
{
navigator
.
description
}
onClick
=
{
props
.
toggleBrowserNav
}
>
<
img
src
=
{
props
.
browserNavOpened
?
navigator
.
icon
.
selected
:
navigator
.
icon
.
default
}
alt
=
{
navigator
.
description
}
/>
</
button
>
</
dd
>
)
}
</
dl
>
</
div
>
<
dl
className
=
{
`
${
styles
.
browserTabs
}
show-for-large`
}
>
<
dd
>
<
button
className
=
{
styles
.
active
}
>
Genomic
</
button
>
</
dd
>
<
dd
>
<
button
>
Variation
</
button
>
</
dd
>
<
dd
>
<
button
>
Expression
</
button
>
</
dd
>
</
dl
>
<
BrowserTabs
/>
</
div
>
);
};
...
...
@@ -115,11 +118,13 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserActivated
:
getBrowserActivated
(
state
),
browserNavOpened
:
getBrowserNavOpened
(
state
),
chrLocation
:
getChrLocation
(
state
),
defaultChrLocation
:
getDefaultChrLocation
(
state
)
defaultChrLocation
:
getDefaultChrLocation
(
state
),
genomeSelectorActive
:
getGenomeSelectorActive
(
state
)
});
const
mapDispatchToProps
:
DispatchProps
=
{
toggleBrowserNav
,
toggleGenomeSelector
,
updateChrLocation
,
updateDefaultChrLocation
};
...
...
src/ensembl/src/content/app/browser/browser-genome-selector/BrowserGenomeSelector.tsx
View file @
739afb09
...
...
@@ -18,6 +18,8 @@ type BrowserGenomeSelectorProps = {
browserActivated
:
boolean
;
changeBrowserLocation
:
()
=>
void
;
defaultChrLocation
:
ChrLocation
;
genomeSelectorActive
:
boolean
;
toggleGenomeSelector
:
(
genomeSelectorActive
:
boolean
)
=>
void
;
updateDefaultChrLocation
:
(
chrLocation
:
ChrLocation
)
=>
void
;
};
...
...
@@ -25,7 +27,6 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
props
:
BrowserGenomeSelectorProps
)
=>
{
const
chrLocationStr
=
getChrLocationStr
(
props
.
defaultChrLocation
);
const
[
showInputs
,
setShowInputs
]
=
useState
(
false
);
const
[
chrLocationPlaceholder
,
setChrLocationPlaceholder
]
=
useState
(
''
);
const
[
chrLocationInput
,
setChrLocationInput
]
=
useState
(
''
);
...
...
@@ -38,7 +39,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
const
activateForm
=
()
=>
{
setChrLocationPlaceholder
(
chrLocationStr
);
setShowInputs
(
true
);
props
.
toggleGenomeSelector
(
true
);
};
const
changeChrLocationInput
=
(
event
:
ChangeEvent
<
HTMLInputElement
>
)
=>
...
...
@@ -46,7 +47,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
const
closeForm
=
()
=>
{
setChrLocationInput
(
''
);
setShowInputs
(
false
);
props
.
toggleGenomeSelector
(
false
);
};
const
handleSubmit
=
(
event
:
FormEvent
<
HTMLFormElement
>
)
=>
{
...
...
@@ -73,7 +74,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
return
props
.
browserActivated
?
(
<
dd
className
=
{
styles
.
browserGenomeSelector
}
>
{
showInputs
?
(
{
props
.
genomeSelectorActive
?
(
<
form
onSubmit
=
{
handleSubmit
}
>
<
input
type
=
"text"
...
...
src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.scss
0 → 100644
View file @
739afb09
@import
'src/styles/common'
;
.browserTabs
{
@include
flex
;
font-size
:
13px
;
justify-content
:
space-between
;
margin-left
:
44px
;
padding-right
:
5px
;
width
:
312px
;
}
.browserTab
{
color
:
$ens-blue
;
}
.browserTabActive
{
color
:
inherit
;
}
.browserTabArrow
{
position
:
relative
;
&
::after
{
border
:
6px
solid
$ens-grey
;
border-color
:
transparent
transparent
$ens-light-grey
$ens-light-grey
;
box-shadow
:
-2px
2px
2px
0
$ens-grey
;
box-sizing
:
border-box
;
content
:
''
;
height
:
0
;
position
:
absolute
;
right
:
calc
(
60%
-
6px
);
transform-origin
:
0
0
;
transform
:
rotate
(
-45deg
);
top
:
21px
;
width
:
0
;
}
}
src/ensembl/src/content/app/browser/browser-tabs/BrowserTabs.tsx
0 → 100644
View file @
739afb09
import
React
,
{
FunctionComponent
}
from
'
react
'
;
import
styles
from
'
./BrowserTabs.scss
'
;
type
BrowserTabsProps
=
{};
const
BrowserTabs
:
FunctionComponent
<
BrowserTabsProps
>
=
(
props
:
BrowserTabsProps
)
=>
{
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
>
</
dl
>
);
};
export
default
BrowserTabs
;
src/ensembl/src/content/app/browser/browserActions.ts
View file @
739afb09
...
...
@@ -61,3 +61,10 @@ export const openTrackPanelModal = createAction(
export
const
closeTrackPanelModal
=
createAction
(
'
browser/close-track-panel-modal
'
);
export
const
toggleGenomeSelector
=
createAction
(
'
toggle-genome-selector
'
,
(
resolve
)
=>
{
return
(
genomeSelectorActive
:
boolean
)
=>
resolve
(
genomeSelectorActive
);
}
);
src/ensembl/src/content/app/browser/browserReducer.ts
View file @
739afb09
...
...
@@ -48,6 +48,8 @@ export default (
trackPanelModalOpened
:
false
,
trackPanelModalView
:
''
};
case
getType
(
browser
.
toggleGenomeSelector
):
return
{
...
state
,
genomeSelectorActive
:
action
.
payload
};
default
:
return
state
;
}
...
...
src/ensembl/src/content/app/browser/browserSelectors.ts
View file @
739afb09
...
...
@@ -37,3 +37,6 @@ export const getTrackPanelModalOpened = (state: RootState): boolean =>
export
const
getTrackPanelModalView
=
(
state
:
RootState
):
string
=>
state
.
browser
.
trackPanelModalView
;
export
const
getGenomeSelectorActive
=
(
state
:
RootState
):
boolean
=>
state
.
browser
.
genomeSelectorActive
;
src/ensembl/src/content/app/browser/browserState.ts
View file @
739afb09
...
...
@@ -25,6 +25,7 @@ export type BrowserState = Readonly<{
defaultChrLocation
:
ChrLocation
;
drawerOpened
:
boolean
;
drawerView
:
string
;
genomeSelectorActive
:
boolean
;
trackPanelModalOpened
:
boolean
;
trackPanelModalView
:
string
;
trackPanelOpened
:
boolean
;
...
...
@@ -39,6 +40,7 @@ export const defaultState: BrowserState = {
defaultChrLocation
:
[
'
13
'
,
0
,
0
],
drawerOpened
:
false
,
drawerView
:
''
,
genomeSelectorActive
:
false
,
trackPanelModalOpened
:
false
,
trackPanelModalView
:
''
,
trackPanelOpened
:
true
...
...
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