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
6c8afba1
Commit
6c8afba1
authored
Feb 28, 2019
by
Imran Salam
Browse files
add track panel modal view
parent
f91b7d0d
Changes
13
Hide whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
290 additions
and
25 deletions
+290
-25
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss
...sembl/src/content/app/browser/browser-bar/BrowserBar.scss
+1
-1
src/ensembl/src/content/app/browser/track-panel/TrackPanel.scss
...sembl/src/content/app/browser/track-panel/TrackPanel.scss
+1
-1
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
...nsembl/src/content/app/browser/track-panel/TrackPanel.tsx
+34
-9
src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx
...app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx
+12
-3
src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBarIcon.tsx
...browser/track-panel/track-panel-bar/TrackPanelBarIcon.tsx
+35
-11
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/TrackPanelModal.scss
...rowser/track-panel/track-panel-modal/TrackPanelModal.scss
+50
-0
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/TrackPanelModal.tsx
...browser/track-panel/track-panel-modal/TrackPanelModal.tsx
+63
-0
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/PersonalData.tsx
...rack-panel/track-panel-modal/modal-views/PersonalData.tsx
+13
-0
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelBookmarks.tsx
...nel/track-panel-modal/modal-views/TrackPanelBookmarks.tsx
+29
-0
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelDownloads.tsx
...nel/track-panel-modal/modal-views/TrackPanelDownloads.tsx
+13
-0
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelSearch.tsx
...-panel/track-panel-modal/modal-views/TrackPanelSearch.tsx
+13
-0
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelShare.tsx
...k-panel/track-panel-modal/modal-views/TrackPanelShare.tsx
+13
-0
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TracksManager.tsx
...ack-panel/track-panel-modal/modal-views/TracksManager.tsx
+13
-0
No files found.
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss
View file @
6c8afba1
...
...
@@ -6,7 +6,7 @@
box-shadow
:
0
2px
3px
$ens-grey
;
padding
:
7px
0
3px
0
;
position
:
relative
;
z-index
:
1
;
z-index
:
200
;
dd
{
display
:
inline-block
;
...
...
src/ensembl/src/content/app/browser/track-panel/TrackPanel.scss
View file @
6c8afba1
...
...
@@ -2,5 +2,5 @@
.trackPanel
{
@include
flex
;
border-left
:
1px
solid
$ens-medium-grey
;
position
:
relative
;
}
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
View file @
6c8afba1
...
...
@@ -14,14 +14,18 @@ import { RootState } from 'src/rootReducer';
import
{
toggleDrawer
,
toggleTrackPanel
,
changeCurrentTrack
changeCurrentTrack
,
closeTrackPanelModal
,
openTrackPanelModal
}
from
'
../browserActions
'
;
import
{
getCurrentTrack
,
getDrawerOpened
,
getTrackPanelOpened
,
getBrowserActivated
getBrowserActivated
,
getTrackPanelModalOpened
,
getTrackPanelModalView
}
from
'
../browserSelectors
'
;
import
{
getLaunchbarExpanded
}
from
'
src/header/headerSelectors
'
;
...
...
@@ -29,6 +33,7 @@ import { getBreakpointWidth } from 'src/globalSelectors';
import
{
BreakpointWidth
}
from
'
src/globalConfig
'
;
import
styles
from
'
./TrackPanel.scss
'
;
import
TrackPanelModal
from
'
./track-panel-modal/TrackPanelModal
'
;
type
StateProps
=
{
browserActivated
:
boolean
;
...
...
@@ -36,11 +41,15 @@ type StateProps = {
drawerOpened
:
boolean
;
breakpointWidth
:
BreakpointWidth
;
launchbarExpanded
:
boolean
;
trackPanelModalOpened
:
boolean
;
trackPanelModalView
:
string
;
trackPanelOpened
:
boolean
;
};
type
DispatchProps
=
{
changeCurrentTrack
:
(
currentTrack
:
string
)
=>
void
;
closeTrackPanelModal
:
()
=>
void
;
openTrackPanelModal
:
(
trackPanelModalView
:
string
)
=>
void
;
toggleDrawer
:
(
drawerOpened
:
boolean
)
=>
void
;
toggleTrackPanel
:
(
trackPanelOpened
?:
boolean
)
=>
void
;
};
...
...
@@ -67,20 +76,32 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
{
props
.
browserActivated
&&
(
<
Fragment
>
<
TrackPanelBar
closeTrackPanelModal
=
{
props
.
closeTrackPanelModal
}
drawerOpened
=
{
props
.
drawerOpened
}
launchbarExpanded
=
{
props
.
launchbarExpanded
}
openTrackPanelModal
=
{
props
.
openTrackPanelModal
}
toggleDrawer
=
{
props
.
toggleDrawer
}
toggleTrackPanel
=
{
props
.
toggleTrackPanel
}
trackPanelModalView
=
{
props
.
trackPanelModalView
}
trackPanelOpened
=
{
props
.
trackPanelOpened
}
/>
{
props
.
trackPanelOpened
?
(
<
TrackPanelList
browserRef
=
{
props
.
browserRef
}
currentTrack
=
{
props
.
currentTrack
}
launchbarExpanded
=
{
props
.
launchbarExpanded
}
toggleDrawer
=
{
props
.
toggleDrawer
}
updateTrack
=
{
props
.
changeCurrentTrack
}
/>
<
Fragment
>
<
TrackPanelList
browserRef
=
{
props
.
browserRef
}
currentTrack
=
{
props
.
currentTrack
}
launchbarExpanded
=
{
props
.
launchbarExpanded
}
toggleDrawer
=
{
props
.
toggleDrawer
}
updateTrack
=
{
props
.
changeCurrentTrack
}
/>
{
props
.
trackPanelModalOpened
?
(
<
TrackPanelModal
closeTrackPanelModal
=
{
props
.
closeTrackPanelModal
}
launchbarExpanded
=
{
props
.
launchbarExpanded
}
trackPanelModalView
=
{
props
.
trackPanelModalView
}
/>
)
:
null
}
</
Fragment
>
)
:
null
}
</
Fragment
>
)
}
...
...
@@ -94,11 +115,15 @@ const mapStateToProps = (state: RootState): StateProps => ({
currentTrack
:
getCurrentTrack
(
state
),
drawerOpened
:
getDrawerOpened
(
state
),
launchbarExpanded
:
getLaunchbarExpanded
(
state
),
trackPanelModalOpened
:
getTrackPanelModalOpened
(
state
),
trackPanelModalView
:
getTrackPanelModalView
(
state
),
trackPanelOpened
:
getTrackPanelOpened
(
state
)
});
const
mapDispatchToProps
:
DispatchProps
=
{
changeCurrentTrack
,
closeTrackPanelModal
,
openTrackPanelModal
,
toggleDrawer
,
toggleTrackPanel
};
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx
View file @
6c8afba1
...
...
@@ -10,11 +10,14 @@ import chevronRightIcon from 'static/img/shared/chevron-right.svg';
import
styles
from
'
./TrackPanelBar.scss
'
;
type
TrackPanelBarProps
=
{
toggleDrawer
:
(
drawerOpened
:
boolean
)
=>
void
;
closeTrackPanelModal
:
(
)
=>
void
;
drawerOpened
:
boolean
;
launchbarExpanded
:
boolean
;
trackPanelOpened
:
boolean
;
openTrackPanelModal
:
(
trackPanelModalView
:
string
)
=>
void
;
toggleDrawer
:
(
drawerOpened
:
boolean
)
=>
void
;
toggleTrackPanel
:
(
trackPanelOpened
?:
boolean
)
=>
void
;
trackPanelModalView
:
string
;
trackPanelOpened
:
boolean
;
};
const
TrackPanelBar
:
FunctionComponent
<
TrackPanelBarProps
>
=
(
...
...
@@ -49,7 +52,13 @@ const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
</
button
>
</
dt
>
{
trackPanelBarConfig
.
map
((
item
:
TrackPanelBarItem
)
=>
(
<
TrackPanelBarIcon
key
=
{
item
.
name
}
iconConfig
=
{
item
}
/>
<
TrackPanelBarIcon
key
=
{
item
.
name
}
iconConfig
=
{
item
}
closeTrackPanelModal
=
{
props
.
closeTrackPanelModal
}
openTrackPanelModal
=
{
props
.
openTrackPanelModal
}
trackPanelModalView
=
{
props
.
trackPanelModalView
}
/>
))
}
</
dl
>
</
div
>
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBarIcon.tsx
View file @
6c8afba1
import
React
,
{
FunctionComponent
,
memo
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
memo
,
useState
,
useCallback
}
from
'
react
'
;
import
{
TrackPanelBarItem
}
from
'
./trackPanelBarConfig
'
;
import
styles
from
'
./TrackPanelBarIcon.scss
'
;
type
TrackPanelBarIconProps
=
{
closeTrackPanelModal
:
()
=>
void
;
iconConfig
:
TrackPanelBarItem
;
openTrackPanelModal
:
(
trackPanelModalView
:
string
)
=>
void
;
trackPanelModalView
:
string
;
};
const
TrackPanelBarIcon
:
FunctionComponent
<
TrackPanelBarIconProps
>
=
memo
(
(
props
:
TrackPanelBarIconProps
)
=>
(
<
dt
className
=
{
styles
.
barIcon
}
>
<
button
>
<
img
src
=
{
props
.
iconConfig
.
icon
.
default
}
alt
=
{
props
.
iconConfig
.
description
}
/>
</
button
>
</
dt
>
)
(
props
:
TrackPanelBarIconProps
)
=>
{
const
[
toggleState
,
setToggleState
]
=
useState
(
false
);
const
toggleModalView
=
useCallback
(()
=>
{
const
newToggleState
:
boolean
=
!
toggleState
;
if
(
newToggleState
===
true
)
{
props
.
openTrackPanelModal
(
props
.
iconConfig
.
name
);
}
else
{
props
.
closeTrackPanelModal
();
}
setToggleState
(
newToggleState
);
},
[
props
.
iconConfig
.
name
,
toggleState
]);
const
getViewIcon
=
()
=>
{
const
{
iconConfig
,
trackPanelModalView
}
=
props
;
return
iconConfig
.
name
===
trackPanelModalView
?
iconConfig
.
icon
.
selected
:
iconConfig
.
icon
.
default
;
};
return
(
<
dt
className
=
{
styles
.
barIcon
}
>
<
button
onClick
=
{
toggleModalView
}
>
<
img
src
=
{
getViewIcon
()
}
alt
=
{
props
.
iconConfig
.
description
}
/>
</
button
>
</
dt
>
);
}
);
export
default
TrackPanelBarIcon
;
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/TrackPanelModal.scss
0 → 100644
View file @
6c8afba1
@import
'src/styles/common'
;
.trackPanelModal
{
background
:
$ens-white
;
font-weight
:
$light
;
left
:
36px
;
padding
:
10px
20px
;
position
:
absolute
;
width
:
320px
;
z-index
:
100
;
&
.shorter
{
height
:
calc
(
100vh
-
177px
);
}
&
.taller
{
height
:
calc
(
100vh
-
129px
);
}
h3
{
font-size
:
14px
;
}
p
{
margin-bottom
:
30px
;
}
}
.closeButton
{
position
:
absolute
;
right
:
20px
;
top
:
10px
;
img
{
height
:
15px
;
width
:
15px
;
}
}
.previouslyViewed
{
margin-top
:
60px
;
dt
{
font-size
:
12px
;
}
dd
{
margin
:
15px
0
0
15px
;
}
}
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/TrackPanelModal.tsx
0 → 100644
View file @
6c8afba1
import
React
,
{
FunctionComponent
}
from
'
react
'
;
import
closeIcon
from
'
static/img/track-panel/close.svg
'
;
import
TrackPanelSearch
from
'
./modal-views/TrackPanelSearch
'
;
import
TracksManager
from
'
./modal-views/TracksManager
'
;
import
TrackPanelBookmarks
from
'
./modal-views/TrackPanelBookmarks
'
;
import
PersonalData
from
'
./modal-views/PersonalData
'
;
import
TrackPanelShare
from
'
./modal-views/TrackPanelShare
'
;
import
TrackPanelDownloads
from
'
./modal-views/TrackPanelDownloads
'
;
import
styles
from
'
./TrackPanelModal.scss
'
;
type
TrackPanelModalProps
=
{
closeTrackPanelModal
:
()
=>
void
;
launchbarExpanded
:
boolean
;
trackPanelModalView
:
string
;
};
const
TrackPanelModal
:
FunctionComponent
<
TrackPanelModalProps
>
=
(
props
:
TrackPanelModalProps
)
=>
{
const
getTrackPanelModalClasses
=
()
=>
{
const
heightClass
:
string
=
props
.
launchbarExpanded
?
styles
.
shorter
:
styles
.
taller
;
return
`
${
styles
.
trackPanelModal
}
${
heightClass
}
`
;
};
const
getModalView
=
()
=>
{
switch
(
props
.
trackPanelModalView
)
{
case
'
search
'
:
return
<
TrackPanelSearch
/>;
case
'
tracks-manager
'
:
return
<
TracksManager
/>;
case
'
bookmarks
'
:
return
<
TrackPanelBookmarks
/>;
case
'
personal-data
'
:
return
<
PersonalData
/>;
case
'
share
'
:
return
<
TrackPanelShare
/>;
case
'
downloads
'
:
return
<
TrackPanelDownloads
/>;
default
:
return
null
;
}
};
return
(
<
section
className
=
{
getTrackPanelModalClasses
()
}
>
<
button
onClick
=
{
props
.
closeTrackPanelModal
}
className
=
{
styles
.
closeButton
}
>
<
img
src
=
{
closeIcon
}
alt
=
"Close track panel modal"
/>
</
button
>
<
div
className
=
{
styles
.
trackPanelModalView
}
>
{
getModalView
()
}
</
div
>
</
section
>
);
};
export
default
TrackPanelModal
;
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/PersonalData.tsx
0 → 100644
View file @
6c8afba1
import
React
,
{
FunctionComponent
}
from
'
react
'
;
const
PersonalData
:
FunctionComponent
=
()
=>
{
return
(
<
section
className
=
"personaData"
>
<
h3
>
Personal Data
</
h3
>
<
p
>
Upload your own data to be displayed in the browser
</
p
>
<
p
>
Not ready yet
…
</
p
>
</
section
>
);
};
export
default
PersonalData
;
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelBookmarks.tsx
0 → 100644
View file @
6c8afba1
import
React
,
{
FunctionComponent
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
styles
from
'
../TrackPanelModal.scss
'
;
const
TrackPanelBookmarks
:
FunctionComponent
=
()
=>
{
return
(
<
section
className
=
"trackPanelBookmarks"
>
<
h3
>
Bookmarks
</
h3
>
<
p
>
Save multiple browser configurations
</
p
>
<
p
>
Not ready yet
…
</
p
>
<
dl
className
=
{
styles
.
previouslyViewed
}
>
<
dt
>
Previously viewed
</
dt
>
<
dd
>
<
Link
to
=
"/app/browser/human/BRCA2/13:32315474-32400266"
>
Human gene BRCA2
</
Link
>
</
dd
>
<
dd
>
<
Link
to
=
"/app/browser/human/TTN/2:178525989-178830802"
>
Human transcript TTN
</
Link
>
</
dd
>
</
dl
>
</
section
>
);
};
export
default
TrackPanelBookmarks
;
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelDownloads.tsx
0 → 100644
View file @
6c8afba1
import
React
,
{
FunctionComponent
}
from
'
react
'
;
const
TrackPanelDownloads
:
FunctionComponent
=
()
=>
{
return
(
<
section
className
=
"trackPanelDownloads"
>
<
h3
>
Downloads
</
h3
>
<
p
>
Export your browser configurations as images or data
</
p
>
<
p
>
Not ready yet
…
</
p
>
</
section
>
);
};
export
default
TrackPanelDownloads
;
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelSearch.tsx
0 → 100644
View file @
6c8afba1
import
React
,
{
FunctionComponent
}
from
'
react
'
;
const
TrackPanelSearch
:
FunctionComponent
=
()
=>
{
return
(
<
section
className
=
"trackPanelSearch"
>
<
h3
>
Search
</
h3
>
<
p
>
Quickly find the tracks you want to show or hide in the browser
</
p
>
<
p
>
Not ready yet
…
</
p
>
</
section
>
);
};
export
default
TrackPanelSearch
;
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelShare.tsx
0 → 100644
View file @
6c8afba1
import
React
,
{
FunctionComponent
}
from
'
react
'
;
const
TrackPanelShare
:
FunctionComponent
=
()
=>
{
return
(
<
section
className
=
"trackPanelShare"
>
<
h3
>
Share
</
h3
>
<
p
>
Share your browser configurations or your own data views
</
p
>
<
p
>
Not ready yet
…
</
p
>
</
section
>
);
};
export
default
TrackPanelShare
;
src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TracksManager.tsx
0 → 100644
View file @
6c8afba1
import
React
,
{
FunctionComponent
}
from
'
react
'
;
const
TracksManager
:
FunctionComponent
=
()
=>
{
return
(
<
section
className
=
"tracksManager"
>
<
h3
>
Tracks Manager
</
h3
>
<
p
>
Save multiple browser configurations
</
p
>
<
p
>
Not ready yet
…
</
p
>
</
section
>
);
};
export
default
TracksManager
;
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