Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Website
Commits
43d3f6db
Commit
43d3f6db
authored
Aug 23, 2018
by
Viacheslav Pavlov
Browse files
Institute details: Loading indicator
parent
c81b1508
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/ui/pages/accessions/DisplayPage.tsx
View file @
43d3f6db
...
...
@@ -86,159 +86,162 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<
ScrollToTopOnMount
/>
<
ContentHeader
title
=
"Accession details"
subtitle
=
"Passport data and everything else"
/>
{
stillLoading
&&
<
Loading
/>
}
{
error
&&
<
div
>
{
JSON
.
stringify
(
error
)
}
</
div
>
}
{
stillLoading
?
<
Loading
/>
:
<
div
>
{
error
&&
<
div
>
{
JSON
.
stringify
(
error
)
}
</
div
>
}
{
accession
&&
<
PageContents
>
<
MainSection
title
=
{
<
div
>
Accession:
{
accession
.
accessionNumber
}
<
div
className
=
"float-right"
>
<
ReduxCheckbox
label
=
{
<
b
>
{
isChecked
?
`Remove
${
accession
.
accessionNumber
}
from my list`
:
`Add
${
accession
.
accessionNumber
}
to my list`
}
</
b
>
}
input
=
{
{
value
:
isChecked
,
onChange
:
this
.
onCheckboxChange
,
}
}
/>
</
div
>
</
div
>
}
>
<
Properties
>
{
accession
.
doi
&&
<
PropertiesItem
title
=
"DOI"
><
DOI
noPrefix
value
=
{
accession
.
doi
}
/></
PropertiesItem
>
}
<
PropertiesItem
title
=
"Accession number"
>
{
accession
.
accessionNumber
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Holding institute"
>
<
InstituteLink
to
=
{
accession
.
institute
}
>
{
accession
.
institute
.
fullName
}
</
InstituteLink
>
</
PropertiesItem
>
<
PropertiesItem
title
=
"Country of holding institute"
>
{
accession
.
institute
.
country
.
name
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Institute code"
>
{
accession
.
institute
.
code
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Acquisition date"
>
{
accession
.
acquisitionDate
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Biological status of accession"
>
{
accession
.
sampStat
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Availability for distribution"
>
{
t
(
`accession.available.
${
accession
.
available
}
`
)
}
</
PropertiesItem
>
{
accession
&&
<
PageContents
>
<
MainSection
title
=
{
<
div
>
Accession:
{
accession
.
accessionNumber
}
<
div
className
=
"float-right"
>
<
ReduxCheckbox
label
=
{
<
b
>
{
isChecked
?
`Remove
${
accession
.
accessionNumber
}
from my list`
:
`Add
${
accession
.
accessionNumber
}
to my list`
}
</
b
>
}
input
=
{
{
value
:
isChecked
,
onChange
:
this
.
onCheckboxChange
,
}
}
/>
</
div
>
</
div
>
}
>
<
Properties
>
{
accession
.
doi
&&
<
PropertiesItem
title
=
"DOI"
><
DOI
noPrefix
value
=
{
accession
.
doi
}
/></
PropertiesItem
>
}
<
PropertiesItem
title
=
"Accession number"
>
{
accession
.
accessionNumber
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Holding institute"
>
<
InstituteLink
to
=
{
accession
.
institute
}
>
{
accession
.
institute
.
fullName
}
</
InstituteLink
>
</
PropertiesItem
>
<
PropertiesItem
title
=
"Country of holding institute"
>
{
accession
.
institute
.
country
.
name
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Institute code"
>
{
accession
.
institute
.
code
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Acquisition date"
>
{
accession
.
acquisitionDate
}
</
PropertiesItem
>
{
accession
.
storage
&&
accession
.
storage
.
length
>
0
&&
<
PropertiesItem
title
=
"Type of Germplasm storage"
>
{
accession
.
storage
.
map
((
storage
,
i
)
=>
(
<
div
key
=
{
storage
}
>
{
t
(
`accession.storage.
${
storage
}
`
)
}
</
div
>
))
}
</
PropertiesItem
>
}
<
PropertiesItem
title
=
"Donor institute"
>
{
accession
.
donorCode
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Donor accession number"
>
{
accession
.
donorNumb
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Biological status of accession"
>
{
accession
.
sampStat
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Availability for distribution"
>
{
t
(
`accession.available.
${
accession
.
available
}
`
)
}
</
PropertiesItem
>
{
accession
.
duplSite
&&
accession
.
duplSite
.
length
>
0
&&
<
PropertiesItem
title
=
"Safety duplication institute"
>
{
accession
.
duplSite
.
map
((
duplSite
,
i
)
=>
(
<
div
key
=
{
duplSite
}
>
{
duplSite
}
</
div
>
))
}
</
PropertiesItem
>
}
{
accession
.
storage
&&
accession
.
storage
.
length
>
0
&&
<
PropertiesItem
title
=
"Type of Germplasm storage"
>
{
accession
.
storage
.
map
((
storage
,
i
)
=>
(
<
div
key
=
{
storage
}
>
{
t
(
`accession.storage.
${
storage
}
`
)
}
</
div
>
))
}
</
PropertiesItem
>
}
<
PropertiesItem
title
=
"Donor institute"
>
{
accession
.
donorCode
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Donor accession number"
>
{
accession
.
donorNumb
}
</
PropertiesItem
>
{
accession
.
acceUrl
&&
<
PropertiesItem
title
=
"Accession URL"
><
ExternalLink
link
=
{
accession
.
acceUrl
}
/></
PropertiesItem
>
}
</
Properties
>
</
MainSection
>
{
accession
.
duplSite
&&
accession
.
duplSite
.
length
>
0
&&
<
PropertiesItem
title
=
"Safety duplication institute"
>
{
accession
.
duplSite
.
map
((
duplSite
,
i
)
=>
(
<
div
key
=
{
duplSite
}
>
{
duplSite
}
</
div
>
))
}
</
PropertiesItem
>
}
<
PageSection
title
=
"Taxonomy"
>
<
Properties
>
<
PropertiesItem
title
=
"Genus"
>
{
accession
.
taxonomy
.
genus
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Species"
>
{
accession
.
taxonomy
.
species
}
{
'
—
'
}
<
Link
to
=
{
'
/a
'
}
>
View
<
i
>
{
`
${
accession
.
taxonomy
.
genus
}
${
accession
.
taxonomy
.
species
}
`
}
</
i
>
at
{
accession
.
institute
.
code
}
</
Link
>
</
PropertiesItem
>
<
PropertiesItem
title
=
"Scientific name"
><
SciName
taxa
=
{
accession
.
taxonomy
.
taxonNameHtml
}
/></
PropertiesItem
>
{
accession
.
crop
&&
<
PropertiesItem
title
=
"Crop name"
><
CropChips
crops
=
{
accession
.
crop
.
shortName
}
/></
PropertiesItem
>
}
<
PropertiesItem
title
=
"Provided crop name"
>
{
accession
.
cropName
}
</
PropertiesItem
>
</
Properties
>
</
PageSection
>
{
accession
.
acceUrl
&&
<
PropertiesItem
title
=
"Accession URL"
><
ExternalLink
link
=
{
accession
.
acceUrl
}
/></
PropertiesItem
>
}
</
Properties
>
</
MainSection
>
<
PageSection
title
=
"Accession names"
>
<
Properties
>
{
accession
.
coll
&&
accession
.
coll
.
collNumb
&&
<
PropertiesItem
title
=
{
t
(
'
accession.alias.COLLNUMB
'
)
}
>
{
accession
.
coll
.
collNumb
}
{
accession
.
coll
.
collCode
}
</
PropertiesItem
>
}
{
accession
.
donorCode
&&
<
PropertiesItem
title
=
{
t
(
'
accession.alias.DONORNUMB
'
)
}
>
{
accession
.
donorNumb
}
{
accession
.
donorCode
}
</
PropertiesItem
>
}
{
accession
.
aliases
&&
accession
.
aliases
.
map
((
alias
)
=>
(
<
PropertiesItem
key
=
{
alias
.
id
}
title
=
{
t
(
`accession.alias.
${
alias
.
aliasType
}
`
)
}
>
{
alias
.
name
}
{
alias
.
usedBy
}
</
PropertiesItem
>
))
}
</
Properties
>
</
PageSection
>
<
PageSection
title
=
"Taxonomy"
>
<
Properties
>
<
PropertiesItem
title
=
"Genus"
>
{
accession
.
taxonomy
.
genus
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Species"
>
{
accession
.
taxonomy
.
species
}
{
'
—
'
}
<
Link
to
=
{
'
/a
'
}
>
View
<
i
>
{
`
${
accession
.
taxonomy
.
genus
}
${
accession
.
taxonomy
.
species
}
`
}
</
i
>
at
{
accession
.
institute
.
code
}
</
Link
>
</
PropertiesItem
>
<
PropertiesItem
title
=
"Scientific name"
><
SciName
taxa
=
{
accession
.
taxonomy
.
taxonNameHtml
}
/></
PropertiesItem
>
{
accession
.
crop
&&
<
PropertiesItem
title
=
"Crop name"
><
CropChips
crops
=
{
accession
.
crop
.
shortName
}
/></
PropertiesItem
>
}
<
PropertiesItem
title
=
"Provided crop name"
>
{
accession
.
cropName
}
</
PropertiesItem
>
</
Properties
>
</
PageSection
>
<
PageSection
title
=
"Collecting information"
>
<
Properties
>
{
accession
.
countryOfOrigin
&&
<
PropertiesItem
title
=
"Country of origin"
>
{
accession
.
countryOfOrigin
.
name
}
</
PropertiesItem
>
}
{
accession
.
coll
&&
[
'
collDate
'
,
'
collMissId
'
,
'
collNumb
'
,
'
collSite
'
,
'
collSrc
'
]
.
filter
((
prop
)
=>
accession
.
coll
[
prop
]
!==
null
).
map
((
prop
)
=>
(
<
PropertiesItem
key
=
{
prop
}
title
=
{
t
(
`accession.coll.
${
prop
}
`
)
}
>
{
accession
.
coll
[
prop
]
}
</
PropertiesItem
>
))
}
{
accession
.
coll
&&
[
'
collCode
'
,
'
collName
'
]
.
filter
((
prop
)
=>
accession
.
coll
[
prop
].
length
).
map
((
prop
)
=>
(
<
PropertiesItem
key
=
{
prop
}
title
=
{
t
(
`accession.coll.
${
prop
}
`
)
}
>
{
accession
.
coll
[
prop
]
}
</
PropertiesItem
>
))
}
{
accession
.
geo
&&
[
'
latitude
'
,
'
longitude
'
,
'
datum
'
,
'
method
'
,
'
uncertainty
'
,
'
elevation
'
]
.
filter
((
prop
)
=>
accession
.
geo
[
prop
]
!==
null
).
map
((
prop
)
=>
(
<
PropertiesItem
key
=
{
prop
}
title
=
{
t
(
`accession.geo.
${
prop
}
`
)
}
>
{
accession
.
geo
[
prop
]
}
</
PropertiesItem
>
))
}
</
Properties
>
<
PageSection
title
=
"Accession names"
>
<
Properties
>
{
accession
.
coll
&&
accession
.
coll
.
collNumb
&&
<
PropertiesItem
title
=
{
t
(
'
accession.alias.COLLNUMB
'
)
}
>
{
accession
.
coll
.
collNumb
}
{
accession
.
coll
.
collCode
}
</
PropertiesItem
>
}
{
accession
.
donorCode
&&
<
PropertiesItem
title
=
{
t
(
'
accession.alias.DONORNUMB
'
)
}
>
{
accession
.
donorNumb
}
{
accession
.
donorCode
}
</
PropertiesItem
>
}
{
accession
.
aliases
&&
accession
.
aliases
.
map
((
alias
)
=>
(
<
PropertiesItem
key
=
{
alias
.
id
}
title
=
{
t
(
`accession.alias.
${
alias
.
aliasType
}
`
)
}
>
{
alias
.
name
}
{
alias
.
usedBy
}
</
PropertiesItem
>
))
}
</
Properties
>
</
PageSection
>
{
hasLatLon
&&
<
LocationMap
location
=
{
{
id
:
accession
.
geo
.
id
,
lat
:
accession
.
geo
.
latitude
,
lng
:
accession
.
geo
.
longitude
,
<
PageSection
title
=
"Collecting information"
>
<
Properties
>
{
accession
.
countryOfOrigin
&&
<
PropertiesItem
title
=
"Country of origin"
>
{
accession
.
countryOfOrigin
.
name
}
</
PropertiesItem
>
}
{
accession
.
coll
&&
[
'
collDate
'
,
'
collMissId
'
,
'
collNumb
'
,
'
collSite
'
,
'
collSrc
'
]
.
filter
((
prop
)
=>
accession
.
coll
[
prop
]
!==
null
).
map
((
prop
)
=>
(
<
PropertiesItem
key
=
{
prop
}
title
=
{
t
(
`accession.coll.
${
prop
}
`
)
}
>
{
accession
.
coll
[
prop
]
}
</
PropertiesItem
>
))
}
{
accession
.
coll
&&
[
'
collCode
'
,
'
collName
'
]
.
filter
((
prop
)
=>
accession
.
coll
[
prop
].
length
).
map
((
prop
)
=>
(
<
PropertiesItem
key
=
{
prop
}
title
=
{
t
(
`accession.coll.
${
prop
}
`
)
}
>
{
accession
.
coll
[
prop
]
}
</
PropertiesItem
>
))
}
{
accession
.
geo
&&
[
'
latitude
'
,
'
longitude
'
,
'
datum
'
,
'
method
'
,
'
uncertainty
'
,
'
elevation
'
]
.
filter
((
prop
)
=>
accession
.
geo
[
prop
]
!==
null
).
map
((
prop
)
=>
(
<
PropertiesItem
key
=
{
prop
}
title
=
{
t
(
`accession.geo.
${
prop
}
`
)
}
>
{
accession
.
geo
[
prop
]
}
</
PropertiesItem
>
))
}
</
Properties
>
{
hasLatLon
&&
<
LocationMap
location
=
{
{
id
:
accession
.
geo
.
id
,
lat
:
accession
.
geo
.
latitude
,
lng
:
accession
.
geo
.
longitude
,
}
}
/>
}
/>
}
</
PageSection
>
</
PageSection
>
{
accession
.
remarks
&&
accession
.
remarks
.
length
>
0
&&
<
PageSection
title
=
"Remarks"
>
<
Properties
>
{
accession
.
remarks
&&
accession
.
remarks
.
map
((
remark
)
=>
(
<
PropertiesItem
key
=
{
remark
.
id
}
title
=
{
remark
.
fieldName
}
>
{
remark
.
remark
}
</
PropertiesItem
>
))
}
</
Properties
>
</
PageSection
>
}
{
accession
.
remarks
&&
accession
.
remarks
.
length
>
0
&&
<
PageSection
title
=
"Remarks"
>
<
Properties
>
{
accession
.
remarks
&&
accession
.
remarks
.
map
((
remark
)
=>
(
<
PropertiesItem
key
=
{
remark
.
id
}
title
=
{
remark
.
fieldName
}
>
{
remark
.
remark
}
</
PropertiesItem
>
))
}
</
Properties
>
</
PageSection
>
}
{
accession
.
pdci
&&
<
PageSection
title
=
"Passport Data Completeness Index"
>
<
div
style
=
{
{
marginBottom
:
'
2em
'
,
padding
:
'
2em
'
,
backgroundColor
:
'
#b6c1b4
'
,
borderRadius
:
'
6px
'
}
}
>
<
span
style
=
{
{
fontSize
:
'
1.5em
'
}
}
>
{
t
(
'
accession.pdciScore
'
,
{
score
:
accession
.
pdci
.
score
})
}
{
/*<p>{ t(`accession.pdciInstitute`, { score: accession.pdci.score }) }</p>*/
}
</
span
>
{
'
'
}
<
a
href
=
"#"
>
Read about Passport Data Completeness Index
</
a
>
</
div
>
<
Properties
>
{
accession
.
pdci
.
independentItems
.
map
((
item
)
=>
(
<
PropertiesItem
small
key
=
{
item
}
title
=
{
item
.
toUpperCase
()
}
>
{
accession
.
pdci
[
item
]
}
</
PropertiesItem
>
))
}
{
accession
.
pdci
.
dependentItems
.
map
((
item
)
=>
(
<
PropertiesItem
small
key
=
{
item
}
title
=
{
item
.
toUpperCase
()
}
>
{
accession
.
pdci
[
item
]
}
</
PropertiesItem
>
))
}
</
Properties
>
</
PageSection
>
}
{
accession
.
pdci
&&
<
PageSection
title
=
"Passport Data Completeness Index"
>
<
div
style
=
{
{
marginBottom
:
'
2em
'
,
padding
:
'
2em
'
,
backgroundColor
:
'
#b6c1b4
'
,
borderRadius
:
'
6px
'
}
}
>
<
span
style
=
{
{
fontSize
:
'
1.5em
'
}
}
>
{
t
(
'
accession.pdciScore
'
,
{
score
:
accession
.
pdci
.
score
})
}
{
/*<p>{ t(`accession.pdciInstitute`, { score: accession.pdci.score }) }</p>*/
}
</
span
>
{
'
'
}
<
a
href
=
"#"
>
Read about Passport Data Completeness Index
</
a
>
</
div
>
<
Properties
>
{
accession
.
pdci
.
independentItems
.
map
((
item
)
=>
(
<
PropertiesItem
small
key
=
{
item
}
title
=
{
item
.
toUpperCase
()
}
>
{
accession
.
pdci
[
item
]
}
</
PropertiesItem
>
))
}
{
accession
.
pdci
.
dependentItems
.
map
((
item
)
=>
(
<
PropertiesItem
small
key
=
{
item
}
title
=
{
item
.
toUpperCase
()
}
>
{
accession
.
pdci
[
item
]
}
</
PropertiesItem
>
))
}
</
Properties
>
</
PageSection
>
}
<
PageSection
title
=
"Metadata"
>
<
Properties
>
<
PropertiesItem
title
=
"UUID"
>
{
`urn:uuid:
${
accession
.
uuid
}
`
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Permanent URL"
><
ExternalLink
link
=
{
`https://purl.org/germplasm/id/
${
accession
.
uuid
}
`
}
/></
PropertiesItem
>
<
PropertiesItem
title
=
"Last updated"
><
PrettyDate
value
=
{
accession
.
lastModifiedDate
}
/></
PropertiesItem
>
<
PropertiesItem
title
=
"Created"
><
PrettyDate
value
=
{
accession
.
createdDate
}
/></
PropertiesItem
>
</
Properties
>
</
PageSection
>
</
PageContents
>
<
PageSection
title
=
"Metadata"
>
<
Properties
>
<
PropertiesItem
title
=
"UUID"
>
{
`urn:uuid:
${
accession
.
uuid
}
`
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Permanent URL"
><
ExternalLink
link
=
{
`https://purl.org/germplasm/id/
${
accession
.
uuid
}
`
}
/></
PropertiesItem
>
<
PropertiesItem
title
=
"Last updated"
><
PrettyDate
value
=
{
accession
.
lastModifiedDate
}
/></
PropertiesItem
>
<
PropertiesItem
title
=
"Created"
><
PrettyDate
value
=
{
accession
.
createdDate
}
/></
PropertiesItem
>
</
Properties
>
</
PageSection
>
</
PageContents
>
}
</
div
>
}
</
PageLayout
>
);
...
...
src/ui/pages/institutes/DisplayPage.tsx
View file @
43d3f6db
...
...
@@ -81,125 +81,128 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<
ScrollToTopOnMount
/>
<
ContentHeader
title
=
"Institute details"
subtitle
=
"smt"
/>
{
stillLoading
&&
<
Loading
/>
}
{
error
&&
<
div
>
{
JSON
.
stringify
(
error
)
}
</
div
>
}
{
institute
&&
<
PageContents
>
<
MainSection
title
=
{
`
${
institute
.
details
.
fullName
}
`
}
>
<
Properties
>
<
PropertiesItem
title
=
"Institute code"
>
{
institute
.
details
.
code
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Type"
>
{
institute
.
details
.
type
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Country"
>
{
institute
.
details
.
country
.
name
}
</
PropertiesItem
>
{
institute
.
details
.
url
&&
<
PropertiesItem
title
=
"Web link"
>
<
a
href
=
{
institute
.
details
.
url
}
>
{
institute
.
details
.
url
}
</
a
>
</
PropertiesItem
>
}
<
PropertiesItem
title
=
"Accessions in Genesys"
>
{
<
a
onClick
=
{
this
.
applyInstituteCodeFilter
}
>
{
institute
.
details
.
accessionCount
}
</
a
>
}
</
PropertiesItem
>
</
Properties
>
</
MainSection
>
{
institute
.
details
.
latitude
!==
null
&&
institute
.
details
.
longitude
!==
null
&&
<
PageSection
title
=
"Location"
>
<
Properties
>
<
PropertiesItem
title
=
"latitude"
>
{
institute
.
details
.
latitude
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"longitude"
>
{
institute
.
details
.
longitude
}
</
PropertiesItem
>
</
Properties
>
<
LocationMap
location
=
{
{
id
:
institute
.
details
.
id
,
lat
:
institute
.
details
.
latitude
,
lng
:
institute
.
details
.
longitude
,
{
stillLoading
?
<
Loading
/>
:
<
div
>
{
error
&&
<
div
>
{
JSON
.
stringify
(
error
)
}
</
div
>
}
{
institute
&&
<
PageContents
>
<
MainSection
title
=
{
`
${
institute
.
details
.
fullName
}
`
}
>
<
Properties
>
<
PropertiesItem
title
=
"Institute code"
>
{
institute
.
details
.
code
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Type"
>
{
institute
.
details
.
type
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"Country"
>
{
institute
.
details
.
country
.
name
}
</
PropertiesItem
>
{
institute
.
details
.
url
&&
<
PropertiesItem
title
=
"Web link"
>
<
a
href
=
{
institute
.
details
.
url
}
>
{
institute
.
details
.
url
}
</
a
>
</
PropertiesItem
>
}
<
PropertiesItem
title
=
"Accessions in Genesys"
>
{
<
a
onClick
=
{
this
.
applyInstituteCodeFilter
}
>
{
institute
.
details
.
accessionCount
}
</
a
>
}
</
PropertiesItem
>
</
Properties
>
</
MainSection
>
{
institute
.
details
.
latitude
!==
null
&&
institute
.
details
.
longitude
!==
null
&&
<
PageSection
title
=
"Location"
>
<
Properties
>
<
PropertiesItem
title
=
"latitude"
>
{
institute
.
details
.
latitude
}
</
PropertiesItem
>
<
PropertiesItem
title
=
"longitude"
>
{
institute
.
details
.
longitude
}
</
PropertiesItem
>
</
Properties
>
<
LocationMap
location
=
{
{
id
:
institute
.
details
.
id
,
lat
:
institute
.
details
.
latitude
,
lng
:
institute
.
details
.
longitude
,
}
}
/>
</
PageSection
>
}
<
GridLayout
>
{
cropShortNameOverview
&&
cropShortNameOverview
.
terms
&&
cropShortNameOverview
.
terms
.
length
>
0
&&
<
PropertiesCard
title
=
"Most represented Crops"
propertiesList
=
{
cropShortNameOverview
.
terms
.
map
((
term
)
=>
({
title
:
term
.
term
,
value
:
term
.
count
}))
}
small
/>
}
/>
</
PageSection
>
}
<
GridLayout
>
{
cropShortNameOverview
&&
cropShortNameOverview
.
terms
&&
cropShortNameOverview
.
terms
.
length
>
0
&&
<
PropertiesCard
title
=
"Most represented Crops"
propertiesList
=
{
cropShortNameOverview
.
terms
.
map
((
term
)
=>
({
title
:
term
.
term
,
value
:
term
.
count
}))
}
small
/>
}
{
cropNameOverview
&&
cropNameOverview
.
terms
&&
cropNameOverview
.
terms
.
length
>
0
&&
<
PropertiesCard
title
=
"Most represented Crop names"
propertiesList
=
{
cropNameOverview
.
terms
.
slice
(
0
,
5
).
map
((
term
)
=>
({
title
:
term
.
term
,
value
:
term
.
count
}))
}
small
>
<
PieChart
data
=
{
cropNameOverview
.
terms
.
map
(
(
term
)
=>
({
value
:
term
.
count
,
label
:
term
.
term
,
}),
)
}
/>
</
PropertiesCard
>
}
{
taxonomyGenusOverview
&&
taxonomyGenusOverview
.
terms
&&
taxonomyGenusOverview
.
terms
.
length
>
0
&&
<
PropertiesCard
title
=
"Most represented Genera"
propertiesList
=
{
taxonomyGenusOverview
.
terms
.
slice
(
0
,
5
).
map
((
term
)
=>
({
title
:
term
.
term
,
value
:
term
.
count
}))
}
small
>
<
PieChart
data
=
{
taxonomyGenusOverview
.
terms
.
map
(
(
term
)
=>
({
value
:
term
.
count
,
label
:
term
.
term
,
}),
)
}
/>
</
PropertiesCard
>
}
{
taxonomyGenusSpeciesOverview
&&
taxonomyGenusSpeciesOverview
.
terms
&&
taxonomyGenusSpeciesOverview
.
terms
.
length
>
0
&&
<
PropertiesCard
title
=
"Most represented Species"
propertiesList
=
{
taxonomyGenusSpeciesOverview
.
terms
.
slice
(
0
,
5
).
map
((
term
)
=>
({
title
:
term
.
term
,
value
:
term
.
count
}))
}
small
>
<
PieChart
data
=
{
taxonomyGenusSpeciesOverview
.
terms
.
map
(
(
term
)
=>
({
value
:
term
.
count
,
label
:
term
.
term
,
}),
)
}
/>
</
PropertiesCard
>
}
{
institute
.
lastUpdates
&&
institute
.
lastUpdates
.
length
>
0
&&
<
PropertiesCard
title
=
"Last updates of passport data"
propertiesList
=
{
institute
.
lastUpdates
.
map
((
lastUpdate
)
=>
({
title
:
PrettyDate
({
value
:
new
Date
(
lastUpdate
[
0
],
lastUpdate
[
1
],
lastUpdate
[
2
])})
,
value
:
lastUpdate
[
3
]}))
}
small
/>
}
</
GridLayout
>
{
institute
.
blurb
&&
institute
.
blurb
.
body
&&
<
PageSection
title
=
"About"
>
<
Properties
>
<
div
style
=
{
!
isMobile
?
{
columnCount
:
2
}
:
{}
}
dangerouslySetInnerHTML
=
{
{
__html
:
institute
.
blurb
.
body
}
}
/>
</
Properties
>
</
PageSection
>
{
cropNameOverview
&&
cropNameOverview
.
terms
&&
cropNameOverview
.
terms
.
length
>
0
&&
<
PropertiesCard
title
=
"Most represented Crop names"
propertiesList
=
{
cropNameOverview
.
terms
.
slice
(
0
,
5
).
map
((
term
)
=>
({
title
:
term
.
term
,
value
:
term
.
count
}))
}
small
>
<
PieChart
data
=
{
cropNameOverview
.
terms
.
map
(
(
term
)
=>
({
value
:
term
.
count
,
label
:
term
.
term
,
}),
)
}
/>
</
PropertiesCard
>
}
{
taxonomyGenusOverview
&&
taxonomyGenusOverview
.
terms
&&
taxonomyGenusOverview
.
terms
.
length
>
0
&&
<
PropertiesCard
title
=
"Most represented Genera"
propertiesList
=
{
taxonomyGenusOverview
.
terms
.
slice
(
0
,
5
).
map
((
term
)
=>
({
title
:
term
.
term
,
value
:
term
.
count
}))
}
small
>
<
PieChart
data
=
{
taxonomyGenusOverview
.
terms
.
map
(
(
term
)
=>
({
value
:
term
.
count
,
label
:
term
.
term
,
}),
)
}
/>
</
PropertiesCard
>
}
{
taxonomyGenusSpeciesOverview
&&
taxonomyGenusSpeciesOverview
.
terms
&&
taxonomyGenusSpeciesOverview
.
terms
.
length
>
0
&&
<
PropertiesCard
title
=
"Most represented Species"
propertiesList
=
{
taxonomyGenusSpeciesOverview
.
terms
.
slice
(
0
,
5
).
map
((
term
)
=>
({
title
:
term
.
term
,
value
:
term
.
count
}))
}
small
>
<
PieChart
data
=
{
taxonomyGenusSpeciesOverview
.
terms
.
map
(
(
term
)
=>
({
value
:
term
.
count
,
label
:
term
.
term
,
}),
)
}
/>
</
PropertiesCard
>
}
{
institute
.
lastUpdates
&&
institute
.
lastUpdates
.
length
>
0
&&
<
PropertiesCard
title
=
"Last updates of passport data"
propertiesList
=
{
institute
.
lastUpdates
.
map
((
lastUpdate
)
=>
({
title
:
PrettyDate
({
value
:
new
Date
(
lastUpdate
[
0
],
lastUpdate
[
1
],
lastUpdate
[
2
])})
,
value
:
lastUpdate
[
3
]}))
}
small
/>
}
</
GridLayout
>
{
institute
.
blurb
&&
institute
.
blurb
.
body
&&
<
PageSection
title
=
"About"
>
<
Properties
>
<
div
style
=
{
!
isMobile
?
{
columnCount
:
2
}
:
{}
}
dangerouslySetInnerHTML
=
{
{
__html
:
institute
.
blurb
.
body
}
}
/>
</
Properties
>
</
PageSection
>
}
</
PageContents
>
}
</
PageContents
>
</
div
>
}
</
PageLayout
>
);
...
...
src/ui/pages/subsets/DisplayPage.tsx
View file @
43d3f6db
...
...
@@ -50,9 +50,12 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<
ContentHeader
title
=
"Subset"
/>
<
PageContents
>
{
stillLoading
&&
<
Loading
/>
}
{
error
&&
<
div
>
{
JSON
.
stringify
(
error
)
}
</
div
>
}
{
subset
&&
<
SubsetCard
subset
=
{
subset
}
/>
}
{
stillLoading
?
<
Loading
/>
:
<
div
>
{
error
&&
<
div
>
{
JSON
.
stringify
(
error
)
}
</
div
>
}
{
subset
&&
<
SubsetCard
subset
=
{
subset
}
/>
}
</
div
>
}
</
PageContents
>
</
PageLayout
>
);
...
...
Write
Preview