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
Embedded Genesys UI
Commits
34badb44
Commit
34badb44
authored
Nov 23, 2020
by
Maksym Tishchenko
Browse files
Full accession details
-updated accession details page to match the genesys website.
parent
1add251f
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/accession/AccessionDetailsPage.tsx
View file @
34badb44
...
...
@@ -7,6 +7,8 @@ import AccessionDetails from '@genesys/client/model/accession/AccessionDetails';
import
{
WithTranslation
,
withTranslation
}
from
'
react-i18next
'
;
import
{
LocalStorageCart
}
from
'
utilities
'
;
import
{
WithConfig
}
from
'
config/config
'
;
import
GrinSpecies
from
'
ui/common/GrinSpecies
'
;
import
PdciTable
from
'
ui/common/PdciTable
'
;
interface
IAccessionDetailsPageState
{
accession
:
AccessionDetails
;
...
...
@@ -103,14 +105,12 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
);
}
else
{
const
details
=
accession
.
details
;
const
pdci
=
accession
.
pdci
;
return
(
<>
<
h1
>
{
details
.
accessionNumber
}
</
h1
>
{
details
.
doi
&&
<
Property
title
=
{
t
(
'
accession.doi
'
)
}
value
=
{
details
.
doi
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
accessionName
&&
<
Property
title
=
{
t
(
'
accession.accessionName
'
)
}
value
=
{
details
.
accessionName
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
taxonomy
&&
<
Property
title
=
{
t
(
'
accession.taxonomy
'
)
}
value
=
{
<
span
dangerouslySetInnerHTML
=
{
{
__html
:
details
.
taxonomy
.
taxonNameHtml
}
}
/>
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
institute
&&
details
.
institute
.
fullName
&&
<
Property
title
=
{
t
(
'
accession.holdingInstitute
'
)
}
value
=
{
details
.
institute
.
fullName
}
index
=
{
propertyIndex
++
}
/>
}
...
...
@@ -132,6 +132,13 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
{
details
.
ancest
&&
<
Property
title
=
"Ancestral information (pedigree)"
value
=
{
details
.
ancest
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
storage
&&
details
.
storage
.
length
>
0
&&
<
Property
title
=
{
t
(
'
accession.storageType
'
)
}
titleStyle
=
{
{
display
:
'
flex
'
,
alignItems
:
'
center
'
}
}
value
=
{
details
.
storage
.
map
((
storage
,
i
)
=>
<
div
key
=
{
`
${
i
}
-
${
storage
}
`
}
>
{
t
(
`accession.storage.
${
storage
}
`
)
}
</
div
>)
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
aegis
&&
<
Property
title
=
"AEGIS"
value
=
"Accession is part of the European Collection"
index
=
{
propertyIndex
++
}
/>
}
...
...
@@ -141,13 +148,78 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
{
details
.
donorNumb
&&
<
Property
title
=
"Donor accession number"
value
=
{
details
.
donorNumb
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
duplSite
&&
details
.
duplSite
.
length
>
0
&&
<
Property
title
=
{
t
(
'
accession.details.safetyDuplicationInstitute
'
)
}
titleStyle
=
{
{
display
:
'
flex
'
,
alignItems
:
'
center
'
}
}
value
=
{
details
.
duplSite
.
map
((
duplSite
,
i
)
=>
<
div
key
=
{
`
${
i
}
-
${
duplSite
}
`
}
>
{
duplSite
}
</
div
>)
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
acceUrl
&&
<
Property
title
=
"Accession URL"
value
=
{
<
a
href
=
{
details
.
acceUrl
}
target
=
"_blank"
rel
=
"nofollow"
>
{
details
.
acceUrl
}
</
a
>
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
taxonomy
&&
<>
<
h3
className
=
"mt-4"
>
{
t
(
'
accession.details.providedTaxonomy
'
)
}
</
h3
>
<
Property
title
=
{
t
(
'
accession.taxonomy.genus
'
)
}
value
=
{
details
.
taxonomy
.
genus
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
accession.taxonomy.species
'
)
}
value
=
{
details
.
taxonomy
.
species
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
accession.taxonomy.scientificName
'
)
}
value
=
{
<
span
dangerouslySetInnerHTML
=
{
{
__html
:
details
.
taxonomy
.
taxonNameHtml
}
}
/>
}
index
=
{
propertyIndex
++
}
/>
{
details
.
crop
&&
<
Property
title
=
{
t
(
'
accession.crop
'
)
}
value
=
{
details
.
crop
.
shortName
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
cropName
&&
<
Property
title
=
{
t
(
'
accession.cropName
'
)
}
value
=
{
details
.
cropName
}
index
=
{
propertyIndex
++
}
/>
}
</>
}
{
details
.
taxonomy
.
grinTaxonomySpecies
&&
<
div
>
<
h3
className
=
"mt-4"
>
{
t
(
'
accession.details.grinTaxonomy
'
)
}
<
a
href
=
{
`mailto:helpdesk@genesys-pgr.org?subject=Taxonomy of accession
${
details
.
uuid
}
`
}
>
Contact us
</
a
>
</
h3
>
<
a
href
=
{
`https://npgsweb.ars-grin.gov/gringlobal/taxon/taxonomydetail?id=
${
details
.
taxonomy
.
grinTaxonomySpecies
.
id
}
`
}
>
<
GrinSpecies
grinSpecies
=
{
details
.
taxonomy
.
grinTaxonomySpecies
}
/>
</
a
>
</
div
>
}
{
details
.
taxonomy
.
currentTaxonomySpecies
&&
<
div
>
<
h3
className
=
"mt-4"
>
{
t
(
'
accession.details.currentTaxonomy
'
)
}
</
h3
>
<
a
href
=
{
`https://npgsweb.ars-grin.gov/gringlobal/taxon/taxonomydetail?id=
${
details
.
taxonomy
.
currentTaxonomySpecies
.
id
}
`
}
>
<
GrinSpecies
grinSpecies
=
{
details
.
taxonomy
.
currentTaxonomySpecies
}
/>
</
a
>
</
div
>
}
{
details
.
aliases
&&
details
.
aliases
.
length
>
0
&&
<>
<
h3
className
=
"mt-4"
>
{
t
(
'
accession.details.accessionNames
'
)
}
</
h3
>
{
details
.
aliases
.
map
((
alias
)
=>
(
<
Property
key
=
{
alias
.
id
}
title
=
{
t
(
`accession.alias.
${
alias
.
aliasType
}
`
)
}
value
=
{
`
${
alias
.
name
}
${
alias
.
usedBy
||
''
}
`
}
index
=
{
propertyIndex
++
}
/>
))
}
</>
}
{
details
.
remarks
&&
details
.
remarks
.
length
>
0
&&
<>
<
h3
className
=
"mt-4"
>
{
t
(
'
accession.details.remarks
'
)
}
</
h3
>
{
details
.
remarks
.
map
((
remark
)
=>
(
<
Property
key
=
{
remark
.
id
}
title
=
{
remark
.
fieldName
||
remark
.
remark
}
value
=
{
remark
.
fieldName
?
remark
.
remark
:
''
}
index
=
{
propertyIndex
++
}
/>
))
}
</>
}
{
details
.
coll
&&
<>
<
h3
className
=
"mt-4"
>
Collecting site
</
h3
>
<
h3
className
=
"mt-4"
>
{
t
(
'
accession.details.collSite
'
)
}
</
h3
>
<
Property
title
=
{
t
(
'
accession.coll.collSite
'
)
}
value
=
{
details
.
coll
.
collSite
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
accession.coll.collDate
'
)
}
value
=
{
details
.
coll
.
collDate
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
accession.coll.collMissId
'
)
}
value
=
{
details
.
coll
.
collMissId
}
index
=
{
propertyIndex
++
}
/>
...
...
@@ -157,7 +229,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
}
{
details
.
geo
&&
<>
<
h3
className
=
"mt-4"
>
Georeference
</
h3
>
<
h3
className
=
"mt-4"
>
{
t
(
'
accession.details.geo
'
)
}
</
h3
>
<
Property
title
=
{
t
(
'
accession.geo.latitude
'
)
}
value
=
{
details
.
geo
.
latitude
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
accession.geo.longitude
'
)
}
value
=
{
details
.
geo
.
longitude
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
accession.geo.datum
'
)
}
value
=
{
details
.
geo
.
datum
}
index
=
{
propertyIndex
++
}
/>
...
...
@@ -168,7 +240,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
{
accession
.
imageGallery
&&
<>
<
h2
className
=
"mt-4"
>
I
mages
</
h2
>
<
h2
className
=
"mt-4"
>
{
t
(
'
accession.details.i
mages
'
)
}
</
h2
>
<
div
>
{
accession
.
imageGallery
.
images
.
map
((
image
,
idx
)
=>
(
<
span
key
=
{
idx
}
>
...
...
@@ -202,6 +274,23 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
))
}
</>
}
{
pdci
&&
<
PdciTable
pdci
=
{
pdci
}
title
=
{
t
(
'
accession.details.pdci
'
)
}
/>
}
<
h2
className
=
"mt-4"
>
{
t
(
'
accession.details.metadata
'
)
}
</
h2
>
<
Property
title
=
{
t
(
'
accession.details.uuid
'
)
}
value
=
{
`urn:uuid:
${
details
.
uuid
}
`
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
accession.details.permanentURL
'
)
}
value
=
{
<
a
href
=
{
`https://purl.org/germplasm/id/
${
details
.
uuid
}
`
}
>
{
`https://purl.org/germplasm/id/
${
details
.
uuid
}
`
}
</
a
>
}
index
=
{
propertyIndex
++
}
/>
{
details
.
lastModifiedDate
&&
<
Property
title
=
{
t
(
'
accession.details.lastUpdated
'
)
}
value
=
{
details
.
lastModifiedDate
.
toLocaleString
()
}
index
=
{
propertyIndex
++
}
/>
}
{
details
.
createdDate
&&
<
Property
title
=
{
t
(
'
accession.details.created
'
)
}
value
=
{
details
.
createdDate
.
toLocaleString
()
}
index
=
{
propertyIndex
++
}
/>
}
{
shoppingCart
.
enabled
&&
<
div
className
=
"pt-4"
>
{
cartItems
.
includes
(
this
.
props
.
match
.
params
.
uuid
)
?
...
...
src/locales/en/translations.json
View file @
34badb44
...
...
@@ -20,9 +20,25 @@
"model_plural"
:
"Accessions"
,
"doi"
:
"Accession DOI"
,
"crop"
:
"Crop"
,
"cropName"
:
"Crop name"
,
"acceNumb"
:
"Accession number"
,
"accessionName"
:
"Accession name"
,
"taxonomy"
:
"Scientific name"
,
"alias"
:
{
"OTHERNUMB"
:
"Other identifier"
,
"ACCENAME"
:
"Accession name"
,
"DONORNUMB"
:
"Donor accession number"
,
"COLLNUMB"
:
"Collecting number"
},
"taxonomy"
:
{
"genus"
:
"Genus"
,
"species"
:
"Specific epithet"
,
"scientificName"
:
"Scientific name"
,
"genusSpecies"
:
"Species"
,
"subtaxa"
:
"Subtaxon"
,
"synonyms"
:
"Synonyms"
,
"grinTaxonName"
:
"GRIN taxon"
,
"grinCurrentName"
:
"Current GRIN taxon"
},
"holdingInstitute"
:
"Holding institute"
,
"instituteCode"
:
"Institute code"
,
"genus"
:
"Genus"
,
...
...
@@ -32,6 +48,24 @@
"storageType"
:
"Type of germplasm storage"
,
"datasets"
:
"Datasets"
,
"subsets"
:
"Subsets"
,
"details"
:
{
"providedTaxonomy"
:
"Taxonomy provided to Genesys"
,
"metadata"
:
"Metadata"
,
"collSite"
:
"Collecting site"
,
"geo"
:
"Georeference"
,
"images"
:
"Images"
,
"grinTaxonomy"
:
"GRIN Taxonomy"
,
"currentTaxonomy"
:
"Current GRIN Taxon"
,
"uuid"
:
"UUID"
,
"permanentURL"
:
"Permanent URL"
,
"lastUpdated"
:
"Last updated"
,
"created"
:
"Created"
,
"pdci"
:
"Passport Data Completeness Index"
,
"pdciScore"
:
"PDCI score of this accession is {{score, number}} of 10.0."
,
"safetyDuplicationInstitute"
:
"Safety Duplication Institute"
,
"accessionNames"
:
"Accession names"
,
"remarks"
:
"Remarks"
},
"overview"
:
{
"title"
:
"Collection overview"
,
"about"
:
"About {{count, number}} {{what, lowercase}}"
,
...
...
src/ui/common/GrinSpecies.tsx
0 → 100644
View file @
34badb44
import
*
as
React
from
'
react
'
;
import
TaxonomySpecies
from
'
@genesys/client/model/genesys/TaxonomySpecies
'
;
const
GrinSpecies
=
({
grinSpecies
}:
{
grinSpecies
:
TaxonomySpecies
})
=>
grinSpecies
?
<>
<
i
>
{
grinSpecies
.
genusSpecies
}
</
i
>
{
grinSpecies
.
subspeciesName
&&
<>
subsp.
<
i
>
{
grinSpecies
.
subspeciesName
}
</
i
></>
}
{
grinSpecies
.
varietyName
&&
<>
var.
<
i
>
{
grinSpecies
.
varietyName
}
</
i
></>
}
{
grinSpecies
.
subvarietyName
&&
<>
subvar.
<
i
>
{
grinSpecies
.
subvarietyName
}
</
i
></>
}
{
grinSpecies
.
formaName
&&
<>
{
grinSpecies
.
formaRankType
}
<
i
>
{
grinSpecies
.
formaName
}
</
i
></>
}
{
grinSpecies
.
nameAuthority
&&
<>
{
grinSpecies
.
nameAuthority
}
</>
}
</>
:
null
;
export
default
GrinSpecies
;
src/ui/common/PdciTable.tsx
0 → 100644
View file @
34badb44
import
*
as
React
from
'
react
'
;
import
{
WithTranslation
,
withTranslation
}
from
'
react-i18next
'
;
// model
import
PDCI
from
'
@genesys/client/model/accession/PDCI
'
;
import
{
Property
}
from
'
ui/common/Property
'
;
interface
IPdciTableProps
extends
React
.
ClassAttributes
<
any
>
,
WithTranslation
{
children
?:
any
;
pdci
:
PDCI
;
title
:
string
;
small
?:
boolean
;
}
class
PdciTable
extends
React
.
Component
<
IPdciTableProps
,
any
>
{
public
render
()
{
const
{
pdci
,
title
,
t
}
=
this
.
props
;
return
(
<>
<
h2
className
=
"mt-4"
>
{
title
}
</
h2
>
<
div
style
=
{
{
marginBottom
:
'
2em
'
,
padding
:
'
2em
'
,
backgroundColor
:
'
#e7e7e7
'
,
borderRadius
:
'
6px
'
}
}
>
<
span
style
=
{
{
fontSize
:
'
1.5em
'
}
}
>
{
t
(
'
accession.details.pdciScore
'
,
{
score
:
pdci
.
score
})
}
</
span
>
</
div
>
<
div
className
=
"row"
>
{
[...
pdci
.
independentItems
,
...
pdci
.
dependentItems
].
map
((
property
,
i
)
=>
(
<
div
className
=
"col-sm-12 col-md-6 col-xl-4"
key
=
{
`
${
i
}
-
${
property
}
`
}
>
<
div
className
=
"col-sm-12 col-md-12 col-xl-12 p-0 h-100"
>
<
Property
index
=
{
i
}
numeric
title
=
{
property
.
toUpperCase
()
}
value
=
{
pdci
[
property
]
}
/>
</
div
>
</
div
>
))
}
</
div
>
</>
);
}
}
export
default
withTranslation
()(
PdciTable
);
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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