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
52724644
Commit
52724644
authored
Feb 19, 2019
by
Imran Salam
Browse files
use react ref instead of query selector and implement track toggling
parent
8753727f
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
54 additions
and
27 deletions
+54
-27
src/ensembl/src/content/app/browser/Browser.tsx
src/ensembl/src/content/app/browser/Browser.tsx
+7
-5
src/ensembl/src/content/app/browser/browser-image/BrowserImage.tsx
...bl/src/content/app/browser/browser-image/BrowserImage.tsx
+9
-8
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
...nsembl/src/content/app/browser/track-panel/TrackPanel.tsx
+5
-2
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
...p/browser/track-panel/track-panel-list/TrackPanelList.tsx
+7
-3
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
+25
-8
No files found.
src/ensembl/src/content/app/browser/Browser.tsx
View file @
52724644
import
React
,
{
FunctionComponent
,
useCallback
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
useCallback
,
useRef
}
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
import
BrowserBar
from
'
./browser-bar/BrowserBar
'
;
...
...
@@ -37,6 +37,8 @@ type BrowserProps = StateProps & DispatchProps & OwnProps;
export
const
Browser
:
FunctionComponent
<
BrowserProps
>
=
(
props
:
BrowserProps
)
=>
{
const
browserRef
:
React
.
RefObject
<
HTMLDivElement
>
=
useRef
(
null
);
const
closeTrack
=
useCallback
(()
=>
{
if
(
props
.
drawerOpened
===
false
)
{
return
;
...
...
@@ -47,7 +49,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
return
(
<
section
className
=
{
styles
.
browser
}
>
<
BrowserBar
/>
<
BrowserBar
browserRef
=
{
browserRef
}
/>
<
div
className
=
{
styles
.
browserInnerWrapper
}
>
<
div
className
=
{
`
${
styles
.
browserImageWrapper
}
${
...
...
@@ -55,10 +57,10 @@ export const Browser: FunctionComponent<BrowserProps> = (
}
`
}
onClick
=
{
closeTrack
}
>
{
props
.
browserNavOpened
&&
<
BrowserNavBar
/>
}
<
BrowserImage
/>
{
props
.
browserNavOpened
&&
<
BrowserNavBar
browserRef
=
{
browserRef
}
/>
}
<
BrowserImage
browserRef
=
{
browserRef
}
/>
</
div
>
<
TrackPanel
/>
<
TrackPanel
browserRef
=
{
browserRef
}
/>
{
props
.
drawerOpened
&&
<
Drawer
/>
}
</
div
>
</
section
>
...
...
src/ensembl/src/content/app/browser/browser-image/BrowserImage.tsx
View file @
52724644
import
React
,
{
FunctionComponent
,
useEffect
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
RefObject
,
useEffect
}
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
import
styles
from
'
./BrowserImage.scss
'
;
import
{
updateBrowserNavStates
,
updateChrLocation
}
from
'
../browserActions
'
;
import
{
BrowserNavStates
,
ChrLocation
}
from
'
../browserState
'
;
import
{
getBrowserNavOpened
}
from
'
../browserSelectors
'
;
import
{
RootState
}
from
'
src/rootReducer
'
;
import
styles
from
'
./BrowserImage.scss
'
;
type
StateProps
=
{
browserNavOpened
:
boolean
;
};
...
...
@@ -16,7 +17,9 @@ type DispatchProps = {
updateChrLocation
:
(
chrLocation
:
ChrLocation
)
=>
void
;
};
type
OwnProps
=
{};
type
OwnProps
=
{
browserRef
:
RefObject
<
HTMLDivElement
>
;
};
type
BrowserImageProps
=
StateProps
&
DispatchProps
&
OwnProps
;
...
...
@@ -30,8 +33,6 @@ type BpaneOutEvent = Event & {
export
const
BrowserImage
:
FunctionComponent
<
BrowserImageProps
>
=
(
props
:
BrowserImageProps
)
=>
{
const
browserCanvas
:
React
.
RefObject
<
HTMLDivElement
>
=
React
.
createRef
();
const
listenBpaneOut
=
(
event
:
Event
)
=>
{
const
bpaneOutEvent
=
event
as
BpaneOutEvent
;
const
navIconStates
=
bpaneOutEvent
.
detail
.
bumper
as
BrowserNavStates
;
...
...
@@ -49,8 +50,8 @@ export const BrowserImage: FunctionComponent<BrowserImageProps> = (
useEffect
(()
=>
{
let
currentEl
:
HTMLDivElement
|
null
=
null
;
if
(
browser
Canvas
)
{
currentEl
=
browser
Canvas
.
current
as
HTMLDivElement
;
if
(
props
.
browser
Ref
)
{
currentEl
=
props
.
browser
Ref
.
current
as
HTMLDivElement
;
activateIfPossible
(
currentEl
as
HTMLDivElement
);
...
...
@@ -67,7 +68,7 @@ export const BrowserImage: FunctionComponent<BrowserImageProps> = (
return
(
<
div
className
=
{
getBrowserImageClasses
(
props
.
browserNavOpened
)
}
ref
=
{
browser
Canvas
}
ref
=
{
props
.
browser
Ref
}
/>
);
};
...
...
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
View file @
52724644
import
React
,
{
FunctionComponent
,
useEffect
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
RefObject
,
useEffect
}
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
import
TrackPanelBar
from
'
./track-panel-bar/TrackPanelBar
'
;
...
...
@@ -38,7 +38,9 @@ type DispatchProps = {
toggleTrackPanel
:
(
trackPanelOpened
?:
boolean
)
=>
void
;
};
type
OwnProps
=
{};
type
OwnProps
=
{
browserRef
:
RefObject
<
HTMLDivElement
>
;
};
type
TrackPanelProps
=
StateProps
&
DispatchProps
&
OwnProps
;
...
...
@@ -64,6 +66,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
/>
{
props
.
trackPanelOpened
?
(
<
TrackPanelList
browserRef
=
{
props
.
browserRef
}
currentTrack
=
{
props
.
currentTrack
}
launchbarExpanded
=
{
props
.
launchbarExpanded
}
toggleDrawer
=
{
props
.
toggleDrawer
}
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
View file @
52724644
import
React
,
{
FunctionComponent
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
RefObject
}
from
'
react
'
;
import
TrackPanelListItem
from
'
./TrackPanelListItem
'
;
import
{
...
...
@@ -10,6 +10,7 @@ import {
import
styles
from
'
./TrackPanelList.scss
'
;
type
TrackPanelListProps
=
{
browserRef
:
RefObject
<
HTMLDivElement
>
;
currentTrack
:
string
;
launchbarExpanded
:
boolean
;
toggleDrawer
:
(
drawerOpened
:
boolean
)
=>
void
;
...
...
@@ -19,6 +20,8 @@ type TrackPanelListProps = {
const
TrackPanelList
:
FunctionComponent
<
TrackPanelListProps
>
=
(
props
:
TrackPanelListProps
)
=>
{
const
browserImageEl
=
props
.
browserRef
.
current
as
HTMLDivElement
;
const
changeTrack
=
(
currentTrack
:
string
)
=>
{
const
{
toggleDrawer
,
updateTrack
}
=
props
;
...
...
@@ -48,10 +51,11 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
const
getTrackListItem
=
(
track
:
TrackPanelItem
)
=>
(
<
TrackPanelListItem
key
=
{
track
.
id
}
browserImageEl
=
{
browserImageEl
}
className
=
{
getTrackClass
(
track
.
name
)
}
track
=
{
track
}
changeTrack
=
{
changeTrack
}
key
=
{
track
.
id
}
track
=
{
track
}
>
{
track
.
childTrackList
&&
track
.
childTrackList
.
map
((
childTrack
:
TrackPanelItem
)
=>
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.scss
View file @
52724644
...
...
@@ -29,7 +29,7 @@
background
:
lighten
(
$ens-blue
,
40%
);
}
&
.
gene
{
&
.
main
{
font-weight
:
$bold
;
}
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx
View file @
52724644
...
...
@@ -7,6 +7,7 @@ import chevronUpIcon from 'static/img/shared/chevron-up.svg';
import
styles
from
'
./TrackPanelListItem.scss
'
;
type
TrackPanelListItemProps
=
{
browserImageEl
:
HTMLDivElement
|
null
;
children
?:
ReactNode
[];
className
:
string
;
track
:
TrackPanelItem
;
...
...
@@ -17,8 +18,10 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
props
:
TrackPanelListItemProps
)
=>
{
const
[
expanded
,
setExpanded
]
=
useState
(
false
);
const
[
trackStatus
,
setTrackStatus
]
=
useState
(
'
on
'
);
const
{
className
,
track
}
=
props
;
const
{
browserImageEl
,
className
,
track
}
=
props
;
const
{
ellipsis
,
eye
}
=
trackPanelIconConfig
;
const
listItemClass
=
styles
[
className
]
||
''
;
const
changeTrackHandler
=
()
=>
{
...
...
@@ -29,6 +32,23 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
setExpanded
(
!
expanded
);
};
const
toggleTrack
=
()
=>
{
const
currentTrackStatus
=
trackStatus
===
'
on
'
?
'
off
'
:
'
on
'
;
const
navEvent
=
new
CustomEvent
(
'
bpane
'
,
{
bubbles
:
true
,
detail
:
{
[
currentTrackStatus
]:
track
.
name
}
});
if
(
browserImageEl
)
{
browserImageEl
.
dispatchEvent
(
navEvent
);
}
setTrackStatus
(
currentTrackStatus
);
};
return
(
<
Fragment
>
<
dd
className
=
{
`
${
styles
.
listItem
}
${
listItemClass
}
`
}
>
...
...
@@ -55,15 +75,12 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
)
}
</
label
>
<
button
onClick
=
{
changeTrackHandler
}
>
<
img
src
=
{
trackPanelIconConfig
.
ellipsis
.
icon
.
on
}
alt
=
{
`Go to
${
track
.
label
}
`
}
/>
<
img
src
=
{
ellipsis
.
icon
.
on
}
alt
=
{
`Go to
${
track
.
label
}
`
}
/>
</
button
>
<
button
>
<
button
onClick
=
{
toggleTrack
}
>
<
img
src
=
{
track
PanelI
con
C
on
fig
.
eye
.
icon
.
o
n
}
alt
=
{
trackPanelIconConfig
.
ellipsis
.
description
}
src
=
{
track
Status
===
'
on
'
?
eye
.
i
con
.
on
:
eye
.
icon
.
o
ff
}
alt
=
{
eye
.
description
}
/>
</
button
>
</
dd
>
...
...
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