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
d861574d
Commit
d861574d
authored
Aug 05, 2021
by
Matija Obreza
Browse files
Subsets/Datasets: UI organized
parent
9e057cba
Changes
6
Hide whitespace changes
Inline
Side-by-side
src/accession/AccessionDetailsPage.tsx
View file @
d861574d
...
...
@@ -22,7 +22,6 @@ interface AccessionDetailsPageState {
interface
AccessionDetailsPageProps
{
match
:
any
;
publicWebsiteUrl
:
string
;
}
class
AccessionDetailsPage
extends
React
.
Component
<
AccessionDetailsPageProps
&
WithTranslation
&
WithConfig
,
AccessionDetailsPageState
>
{
...
...
@@ -100,7 +99,7 @@ class AccessionDetailsPage extends React.Component<AccessionDetailsPageProps & W
public
render
()
{
const
{
accession
,
cartItems
}
=
this
.
state
;
const
{
t
,
appConfig
:
{
apiUrl
,
shoppingCart
,
map
},
appConfig
,
publicWebsiteUrl
}
=
this
.
props
;
const
{
t
,
appConfig
:
{
apiUrl
,
shoppingCart
,
map
},
appConfig
}
=
this
.
props
;
let
propertyIndex
=
0
;
...
...
@@ -294,7 +293,7 @@ class AccessionDetailsPage extends React.Component<AccessionDetailsPageProps & W
<
h2
className
=
"mt-4"
>
{
t
(
'
accession.datasets
'
)
}
</
h2
>
{
accession
.
datasets
.
map
((
dataset
,
idx
)
=>
(
<
div
key
=
{
idx
}
>
<
a
target
=
"_blank"
href
=
{
`
${
publicWebsiteUrl
}
/datasets/
${
dataset
.
uuid
}
`
}
>
{
dataset
.
title
}
</
a
>
<
Link
to
=
{
`
/datasets/
${
dataset
.
uuid
}
`
}
>
{
dataset
.
title
}
</
Link
>
<
p
>
{
dataset
.
description
}
</
p
>
</
div
>
))
}
...
...
src/dataset/DatasetDetailsPage.tsx
View file @
d861574d
import
React
from
'
react
'
;
import
{
useTranslation
}
from
'
react-i18next
'
;
import
{
useSelector
}
from
"
react-redux
"
;
//
import {useSelector} from "react-redux";
import
{
Link
}
from
"
react-router-dom
"
;
// model
...
...
@@ -42,7 +42,7 @@ const DatasetDetailsPage = ({match}: DatasetDetailsPageProps) => {
},
[]);
// redux
const
publicWebsiteUrl
=
useSelector
((
state
:
any
)
=>
state
?.
apiInfo
?.
apiInfo
?.
publicWebsiteUrl
);
//
const publicWebsiteUrl = useSelector((state: any) => state?.apiInfo?.apiInfo?.publicWebsiteUrl);
React
.
useEffect
(()
=>
{
loadData
(
match
.
params
.
uuid
);
...
...
@@ -67,65 +67,90 @@ const DatasetDetailsPage = ({match}: DatasetDetailsPageProps) => {
<
h1
>
{
dataset
.
title
}
</
h1
>
</
div
>
{
dataset
.
title
&&
<
Property
title
=
{
t
(
'
dataset.title
'
)
}
value
=
{
<
p
>
{
dataset
.
title
}
</
p
>
}
index
=
{
propertyIndex
++
}
/>
}
{
dataset
.
description
&&
<
Property
title
=
{
t
(
'
dataset.description
'
)
}
value
=
{
<
p
>
{
dataset
.
description
}
</
p
>
}
index
=
{
propertyIndex
++
}
/>
}
{
dataset
.
description
&&
<
p
>
{
dataset
.
description
}
</
p
>
}
{
dataset
.
owner
&&
<
Property
title
=
{
t
(
'
dataset.dataProvider.title
'
)
}
value
=
{
<
a
href
=
{
`
${
publicWebsiteUrl
}
/p/
${
dataset
.
owner
.
uuid
}
`
}
>
{
dataset
.
owner
.
name
}
</
a
>
}
value
=
{
dataset
.
owner
.
name
}
index
=
{
propertyIndex
++
}
/>
}
{
dataset
.
creators
&&
dataset
.
creators
.
length
>
0
&&
(
<
Property
title
=
{
t
(
'
dataset.details.creators
'
)
}
value
=
{
<>
{
dataset
.
creators
.
map
((
creat
)
=>
(
<
div
key
=
{
creat
.
id
}
><
b
>
{
creat
.
fullName
}
</
b
>
(
{
t
(
`creator.role.
${
creat
.
role
}
`
)
}
)
</
div
>
))
}
</>
}
index
=
{
propertyIndex
++
}
/>
)
}
{
dataset
.
crops
&&
dataset
.
crops
.
length
>
0
&&
<
Property
title
=
{
t
(
'
dataset.cropName
'
)
}
value
=
{
<
p
>
{
dataset
.
crops
.
join
(
'
,
'
)
}
</
p
>
}
title
=
{
t
(
'
dataset.cropName
'
)
}
value
=
{
dataset
.
crops
.
join
(
'
,
'
)
}
index
=
{
propertyIndex
++
}
/>
}
{
!!
dataset
.
accessionCount
&&
<
Property
title
=
{
t
(
'
dataset.accessionCount
'
)
}
value
=
{
<
p
>
{
dataset
.
accessionCount
}
</
p
>
}
index
=
{
propertyIndex
++
}
/>
{
dataset
.
descriptors
&&
dataset
.
descriptors
.
length
>
0
&&
<>
{
/* <h2 className="mt-4">{t('dataset.details.traits')}</h2>
<ul>
{dataset.descriptors.map((descr) => (
<li key={descr.id}><a href={`${publicWebsiteUrl}/descriptors/${descr.uuid}`}>{`${descr.title}`}</a></li>
))}
</ul> */
}
<
Property
title
=
{
t
(
'
dataset.details.traits
'
)
}
value
=
{
dataset
.
descriptors
.
map
((
descr
)
=>
descr
.
title
).
join
(
'
,
'
)
}
index
=
{
propertyIndex
++
}
/>
</>
}
{
!!
dataset
.
descriptor
Count
&&
{
!!
dataset
.
accession
Count
&&
<
Property
title
=
{
t
(
'
dataset.
trait
Count
'
)
}
value
=
{
<
p
>
{
dataset
.
descriptorCount
}
</
p
>
}
title
=
{
t
(
'
dataset.
accession
Count
'
)
}
value
=
{
dataset
.
accessionCount
}
index
=
{
propertyIndex
++
}
/>
}
{
dataset
.
locations
&&
dataset
.
locations
.
length
>
0
&&
(
<>
<
Property
title
=
{
t
(
'
dataset.locations
'
)
}
value
=
{
dataset
.
locations
.
map
((
location
)
=>
(
<
div
key
=
{
location
.
id
}
>
<
b
>
{
location
.
mapCountry
||
location
.
userCountry
||
''
}
</
b
>
{
location
.
decimalLatitude
!==
null
&&
location
.
decimalLongitude
!=
null
?
<>
(
{
location
?.
decimalLatitude
?.
toFixed
(
5
)
}
,
{
location
?.
decimalLongitude
?.
toFixed
(
5
)
}
)
</>
:
null
}
</
div
>
))
}
index
=
{
propertyIndex
++
}
/>
</>
)
}
{
!!
dataset
.
startDate
&&
<
Property
title
=
{
t
(
'
dataset.startDate
'
)
}
value
=
{
<
p
>
{
dataset
.
startDate
}
</
p
>
}
title
=
{
t
(
'
dataset.startDate
'
)
}
value
=
{
dataset
.
startDate
}
index
=
{
propertyIndex
++
}
/>
}
{
!!
dataset
.
endDate
&&
<
Property
title
=
{
t
(
'
dataset.endDate
'
)
}
value
=
{
<
p
>
{
dataset
.
endDate
}
</
p
>
}
title
=
{
t
(
'
dataset.endDate
'
)
}
value
=
{
dataset
.
endDate
}
index
=
{
propertyIndex
++
}
/>
}
{
dataset
.
language
&&
<
Property
title
=
{
t
(
'
dataset.language
'
)
}
value
=
{
<
p
>
{
dataset
.
language
}
</
p
>
}
title
=
{
t
(
'
dataset.language
'
)
}
value
=
{
dataset
.
language
}
index
=
{
propertyIndex
++
}
/>
}
...
...
@@ -133,7 +158,7 @@ const DatasetDetailsPage = ({match}: DatasetDetailsPageProps) => {
{
dataset
.
format
&&
<
Property
title
=
{
t
(
'
dataset.format
'
)
}
value
=
{
<
p
>
{
dataset
.
format
}
</
p
>
}
title
=
{
t
(
'
dataset.format
'
)
}
value
=
{
dataset
.
format
}
index
=
{
propertyIndex
++
}
/>
}
...
...
@@ -145,97 +170,6 @@ const DatasetDetailsPage = ({match}: DatasetDetailsPageProps) => {
/>
}
{
dataset
.
creators
&&
dataset
.
creators
.
length
>
0
&&
(
<>
<
Property
title
=
{
t
(
'
dataset.details.creators
'
)
}
value
=
{
<
ul
>
{
dataset
.
creators
.
map
((
creat
)
=>
(
<
li
key
=
{
creat
.
id
}
><
b
>
{
creat
.
role
}
</
b
>
{
`
${
creat
.
fullName
}
-
${
creat
.
instituteAddress
}
`
}
</
li
>
))
}
</
ul
>
}
index
=
{
propertyIndex
++
}
/>
</>
)
}
{
dataset
.
locations
&&
dataset
.
locations
.
length
>
0
&&
(
<>
<
h2
className
=
"mt-4"
>
{
t
(
'
dataset.details.locations
'
)
}
</
h2
>
<
Property
title
=
{
t
(
'
dataset.locations
'
)
}
value
=
{
<
ul
>
{
dataset
.
locations
.
map
((
location
)
=>
(
<
li
key
=
{
location
.
id
}
>
<
b
>
{
`
${
location
.
mapCountry
||
location
.
userCountry
}
`
}
</
b
>
(
{
location
.
decimalLatitude
.
toFixed
(
2
)
}
;
{
location
.
decimalLongitude
.
toFixed
(
2
)
}
)
</
li
>
))
}
</
ul
>
}
index
=
{
propertyIndex
++
}
/>
</>
)
}
{
dataset
.
owner
&&
(
<>
<
h2
className
=
"mt-4"
>
{
t
(
'
dataset.details.dataProvider
'
)
}
</
h2
>
{
dataset
.
owner
.
name
&&
<
Property
title
=
{
t
(
'
dataset.dataProvider.name
'
)
}
value
=
{
dataset
.
owner
.
name
}
index
=
{
propertyIndex
++
}
/>
}
{
dataset
.
owner
.
email
&&
<
Property
title
=
{
t
(
'
dataset.dataProvider.email
'
)
}
value
=
{
dataset
.
owner
.
email
}
index
=
{
propertyIndex
++
}
/>
}
{
dataset
.
owner
.
address
&&
<
Property
title
=
{
t
(
'
dataset.dataProvider.address
'
)
}
value
=
{
dataset
.
owner
.
address
}
index
=
{
propertyIndex
++
}
/>
}
</>
)
}
<
h2
className
=
"mt-4"
>
{
t
(
'
dataset.details.metadata
'
)
}
</
h2
>
<
Property
title
=
{
t
(
'
dataset.uuid
'
)
}
value
=
{
`urn:uuid:
${
dataset
.
uuid
}
`
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
dataset.createDate
'
)
}
value
=
{
dataset
.
createdDate
}
index
=
{
propertyIndex
++
}
/>
<
Property
title
=
{
t
(
'
dataset.lastModified
'
)
}
value
=
{
dataset
.
lastModifiedDate
}
index
=
{
propertyIndex
++
}
/>
{
dataset
.
descriptors
&&
dataset
.
descriptors
.
length
>
0
&&
<
Property
title
=
{
t
(
'
dataset.descriptors
'
)
}
value
=
{
<
ul
>
{
dataset
.
descriptors
.
map
((
descr
)
=>
(
<
li
key
=
{
descr
.
id
}
><
a
href
=
{
`
${
publicWebsiteUrl
}
/descriptors/
${
descr
.
uuid
}
`
}
>
{
`
${
descr
.
title
}
`
}
</
a
></
li
>
))
}
</
ul
>
}
index
=
{
propertyIndex
++
}
/>
}
{
accessions
&&
accessions
.
length
>
0
&&
(
<>
<
h2
className
=
"mt-4"
>
{
t
(
'
dataset.details.accessions
'
)
}
</
h2
>
...
...
src/dataset/DatasetListPage.tsx
View file @
d861574d
...
...
@@ -81,8 +81,8 @@ const DatasetListPage = ({location}: IDatasetListPageProps) => {
<
tr
>
<
th
>
{
t
(
'
dataset.title
'
)
}
</
th
>
<
th
>
{
t
(
'
dataset.crops
'
)
}
</
th
>
<
th
>
{
t
(
'
dataset.traitCount
'
)
}
</
th
>
<
th
>
{
t
(
'
dataset.accessionCount
'
)
}
</
th
>
<
th
>
{
t
([
'
dataset.description
'
,
'
_.description
'
])
}
</
th
>
</
tr
>
</
thead
>
<
tbody
>
...
...
@@ -90,8 +90,8 @@ const DatasetListPage = ({location}: IDatasetListPageProps) => {
<
tr
key
=
{
d
.
id
}
>
<
td
><
Link
to
=
{
`/datasets/
${
d
.
uuid
}
`
}
>
{
d
.
title
}
</
Link
></
td
>
<
td
>
{
d
.
crops
&&
d
.
crops
.
length
>
0
&&
<
p
>
{
d
.
crops
.
join
(
'
,
'
)
}
</
p
>
}
</
td
>
<
td
>
{
d
.
descriptorCount
}
</
td
>
<
td
>
{
d
.
accessionCount
}
</
td
>
<
td
>
{
d
.
description
}
</
td
>
</
tr
>
))
}
</
tbody
>
...
...
src/locales/en/translations.json
View file @
d861574d
...
...
@@ -257,6 +257,13 @@
"locations"
:
"Location information"
}
},
"creator"
:
{
"role"
:
{
"COLLECTOR"
:
"Data collector"
,
"CURATOR"
:
"Curator"
,
"MANAGER"
:
"Manager"
}
},
"subset"
:
{
"model"
:
"Subset"
,
"model_plural"
:
"Subset"
,
...
...
src/subset/SubsetDetailsPage.tsx
View file @
d861574d
import
React
from
'
react
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
useTranslation
}
from
'
react-i18next
'
;
import
{
useSelector
}
from
"
react-redux
"
;
//
import {useSelector} from "react-redux";
// model
import
Subset
from
"
@genesys-pgr/client/model/subset/Subset
"
;
...
...
@@ -29,7 +29,7 @@ const SubsetDetailsPage = ({match}: SubsetDetailsPageProps) => {
const
[
subset
,
setSubset
]
=
React
.
useState
<
Subset
>
();
const
[
accessions
,
setAccessions
]
=
React
.
useState
<
Accession
[]
>
();
// redux
const
publicWebsiteUrl
=
useSelector
((
state
:
any
)
=>
state
?.
apiInfo
?.
apiInfo
?.
publicWebsiteUrl
);
//
const publicWebsiteUrl = useSelector((state: any) => state?.apiInfo?.apiInfo?.publicWebsiteUrl);
const
loadData
=
React
.
useCallback
((
uuid
:
string
):
Promise
<
void
>
=>
{
return
SubsetService
...
...
@@ -65,68 +65,55 @@ const SubsetDetailsPage = ({match}: SubsetDetailsPageProps) => {
return
(
<>
<
PageTitle
title
=
{
t
(
'
pagetitle.subset
'
,
{
subsetTitle
:
subset
.
title
})
}
/>
<
div
className
=
"d-flex justify-content-between align-items-center"
>
<
h1
>
{
subset
.
title
}
</
h1
>
</
div
>
<
h1
>
{
subset
.
title
}
</
h1
>
{
subset
.
title
&&
<
Property
title
=
{
t
(
'
subset.title
'
)
}
value
=
{
<
p
>
{
subset
.
title
}
</
p
>
}
index
=
{
propertyIndex
++
}
/>
}
{
subset
.
description
&&
<
p
>
{
subset
.
description
}
</
p
>
}
{
subset
.
description
&&
{
subset
.
institute
&&
<
Property
title
=
{
t
(
'
subset.description
'
)
}
value
=
{
<
p
>
{
subset
.
description
}
</
p
>
}
title
=
{
t
(
'
subset.institute
'
)
}
value
=
{
subset
.
institute
.
fullName
}
index
=
{
propertyIndex
++
}
/>
}
{
subset
.
creators
&&
subset
.
creators
.
length
>
0
&&
(
<>
<
Property
title
=
{
t
(
'
subset.creators
'
)
}
value
=
{
<>
{
subset
.
creators
.
map
((
creat
)
=>
(
<
div
key
=
{
creat
.
id
}
><
b
>
{
creat
.
fullName
}
</
b
>
(
{
t
(
`creator.role.
${
creat
.
role
}
`
)
}
)
</
div
>
))
}
</>
}
index
=
{
propertyIndex
++
}
/>
</>
)
}
{
subset
.
accessionCount
&&
<
Property
title
=
{
t
(
'
subset.accessionCount
'
)
}
value
=
{
<
p
>
{
subset
.
accessionCount
}
</
p
>
}
title
=
{
t
(
'
subset.accessionCount
'
)
}
value
=
{
subset
.
accessionCount
}
index
=
{
propertyIndex
++
}
/>
}
{
subset
.
crops
&&
subset
.
crops
.
length
>
0
&&
<
Property
title
=
{
t
(
'
subset.crops
'
)
}
value
=
{
<
p
>
{
subset
.
crops
.
join
(
'
,
'
)
}
</
p
>
}
index
=
{
propertyIndex
++
}
/>
}
{
subset
.
institute
&&
<
Property
title
=
{
t
(
'
subset.institute
'
)
}
value
=
{
<
a
href
=
{
`
${
publicWebsiteUrl
}
/wiews/
${
subset
.
institute
.
code
}
`
}
>
{
subset
.
institute
.
fullName
}
</
a
>
}
title
=
{
t
(
'
subset.crops
'
)
}
value
=
{
subset
.
crops
.
join
(
'
,
'
)
}
index
=
{
propertyIndex
++
}
/>
}
{
subset
.
source
&&
<
Property
title
=
{
t
(
'
subset.
institut
e
'
)
}
value
=
{
<
a
href
=
{
subset
.
source
}
>
{
subset
.
source
}
</
a
>
}
title
=
{
t
(
'
subset.
sourc
e
'
)
}
value
=
{
<
a
href
=
{
subset
.
source
}
>
{
subset
.
source
}
</
a
>
}
index
=
{
propertyIndex
++
}
/>
}
{
subset
.
creators
&&
subset
.
creators
.
length
>
0
&&
(
<>
<
Property
title
=
{
t
(
'
subset.creators
'
)
}
value
=
{
<
ul
>
{
subset
.
creators
.
map
((
creat
)
=>
(
<
li
key
=
{
creat
.
id
}
><
b
>
{
creat
.
role
}
</
b
>
{
`
${
creat
.
fullName
}
-
${
creat
.
instituteAddress
}
`
}
</
li
>
))
}
</
ul
>
}
index
=
{
propertyIndex
++
}
/>
</>
)
}
{
accessions
&&
accessions
.
length
>
0
&&
(
<>
<
h2
className
=
"mt-4"
>
{
t
(
'
subset.details.accessions
'
)
}
</
h2
>
...
...
src/subset/SubsetListPage.tsx
View file @
d861574d
...
...
@@ -29,7 +29,7 @@ const SubsetListPage = ({location}: ISubsetListPageProps) => {
const
{
t
}
=
useTranslation
();
// redux
const
publicWebsiteUrl
=
useSelector
((
state
:
any
)
=>
state
?.
apiInfo
?.
apiInfo
?.
publicWebsiteUrl
);
//
const publicWebsiteUrl = useSelector((state: any) => state?.apiInfo?.apiInfo?.publicWebsiteUrl);
const
appConfig
:
Config
=
useSelector
((
state
:
any
)
=>
state
?.
appConfig
?.
config
);
// state
...
...
@@ -85,18 +85,18 @@ const SubsetListPage = ({location}: ISubsetListPageProps) => {
<
th
>
{
t
(
'
subset.title
'
)
}
</
th
>
<
th
>
{
t
(
'
subset.crops
'
)
}
</
th
>
<
th
>
{
t
(
'
subset.accessionCount
'
)
}
</
th
>
<
th
>
{
t
(
'
subset.institute
'
)
}
</
th
>
<
th
>
{
t
(
'
subset.
source
'
)
}
</
th
>
{
/*
<th>{t('subset.institute')}</th>
*/
}
<
th
>
{
t
(
[
'
subset.
description
'
,
'
_.description
'
]
)
}
</
th
>
</
tr
>
</
thead
>
<
tbody
>
{
subsets
.
content
.
map
((
s
)
=>
(
<
tr
key
=
{
s
.
id
}
>
<
td
><
Link
to
=
{
`/subsets/
${
s
.
uuid
}
`
}
>
{
s
.
title
}
</
Link
></
td
>
<
td
>
{
s
.
crops
&&
s
.
crops
.
length
>
0
&&
s
.
crops
.
map
((
cr
)
=>
cr
.
name
)
.
join
(
'
,
'
)
}
</
td
>
<
td
>
{
s
?
.
crops
.
join
(
'
,
'
)
}
</
td
>
<
td
>
{
s
.
accessionCount
}
</
td
>
<
td
><
a
href
=
{
`
${
publicWebsiteUrl
}
/wiews/
${
s
.
wiewsCode
}
`
}
>
{
s
.
wiewsCode
}
</
a
></
td
>
<
td
>
<
a
href
=
{
s
.
source
}
>
{
s
.
source
}
</
a
>
</
td
>
{
/*
<td><a href={`${publicWebsiteUrl}/wiews/${s.wiewsCode}`}>{s.wiewsCode}</a></td>
*/
}
<
td
>
{
s
?.
description
}
</
td
>
</
tr
>
))
}
</
tbody
>
...
...
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