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
deb0b3dc
Unverified
Commit
deb0b3dc
authored
Aug 06, 2021
by
Jyothish
Committed by
GitHub
Aug 06, 2021
Browse files
new track panel config (#543)
parent
050d4f3f
Pipeline
#182426
passed with stages
in 6 minutes and 17 seconds
Changes
5
Pipelines
2
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
82 additions
and
128 deletions
+82
-128
src/ensembl/src/content/app/browser/browser-cog/BrowserCog.test.tsx
...l/src/content/app/browser/browser-cog/BrowserCog.test.tsx
+2
-2
src/ensembl/src/content/app/browser/browser-cog/BrowserCog.tsx
...nsembl/src/content/app/browser/browser-cog/BrowserCog.tsx
+11
-14
src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.scss
.../app/browser/browser-track-config/BrowserTrackConfig.scss
+11
-37
src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.test.tsx
.../browser/browser-track-config/BrowserTrackConfig.test.tsx
+8
-5
src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.tsx
...t/app/browser/browser-track-config/BrowserTrackConfig.tsx
+50
-70
No files found.
src/ensembl/src/content/app/browser/browser-cog/BrowserCog.test.tsx
View file @
deb0b3dc
...
...
@@ -44,9 +44,9 @@ describe('<BrowserCog />', () => {
});
describe
(
'
behaviour
'
,
()
=>
{
test
(
'
toggles cog on click
'
,
()
=>
{
test
(
'
renders close button when track config is open
'
,
()
=>
{
const
{
container
}
=
render
(<
BrowserCog
{
...
defaultProps
}
/>);
const
cogButton
=
container
.
querySelector
(
'
b
utton
'
);
const
cogButton
=
container
.
querySelector
(
'
.closeB
utton
'
);
userEvent
.
click
(
cogButton
as
HTMLButtonElement
);
expect
(
defaultProps
.
updateSelectedCog
).
toHaveBeenCalledTimes
(
1
);
});
...
...
src/ensembl/src/content/app/browser/browser-cog/BrowserCog.tsx
View file @
deb0b3dc
...
...
@@ -20,12 +20,11 @@ import { useTransition, animated } from 'react-spring';
import
analyticsTracking
from
'
src/services/analytics-service
'
;
import
BrowserTrackConfig
from
'
../browser-track-config/BrowserTrackConfig
'
;
import
ImageButton
from
'
src/shared/components/image-button/ImageButton
'
;
import
CloseButton
from
'
ensemblRoot/src/shared/components/close-button/CloseButton
'
;
import
ImageButton
from
'
ensemblRoot/src/shared/components/image-button/ImageButton
'
;
import
{
ReactComponent
as
cogIcon
}
from
'
static/img/shared/cog.svg
'
;
import
{
Status
}
from
'
src/shared/types/status
'
;
export
type
BrowserCogProps
=
{
cogActivated
:
boolean
;
trackId
:
string
;
...
...
@@ -69,11 +68,6 @@ const BrowserCog = (props: BrowserCogProps) => {
icon
:
cogIcon
};
const
getCogIconStatus
=
()
=>
{
const
{
cogActivated
}
=
props
;
return
cogActivated
?
Status
.
SELECTED
:
Status
.
UNSELECTED
;
};
const
[
showTrackConfig
,
setTrackConfigAnimation
]
=
useState
(
cogActivated
);
useEffect
(()
=>
{
if
(
cogActivated
)
{
...
...
@@ -93,12 +87,15 @@ const BrowserCog = (props: BrowserCogProps) => {
return
(
<>
<
div
style
=
{
imgInline
}
>
<
ImageButton
status
=
{
getCogIconStatus
()
}
description
=
{
cogIconConfig
.
description
}
onClick
=
{
toggleCog
}
image
=
{
cogIconConfig
.
icon
}
/>
{
cogActivated
?
(
<
CloseButton
onClick
=
{
toggleCog
}
/>
)
:
(
<
ImageButton
description
=
{
cogIconConfig
.
description
}
onClick
=
{
toggleCog
}
image
=
{
cogIconConfig
.
icon
}
/>
)
}
</
div
>
{
transition
((
style
,
item
)
=>
{
return
(
...
...
src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.scss
View file @
deb0b3dc
...
...
@@ -2,37 +2,33 @@
.trackConfig
{
display
:
grid
;
grid-template-columns
:
14
6
px
343
px
1fr
;
grid-template-columns
:
14
0
px
250
px
1fr
;
background
:
#f1f2f4
;
box-shadow
:
1px
1px
10px
#6f8190
;
position
:
absolute
;
left
:
-614
px
;
right
:
25
px
;
top
:
-12px
;
height
:
45px
;
width
:
614px
;
.section
{
display
:
flex
;
align-items
:
center
;
margin
:
8px
0px
;
padding
:
0px
18px
;
.subLabel
{
line-height
:
30px
;
font-size
:
12px
;
font-weight
:
300
;
padding-right
:
4px
;
}
&
:not
(
:last-child
)
{
border-right
:
1px
solid
$grey
;
}
&
:first-child
{
justify-content
:
center
;
}
&
:last-child
{
justify-content
:
space-between
;
padding-right
:
34px
;
}
}
.toggleWrapper
{
margin
:
0
6px
;
line-height
:
30px
;
svg
{
margin
:
0
10px
;
...
...
@@ -46,31 +42,9 @@
/* button styling */
.slideToggle
{
height
:
1
2
px
;
height
:
1
0
px
;
margin-left
:
2px
;
display
:
inline-block
;
vertical-align
:
middle
;
}
.trackHeightIcon
{
margin-left
:
auto
;
height
:
12px
;
width
:
50px
;
}
.trackHighlightIcon
,
.trackConfigIcon
,
.trackLockIcon
{
height
:
18px
;
width
:
18px
;
}
.trackMoveIcon
{
height
:
28px
;
width
:
14px
;
}
}
.checkboxHolder
{
width
:
100%
;
}
src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.test.tsx
View file @
deb0b3dc
...
...
@@ -47,13 +47,16 @@ describe('<BrowserTrackConfig />', () => {
};
describe
(
'
behaviour
'
,
()
=>
{
it
(
'
sets all tracks to be updated when the all tracks checkbox is selected
'
,
()
=>
{
it
(
'
can update all tracks
'
,
()
=>
{
const
{
container
}
=
render
(<
BrowserTrackConfig
{
...
defaultProps
}
/>);
const
checkbox
=
container
.
querySelector
(
'
input[type="checkbox"]
'
)
as
HTMLInputElement
;
const
allTracksLabel
=
[...
container
.
querySelectorAll
(
'
label
'
)].
find
(
(
el
)
=>
el
.
textContent
===
'
All tracks
'
);
const
allTracksInputElement
=
allTracksLabel
?.
querySelector
(
'
input
'
)
as
HTMLElement
;
userEvent
.
click
(
checkbox
);
userEvent
.
click
(
allTracksInputElement
);
expect
(
defaultProps
.
updateApplyToAll
).
toHaveBeenCalledTimes
(
1
);
});
...
...
src/ensembl/src/content/app/browser/browser-track-config/BrowserTrackConfig.tsx
View file @
deb0b3dc
...
...
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import
React
,
{
useCallback
,
useRef
}
from
'
react
'
;
import
React
,
{
useCallback
}
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
...
...
@@ -33,17 +33,14 @@ import {
import
analyticsTracking
from
'
src/services/analytics-service
'
;
import
useOutsideClick
from
'
src/shared/hooks/useOutsideClick
'
;
import
SlideToggle
from
'
src/shared/components/slide-toggle/SlideToggle
'
;
import
ImageButton
from
'
src/shared/components/image-button/ImageButton
'
;
import
Checkbox
from
'
src/shared/components/checkbox/Checkbox
'
;
import
{
browserTrackConfig
}
from
'
../browserConfig
'
;
import
RadioGroup
,
{
OptionValue
,
RadioOptions
}
from
'
ensemblRoot/src/shared/components/radio-group/RadioGroup
'
;
import
{
RootState
}
from
'
src/store
'
;
import
{
CogList
}
from
'
../browserState
'
;
import
{
Status
}
from
'
src/shared/types/status
'
;
import
styles
from
'
./BrowserTrackConfig.scss
'
;
...
...
@@ -73,9 +70,6 @@ export const BrowserTrackConfig = (props: BrowserTrackConfigProps) => {
const
shouldShowTrackLabels
=
selectedCog
in
trackConfigLabel
?
trackConfigLabel
[
selectedCog
]
:
true
;
const
ref
=
useRef
(
null
);
useOutsideClick
(
ref
,
props
.
onClose
);
const
toggleName
=
useCallback
(()
=>
{
if
(
applyToAll
)
{
Object
.
keys
(
browserCogTrackList
).
forEach
((
name
)
=>
{
...
...
@@ -120,72 +114,58 @@ export const BrowserTrackConfig = (props: BrowserTrackConfigProps) => {
browserCogTrackList
]);
const
applyToAllToggle
=
useCallback
(()
=>
{
props
.
updateApplyToAll
(
!
applyToAll
);
const
handleRadioChange
=
useCallback
(
(
value
:
OptionValue
)
=>
{
props
.
updateApplyToAll
(
value
===
'
all_tracks
'
);
analyticsTracking
.
trackEvent
({
category
:
'
track_settings
'
,
label
:
selectedCog
,
action
:
'
apply_to_all -
'
+
(
applyToAll
?
'
unselected
'
:
'
selected
'
)
});
},
[
applyToAll
,
updateApplyToAll
]);
analyticsTracking
.
trackEvent
({
category
:
'
track_settings
'
,
label
:
selectedCog
,
action
:
'
apply_to_all -
'
+
(
applyToAll
?
'
unselected
'
:
'
selected
'
)
});
},
[
applyToAll
,
updateApplyToAll
]
);
const
radioOptions
:
RadioOptions
=
[
{
value
:
'
this_track
'
,
label
:
'
This track
'
},
{
value
:
'
all_tracks
'
,
label
:
'
All tracks
'
}
];
return
(
<
div
className
=
{
styles
.
trackConfig
}
ref
=
{
ref
}
>
<
div
className
=
{
styles
.
trackConfig
}
>
<
div
className
=
{
styles
.
section
}
>
<
Checkbox
label
=
"All tracks"
checked
=
{
applyToAll
}
onChange
=
{
applyToAllToggle
}
classNames
=
{
{
checkboxHolder
:
styles
.
checkboxHolder
}
}
<
RadioGroup
options
=
{
radioOptions
}
onChange
=
{
handleRadioChange
}
selectedOption
=
{
applyToAll
?
'
all_tracks
'
:
'
this_track
'
}
/>
</
div
>
<
div
className
=
{
styles
.
section
}
>
<
div
className
=
{
styles
.
toggleWrapper
}
>
<
label
>
Track name
</
label
>
<
SlideToggle
isOn
=
{
shouldShowTrackName
}
onChange
=
{
toggleName
}
className
=
{
styles
.
slideToggle
}
/>
</
div
>
<
div
className
=
{
styles
.
toggleWrapper
}
>
<
label
>
Feature labels
</
label
>
<
SlideToggle
isOn
=
{
shouldShowTrackLabels
}
onChange
=
{
toggleLabel
}
className
=
{
styles
.
slideToggle
}
/>
</
div
>
<
div
className
=
{
styles
.
trackHeightIcon
}
>
<
ImageButton
status
=
{
Status
.
DISABLED
}
image
=
{
browserTrackConfig
.
trackHeightIcon
.
icon
}
description
=
{
browserTrackConfig
.
trackHeightIcon
.
description
}
/>
</
div
>
</
div
>
<
div
className
=
{
styles
.
section
}
>
<
div
className
=
{
styles
.
trackLockIcon
}
>
<
ImageButton
status
=
{
Status
.
DISABLED
}
image
=
{
browserTrackConfig
.
trackLockIcon
.
icon
}
description
=
{
browserTrackConfig
.
trackLockIcon
.
description
}
/>
</
div
>
<
div
className
=
{
styles
.
trackHighlightIcon
}
>
<
ImageButton
status
=
{
Status
.
DISABLED
}
image
=
{
browserTrackConfig
.
trackHighlightIcon
.
icon
}
description
=
{
browserTrackConfig
.
trackHighlightIcon
.
description
}
/>
</
div
>
<
div
className
=
{
styles
.
trackMoveIcon
}
>
<
ImageButton
status
=
{
Status
.
DISABLED
}
image
=
{
browserTrackConfig
.
trackMoveIcon
.
icon
}
description
=
{
browserTrackConfig
.
trackMoveIcon
.
description
}
/>
<
div
className
=
{
styles
.
subLabel
}
>
Show
</
div
>
<
div
>
<
div
className
=
{
styles
.
toggleWrapper
}
>
<
label
>
Track name
</
label
>
<
SlideToggle
isOn
=
{
shouldShowTrackName
}
onChange
=
{
toggleName
}
className
=
{
styles
.
slideToggle
}
/>
</
div
>
<
div
className
=
{
styles
.
toggleWrapper
}
>
<
label
>
Feature labels
</
label
>
<
SlideToggle
isOn
=
{
shouldShowTrackLabels
}
onChange
=
{
toggleLabel
}
className
=
{
styles
.
slideToggle
}
/>
</
div
>
</
div
>
</
div
>
</
div
>
...
...
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