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
6c62eda6
Commit
6c62eda6
authored
Mar 07, 2019
by
Imran Salam
Browse files
use API data to display browser bar and track panel info
parent
26ba957e
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
281 additions
and
75 deletions
+281
-75
src/ensembl/src/content/app/browser/Browser.tsx
src/ensembl/src/content/app/browser/Browser.tsx
+18
-2
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx
...nsembl/src/content/app/browser/browser-bar/BrowserBar.tsx
+12
-6
src/ensembl/src/content/app/browser/browserActions.ts
src/ensembl/src/content/app/browser/browserActions.ts
+28
-9
src/ensembl/src/content/app/browser/browserReducer.ts
src/ensembl/src/content/app/browser/browserReducer.ts
+50
-16
src/ensembl/src/content/app/browser/browserSelectors.ts
src/ensembl/src/content/app/browser/browserSelectors.ts
+15
-0
src/ensembl/src/content/app/browser/browserState.ts
src/ensembl/src/content/app/browser/browserState.ts
+20
-6
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
...nsembl/src/content/app/browser/track-panel/TrackPanel.tsx
+9
-1
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
...p/browser/track-panel/track-panel-list/TrackPanelList.tsx
+43
-11
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx
...owser/track-panel/track-panel-list/TrackPanelListItem.tsx
+18
-5
src/ensembl/src/content/app/browser/track-panel/trackPanelConfig.ts
...l/src/content/app/browser/track-panel/trackPanelConfig.ts
+1
-1
src/ensembl/src/content/home/Home.tsx
src/ensembl/src/content/home/Home.tsx
+67
-18
No files found.
src/ensembl/src/content/app/browser/Browser.tsx
View file @
6c62eda6
...
...
@@ -21,6 +21,7 @@ import {
}
from
'
./browserState
'
;
import
{
changeBrowserLocation
,
fetchObjectData
,
toggleDrawer
,
updateChrLocation
,
updateBrowserNavStates
,
...
...
@@ -31,7 +32,8 @@ import {
getDrawerOpened
,
getBrowserNavOpened
,
getChrLocation
,
getGenomeSelectorActive
getGenomeSelectorActive
,
getExampleObjects
}
from
'
./browserSelectors
'
;
import
styles
from
'
./Browser.scss
'
;
...
...
@@ -44,6 +46,7 @@ type StateProps = {
browserOpenState
:
BrowserOpenState
;
chrLocation
:
ChrLocation
;
drawerOpened
:
boolean
;
exampleObjects
:
{};
genomeSelectorActive
:
boolean
;
};
...
...
@@ -52,6 +55,7 @@ type DispatchProps = {
chrLocation
:
ChrLocation
,
browserEl
:
HTMLDivElement
)
=>
void
;
fetchObjectData
:
(
objSymbol
:
string
)
=>
void
;
toggleDrawer
:
(
drawerOpened
:
boolean
)
=>
void
;
updateBrowserActivated
:
(
browserActivated
:
boolean
)
=>
void
;
updateBrowserNavStates
:
(
browserNavStates
:
BrowserNavStates
)
=>
void
;
...
...
@@ -83,10 +87,20 @@ export const Browser: FunctionComponent<BrowserProps> = (
};
useEffect
(()
=>
{
const
{
location
}
=
props
.
match
.
params
;
const
{
location
,
objSymbol
}
=
props
.
match
.
params
;
const
chrLocation
=
getChrLocationFromStr
(
location
);
dispatchBrowserLocation
(
chrLocation
);
let
objectStableId
=
''
;
Object
.
values
(
props
.
exampleObjects
).
forEach
((
exampleObject
:
any
)
=>
{
if
(
exampleObject
.
display_name
===
objSymbol
)
{
objectStableId
=
exampleObject
.
stable_id
;
}
});
props
.
fetchObjectData
(
objectStableId
);
},
[]);
useEffect
(()
=>
{
...
...
@@ -142,11 +156,13 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserOpenState
:
getBrowserOpenState
(
state
),
chrLocation
:
getChrLocation
(
state
),
drawerOpened
:
getDrawerOpened
(
state
),
exampleObjects
:
getExampleObjects
(
state
),
genomeSelectorActive
:
getGenomeSelectorActive
(
state
)
});
const
mapDispatchToProps
:
DispatchProps
=
{
changeBrowserLocation
,
fetchObjectData
,
toggleDrawer
,
updateBrowserActivated
,
updateBrowserNavStates
,
...
...
src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx
View file @
6c62eda6
...
...
@@ -18,7 +18,8 @@ import {
getDefaultChrLocation
,
getGenomeSelectorActive
,
getDrawerOpened
,
getSelectedBrowserTab
getSelectedBrowserTab
,
getObjectInfo
}
from
'
../browserSelectors
'
;
import
{
RootState
}
from
'
src/rootReducer
'
;
...
...
@@ -35,6 +36,7 @@ type StateProps = {
defaultChrLocation
:
ChrLocation
;
drawerOpened
:
boolean
;
genomeSelectorActive
:
boolean
;
objectInfo
:
any
;
selectedBrowserTab
:
TrackType
;
};
...
...
@@ -55,6 +57,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
props
:
BrowserBarProps
)
=>
{
const
{
navigator
,
reset
}
=
browserInfoConfig
;
const
{
objectInfo
}
=
props
;
const
getBrowserInfoClasses
=
()
=>
{
let
classNames
=
styles
.
browserInfo
;
...
...
@@ -99,22 +102,24 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
<
Fragment
>
<
dd
className
=
{
styles
.
geneSymbol
}
>
<
label
>
Gene
</
label
>
<
span
className
=
{
styles
.
value
}
>
BRAC2
</
span
>
<
span
className
=
{
styles
.
value
}
>
{
objectInfo
.
obj_symbol
}
</
span
>
</
dd
>
<
dd
>
<
label
>
Stable ID
</
label
>
<
span
className
=
{
styles
.
value
}
>
ENSG00000139618
</
span
>
<
span
className
=
{
styles
.
value
}
>
{
objectInfo
.
stable_id
}
</
span
>
</
dd
>
<
dd
className
=
"show-for-large"
>
<
label
>
Spliced mRNA length
</
label
>
<
span
className
=
{
styles
.
value
}
>
84,793
</
span
>
<
span
className
=
{
styles
.
value
}
>
{
objectInfo
.
spliced_length
}
</
span
>
<
label
>
bp
</
label
>
</
dd
>
<
dd
className
=
{
`show-for-large
${
styles
.
nonLabelValue
}
`
}
>
protein coding
{
objectInfo
.
bio_type
}
</
dd
>
<
dd
className
=
{
`show-for-large
${
styles
.
nonLabelValue
}
`
}
>
forward
strand
{
objectInfo
.
strand
}
strand
</
dd
>
</
Fragment
>
)
}
...
...
@@ -155,6 +160,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
defaultChrLocation
:
getDefaultChrLocation
(
state
),
drawerOpened
:
getDrawerOpened
(
state
),
genomeSelectorActive
:
getGenomeSelectorActive
(
state
),
objectInfo
:
getObjectInfo
(
state
),
selectedBrowserTab
:
getSelectedBrowserTab
(
state
)
});
...
...
src/ensembl/src/content/app/browser/browserActions.ts
View file @
6c62eda6
...
...
@@ -82,24 +82,43 @@ export const changeBrowserLocation = (
};
};
export
const
fetchObject
Info
=
createAsyncAction
(
'
FETCH_OBJECT_
INFO_
REQUEST
'
,
'
FETCH_OBJECT_
INFO_
SUCCESS
'
,
'
FETCH_OBJECT_
INFO_
FAILURE
'
export
const
fetchObject
=
createAsyncAction
(
'
FETCH_OBJECT_REQUEST
'
,
'
FETCH_OBJECT_SUCCESS
'
,
'
FETCH_OBJECT_FAILURE
'
)
<
string
,
{},
Error
>
();
export
function
getObjectInfo
(
objectId
:
string
)
{
export
const
fetchObjectData
=
(
objectId
:
string
)
=>
{
return
(
dispatch
:
Dispatch
)
=>
{
dispatch
(
fetchObject
Info
.
request
(
objectId
));
dispatch
(
fetchObject
.
request
(
objectId
));
return
fetch
(
`http://127.0.0.1:4000/browser/get_object_info/
${
objectId
}
`
)
.
then
(
(
response
)
=>
response
.
json
(),
(
error
)
=>
console
.
log
(
'
An error occurred.
'
,
error
)
(
error
)
=>
dispatch
(
fetchObject
.
failure
(
error
)
)
)
.
then
((
json
)
=>
dispatch
(
fetchObject
Info
.
success
(
json
)));
.
then
((
json
)
=>
dispatch
(
fetchObject
.
success
(
json
)));
};
}
};
export
const
fetchExampleObjects
=
createAsyncAction
(
'
FETCH_EXAMPLE_OBJECTS_REQUEST
'
,
'
FETCH_EXAMPLE_OBJECTS_SUCCESS
'
,
'
FETCH_EXAMPLE_OBJECTS_FAILURE
'
)
<
null
,
{},
Error
>
();
export
const
fetchExampleObjectsData
=
()
=>
{
return
(
dispatch
:
Dispatch
)
=>
{
dispatch
(
fetchExampleObjects
.
request
(
null
));
return
fetch
(
'
http://127.0.0.1:4000/browser/example_objects
'
)
.
then
(
(
response
)
=>
response
.
json
(),
(
error
)
=>
dispatch
(
fetchExampleObjects
.
failure
(
error
))
)
.
then
((
json
)
=>
dispatch
(
fetchExampleObjects
.
success
(
json
)));
};
};
export
const
openTrackPanelModal
=
createAction
(
'
browser/open-track-panel-modal
'
,
...
...
src/ensembl/src/content/app/browser/browserReducer.ts
View file @
6c62eda6
...
...
@@ -7,8 +7,10 @@ import {
defaultBrowserState
,
trackPanelState
,
drawerState
,
ObjectInfoState
,
defaultObjectInfoState
ExampleObjects
,
defaultExampleObjects
,
ObjectState
,
defaultObjectState
}
from
'
./browserState
'
;
function
browserInfo
(
...
...
@@ -60,31 +62,62 @@ function browserInfo(
}
}
function
o
bject
Info
(
state
:
ObjectInfoState
=
defaultObjectInfoState
,
function
exampleO
bject
s
(
state
:
ExampleObjects
=
defaultExampleObjects
,
action
:
ActionType
<
typeof
browserActions
>
):
ObjectInfoState
{
):
ExampleObjects
{
switch
(
action
.
type
)
{
case
getType
(
browserActions
.
fetchObject
Info
.
failure
):
return
{
...
state
,
browserInfo
FetchFailed
:
true
};
case
getType
(
browserActions
.
fetchObject
Info
.
request
):
case
getType
(
browserActions
.
fetch
Example
Object
s
.
failure
):
return
{
...
state
,
exampleObjects
FetchFailed
:
true
};
case
getType
(
browserActions
.
fetch
Example
Object
s
.
request
):
return
{
...
state
,
browserInfo
FetchFailed
:
false
,
browserInfo
Fetching
:
true
exampleObjects
FetchFailed
:
false
,
exampleObjects
Fetching
:
true
};
case
getType
(
browserActions
.
fetchObjectInfo
.
success
):
type
BrowserInfo
=
{
case
getType
(
browserActions
.
fetchExampleObjects
.
success
):
type
Payload
=
{
examples
:
{};
};
const
json
=
action
.
payload
as
Payload
;
return
{
...
state
,
exampleObjectsFetchFailed
:
false
,
exampleObjectsFetching
:
false
,
examples
:
json
.
examples
};
default
:
return
state
;
}
}
function
object
(
state
:
ObjectState
=
defaultObjectState
,
action
:
ActionType
<
typeof
browserActions
>
):
ObjectState
{
switch
(
action
.
type
)
{
case
getType
(
browserActions
.
fetchObject
.
failure
):
return
{
...
state
,
objectFetchFailed
:
true
};
case
getType
(
browserActions
.
fetchObject
.
request
):
return
{
...
state
,
objectFetchFailed
:
false
,
objectFetching
:
true
};
case
getType
(
browserActions
.
fetchObject
.
success
):
type
Payload
=
{
object_info
:
{};
track_categories
:
[];
};
const
json
=
action
.
payload
as
BrowserInfo
;
const
json
=
action
.
payload
as
Payload
;
return
{
...
state
,
browserInfo
FetchFailed
:
false
,
browserInfo
Fetching
:
false
,
object
FetchFailed
:
false
,
object
Fetching
:
false
,
objectInfo
:
json
.
object_info
,
trackCategories
:
json
.
track_categories
};
...
...
@@ -95,5 +128,6 @@ function objectInfo(
export
default
combineReducers
({
browserInfo
,
objectInfo
exampleObjects
,
object
});
src/ensembl/src/content/app/browser/browserSelectors.ts
View file @
6c62eda6
...
...
@@ -44,3 +44,18 @@ export const getGenomeSelectorActive = (state: RootState): boolean =>
export
const
getSelectedBrowserTab
=
(
state
:
RootState
):
TrackType
=>
state
.
browser
.
browserInfo
.
selectedBrowserTab
;
export
const
getObjectFetchFailed
=
(
state
:
RootState
)
=>
state
.
browser
.
object
.
objectFetchFailed
;
export
const
getObjectFetching
=
(
state
:
RootState
)
=>
state
.
browser
.
object
.
objectFetching
;
export
const
getObjectInfo
=
(
state
:
RootState
)
=>
state
.
browser
.
object
.
objectInfo
;
export
const
getTrackCategories
=
(
state
:
RootState
):
[]
=>
state
.
browser
.
object
.
trackCategories
;
export
const
getExampleObjects
=
(
state
:
RootState
)
=>
state
.
browser
.
exampleObjects
.
examples
;
src/ensembl/src/content/app/browser/browserState.ts
View file @
6c62eda6
...
...
@@ -50,16 +50,30 @@ export const defaultBrowserState: BrowserState = {
trackPanelOpened
:
true
};
export
type
ObjectInfoState
=
Readonly
<
{
browserInfoFetchFailed
:
boolean
;
browserInfoFetching
:
boolean
;
export
type
ExampleObjects
=
Readonly
<
{
exampleObjectsFetchFailed
:
boolean
;
exampleObjectsFetching
:
boolean
;
examples
:
{
[
key
:
string
]:
{};
};
}
>
;
export
const
defaultExampleObjects
:
ExampleObjects
=
{
exampleObjectsFetchFailed
:
false
,
exampleObjectsFetching
:
false
,
examples
:
{}
};
export
type
ObjectState
=
Readonly
<
{
objectFetchFailed
:
boolean
;
objectFetching
:
boolean
;
objectInfo
:
object
;
trackCategories
:
[];
}
>
;
export
const
defaultObject
Info
State
:
Object
Info
State
=
{
browserInfo
FetchFailed
:
false
,
browserInfo
Fetching
:
false
,
export
const
defaultObjectState
:
ObjectState
=
{
object
FetchFailed
:
false
,
object
Fetching
:
false
,
objectInfo
:
{},
trackCategories
:
[]
};
...
...
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
View file @
6c62eda6
...
...
@@ -27,7 +27,9 @@ import {
getBrowserActivated
,
getTrackPanelModalOpened
,
getTrackPanelModalView
,
getSelectedBrowserTab
getSelectedBrowserTab
,
getTrackCategories
,
getObjectInfo
}
from
'
../browserSelectors
'
;
import
{
getLaunchbarExpanded
}
from
'
src/header/headerSelectors
'
;
...
...
@@ -43,7 +45,9 @@ type StateProps = {
drawerView
:
string
;
breakpointWidth
:
BreakpointWidth
;
launchbarExpanded
:
boolean
;
objectInfo
:
any
;
selectedBrowserTab
:
TrackType
;
trackCategories
:
[];
trackPanelModalOpened
:
boolean
;
trackPanelModalView
:
string
;
trackPanelOpened
:
boolean
;
...
...
@@ -94,8 +98,10 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
browserRef
=
{
props
.
browserRef
}
drawerView
=
{
props
.
drawerView
}
launchbarExpanded
=
{
props
.
launchbarExpanded
}
objectInfo
=
{
props
.
objectInfo
}
selectedBrowserTab
=
{
props
.
selectedBrowserTab
}
toggleDrawer
=
{
props
.
toggleDrawer
}
trackCategories
=
{
props
.
trackCategories
}
updateDrawerView
=
{
props
.
changeDrawerView
}
/>
{
props
.
trackPanelModalOpened
?
(
...
...
@@ -119,7 +125,9 @@ const mapStateToProps = (state: RootState): StateProps => ({
drawerOpened
:
getDrawerOpened
(
state
),
drawerView
:
getDrawerView
(
state
),
launchbarExpanded
:
getLaunchbarExpanded
(
state
),
objectInfo
:
getObjectInfo
(
state
),
selectedBrowserTab
:
getSelectedBrowserTab
(
state
),
trackCategories
:
getTrackCategories
(
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 @
6c62eda6
...
...
@@ -8,6 +8,7 @@ import React, {
import
TrackPanelListItem
from
'
./TrackPanelListItem
'
;
import
{
TrackItemColour
,
TrackPanelCategory
,
TrackPanelItem
,
trackPanelConfig
,
...
...
@@ -20,25 +21,27 @@ type TrackPanelListProps = {
browserRef
:
RefObject
<
HTMLDivElement
>
;
drawerView
:
string
;
launchbarExpanded
:
boolean
;
objectInfo
:
any
;
selectedBrowserTab
:
TrackType
;
toggleDrawer
:
(
drawerOpened
:
boolean
)
=>
void
;
trackCategories
:
[];
updateDrawerView
:
(
drawerView
:
string
)
=>
void
;
};
const
TrackPanelList
:
FunctionComponent
<
TrackPanelListProps
>
=
(
props
:
TrackPanelListProps
)
=>
{
const
[
trackCategories
,
setTrackCategories
]
=
useState
(
trackPanelConfig
.
categories
);
const
[
currentTrackCategories
,
setCurrentTrackCategories
]
=
useState
([]);
useEffect
(()
=>
{
setTrackCategories
(
trackPanelConfig
.
categories
.
filter
(
(
category
:
TrackPanelCategory
)
=>
category
.
types
.
indexOf
(
props
.
selectedBrowserTab
)
>
-
1
)
);
if
(
props
.
trackCategories
.
length
>
0
)
{
setCurrentTrackCategories
(
props
.
trackCategories
.
filter
(
(
category
:
TrackPanelCategory
)
=>
category
.
types
.
indexOf
(
props
.
selectedBrowserTab
)
>
-
1
)
);
}
},
[
props
.
selectedBrowserTab
]);
const
changeDrawerView
=
useCallback
(
...
...
@@ -62,6 +65,35 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
return
`
${
styles
.
trackPanelList
}
${
heightClass
}
`
;
};
const
getMainTracks
=
()
=>
{
const
{
objectInfo
}
=
props
;
let
geneLabel
=
objectInfo
.
obj_symbol
;
let
transcriptLabel
=
objectInfo
.
associated_object
.
stable_id
;
if
(
objectInfo
.
obj_type
===
'
transcript
'
)
{
geneLabel
=
objectInfo
.
associated_object
.
obj_symbol
;
transcriptLabel
=
objectInfo
.
stable_id
;
}
return
{
additionalInfo
:
objectInfo
.
bio_type
,
childTrackList
:
[
{
additionalInfo
:
objectInfo
.
bio_type
,
color
:
'
BLUE
'
,
id
:
0.1
,
label
:
transcriptLabel
,
name
:
'
transcript
'
,
selectedInfo
:
objectInfo
.
associated_object
.
selected_info
}
],
id
:
0
,
label
:
geneLabel
,
name
:
'
gene
'
};
};
const
getTrackListItem
=
(
track
:
TrackPanelItem
)
=>
(
<
TrackPanelListItem
browserRef
=
{
props
.
browserRef
}
...
...
@@ -80,9 +112,9 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
return
(
<
div
className
=
{
getTrackPanelListClasses
()
}
>
<
section
>
<
dl
>
{
getTrackListItem
(
trackPanelConfig
.
main
)
}
</
dl
>
<
dl
>
{
getTrackListItem
(
getMainTracks
()
)
}
</
dl
>
</
section
>
{
t
rackCategories
.
map
((
category
:
TrackPanelCategory
)
=>
(
{
currentT
rackCategories
.
map
((
category
:
TrackPanelCategory
)
=>
(
<
section
key
=
{
category
.
name
}
>
<
h4
>
{
category
.
name
}
</
h4
>
<
dl
>
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx
View file @
6c62eda6
...
...
@@ -6,7 +6,11 @@ import React, {
useState
,
useCallback
}
from
'
react
'
;
import
{
TrackPanelItem
,
trackPanelIconConfig
}
from
'
../trackPanelConfig
'
;
import
{
TrackItemColour
,
TrackPanelItem
,
trackPanelIconConfig
}
from
'
../trackPanelConfig
'
;
import
chevronDownIcon
from
'
static/img/shared/chevron-down.svg
'
;
import
chevronUpIcon
from
'
static/img/shared/chevron-up.svg
'
;
...
...
@@ -27,7 +31,7 @@ const trackPrefix = '';
const
TrackPanelListItem
:
FunctionComponent
<
TrackPanelListItemProps
>
=
(
props
:
TrackPanelListItemProps
)
=>
{
const
[
expanded
,
setExpanded
]
=
useState
(
fals
e
);
const
[
expanded
,
setExpanded
]
=
useState
(
tru
e
);
const
[
trackStatus
,
setTrackStatus
]
=
useState
(
'
on
'
);
const
{
browserRef
,
drawerView
,
track
}
=
props
;
...
...
@@ -47,6 +51,17 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
return
classNames
;
},
[
drawerView
]);
const
getBoxClasses
=
(
colour
:
any
)
=>
{
let
classNames
=
styles
.
box
;
if
(
colour
)
{
const
colourValue
=
TrackItemColour
[
colour
];
classNames
+=
`
${
styles
[
colourValue
]}
`
;
}
return
classNames
;
};
const
changeDrawerViewHandler
=
()
=>
{
props
.
updateDrawerView
(
props
.
track
.
name
);
};
...
...
@@ -76,9 +91,7 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
<
Fragment
>
<
dd
className
=
{
getListItemClasses
()
}
>
<
label
>
{
track
.
color
&&
(
<
span
className
=
{
`
${
styles
.
box
}
${
styles
[
track
.
color
]}
`
}
/>
)
}
{
track
.
color
&&
<
span
className
=
{
getBoxClasses
(
track
.
color
)
}
/>
}
<
span
className
=
{
styles
.
mainText
}
>
{
track
.
label
}
</
span
>
{
track
.
selectedInfo
&&
(
<
span
className
=
{
styles
.
selectedInfo
}
>
{
track
.
selectedInfo
}
</
span
>
...
...
src/ensembl/src/content/app/browser/track-panel/trackPanelConfig.ts
View file @
6c62eda6
...
...
@@ -4,7 +4,7 @@ import eyeOffIcon from 'static/img/track-panel/eye-off.svg';
import
ellipsisOnIcon
from
'
static/img/track-panel/ellipsis-on.svg
'
;
import
ellipsisOffIcon
from
'
static/img/track-panel/ellipsis-off.svg
'
;
enum
TrackItemColour
{
export
enum
TrackItemColour
{
BLUE
=
'
blue
'
,
DARK_GREY
=
'
darkGrey
'
,
GREY
=
'
grey
'
,
...
...
src/ensembl/src/content/home/Home.tsx
View file @
6c62eda6
import
React
,
{
FunctionComponent
}
from
'
react
'
;
import
React
,
{
FunctionComponent
,
useEffect
}
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
connect
}
from
'
react-redux
'
;
import
styles
from
'
./Home.scss
'
;
import
{
fetchExampleObjectsData
}
from
'
../app/browser/browserActions
'
;
import
{
getExampleObjects
}
from
'
../app/browser/browserSelectors
'
;
import
{
RootState
}
from
'
src/rootReducer
'
;
type
HomeProps
=
{};
type
StateProps
=
{
exampleObjects
:
{};
};
type
DispatchProps
=
{
fetchExampleObjectsData
:
()
=>
void
;
};
type
OwnProps
=
{};
type
HomeProps
=
StateProps
&
DispatchProps
&
OwnProps
;
const
Home
:
FunctionComponent
<
HomeProps
>
=
(
props
:
HomeProps
)
=>
{
useEffect
(()
=>
{
props
.
fetchExampleObjectsData
();
},
[]);
const
exampleObjectsTotal
=
Object
.
keys
(
props
.
exampleObjects
).
length
;
const
getExampleObjectNode
=
(
exampleObject
:
any
)
=>
{
const
{
assembly
,
chromosome
,
display_name
,
location
,
object_type
,
species
,
stable_id
}
=
exampleObject
;
const
assemblyStr
=
`
${
assembly
.
name
}
_demo`
;
const
regionStr
=
`
${
chromosome
}
:
${
location
.
start
}
-
${
location
.
end
}
`
;
const
path
=
`/app/browser/
${
assemblyStr
}
/
${
display_name
}
/
${
regionStr
}
`
;
return
(
<
dd
key
=
{
stable_id
}
>
<
Link
to
=
{
path
}
>
{
species
}
{
object_type
}
{
display_name
}
</
Link
>
</
dd
>
);
};
return
(
<
div
className
=
{
styles
.
home
}
>