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 Catalog
catalog.genesys-pgr.org
Commits
546bc6b6
Commit
546bc6b6
authored
Feb 13, 2018
by
Matija Obreza
Browse files
GUI fixes
- Number rendering in Pagination - Dataset details display
parent
c288077e
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/ui/catalog/Properties.tsx
View file @
546bc6b6
...
...
@@ -23,6 +23,9 @@ const styles = (theme) => ({
},
/* tslint:enable */
},
propertiesValue
:
{
overflowX
:
'
hidden
'
as
'
hidden
'
,
},
});
interface
IItemProps
extends
React
.
ClassAttributes
<
any
>
{
...
...
@@ -31,14 +34,14 @@ interface IItemProps extends React.ClassAttributes<any> {
// children: any;
}
class
PropertiesItem1
extends
React
.
Component
<
IItemProps
&
WithStyles
<
'
propertiesContainer
'
|
'
propertiesRow
'
>
,
any
>
{
class
PropertiesItem1
extends
React
.
Component
<
IItemProps
&
WithStyles
<
'
propertiesContainer
'
|
'
propertiesRow
'
|
'
propertiesValue
'
>
,
any
>
{
public
render
()
{
const
{
title
,
classes
,
children
}
=
this
.
props
;
return
(
<
Grid
container
spacing
=
{
0
}
className
=
{
classes
.
propertiesRow
}
>
<
Grid
item
xs
=
{
6
}
md
=
{
3
}
className
=
"font-bold p-halfrem"
>
{
title
}
</
Grid
>
<
Grid
item
xs
=
{
6
}
md
=
{
9
}
className
=
"
p-halfrem
"
>
{
children
}
</
Grid
>
<
Grid
item
xs
=
{
4
}
md
=
{
3
}
className
=
"font-bold p-halfrem"
>
{
title
}
</
Grid
>
<
Grid
item
xs
=
{
8
}
md
=
{
9
}
className
=
{
`
${
classes
.
propertiesValue
}
p-halfrem
`
}
>
{
children
}
</
Grid
>
</
Grid
>
);
}
...
...
@@ -49,7 +52,7 @@ interface IProps extends React.ClassAttributes<any> {
// children: any;
}
class
Properties1
extends
React
.
Component
<
IProps
&
WithStyles
<
'
propertiesContainer
'
|
'
propertiesRow
'
>
,
any
>
{
class
Properties1
extends
React
.
Component
<
IProps
&
WithStyles
<
'
propertiesContainer
'
|
'
propertiesRow
'
|
'
propertiesValue
'
>
,
any
>
{
public
render
()
{
const
{
children
,
classes
}
=
this
.
props
;
return
(
...
...
src/ui/common/Number.tsx
0 → 100644
View file @
546bc6b6
import
*
as
React
from
'
react
'
;
// Print a number
// TBD maybe use l10n instead?
export
default
function
Number
({
value
,
}:
{
value
:
number
})
{
if
(
value
!==
null
)
{
return
<
span
>
{
value
.
toLocaleString
()
}
</
span
>;
}
else
{
return
<
span
>
—
</
span
>;
}
}
src/ui/common/pagination/index.tsx
View file @
546bc6b6
...
...
@@ -12,7 +12,7 @@ import compose from 'recompose/compose';
import
withWidth
from
'
material-ui/utils/withWidth
'
;
import
Hidden
from
'
material-ui/Hidden
'
;
import
{
Breakpoint
}
from
'
material-ui/styles/createBreakpoints
'
;
import
Number
from
'
ui/common/Number
'
;
import
{
Page
}
from
'
model/common.model
'
;
interface
IPaginationComponentProps
extends
React
.
ClassAttributes
<
any
>
{
...
...
@@ -157,7 +157,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
<
Grid
container
spacing
=
{
0
}
className
=
{
classes
.
root
}
>
<
Grid
item
xs
=
{
12
}
>
<
div
className
=
{
`
${
classes
.
floatLeft
}
${
classes
.
bold
}
${
classes
.
textPagination
}
`
}
>
{
pageObj
?
pageObj
.
totalElements
:
0
}
{
displayName
||
'
items
'
}
<
Number
value
=
{
pageObj
?
pageObj
.
totalElements
:
0
}
/>
{
displayName
||
'
items
'
}
</
div
>
<
Select
value
=
{
pageObj
?
pageObj
.
size
:
10
}
...
...
@@ -277,7 +277,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
</
Button
>
</
Hidden
>
<
Hidden
implementation
=
"css"
only
=
{
mobile
}
>
<
span
className
=
{
classes
.
verticalAlign
}
>
of
{
pageObj
?
pageObj
.
totalPages
:
0
}
pages
</
span
>
<
span
className
=
{
classes
.
verticalAlign
}
>
of
<
Number
value
=
{
pageObj
?
pageObj
.
totalPages
:
0
}
/>
pages
</
span
>
</
Hidden
>
</
div
>
</
Grid
>
...
...
src/ui/pages/dataset/c/DatasetDisplay.tsx
View file @
546bc6b6
...
...
@@ -20,7 +20,6 @@ import { DatasetLink, DescriptorLink } from 'ui/catalog/Links';
import
Summary
from
'
./Summary
'
;
import
LocationMap
from
'
./LocationMap
'
;
import
Button
from
'
material-ui/Button
'
;
import
Hidden
from
'
material-ui/Hidden
'
;
import
{
Properties
,
PropertiesItem
}
from
'
ui/catalog/Properties
'
;
import
Grid
from
'
material-ui/Grid
'
;
import
Divider
from
'
material-ui/Divider
'
;
...
...
@@ -225,36 +224,29 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<
Grid
container
spacing
=
{
0
}
>
<
Grid
item
xs
=
{
12
}
md
=
{
8
}
lg
=
{
9
}
className
=
"p-10"
>
<
Section
title
=
"Dataset metadata"
>
<
div
className
=
"pt-15 pb-15 pl-20 pr-20"
>
<
h4
className
=
"font-bold m-0"
>
Creators
</
h4
>
{
dataset
.
creators
&&
dataset
.
creators
.
length
>
0
&&
<
div
>
<
div
className
=
"pt-15 pb-15 pl-20 pr-20"
>
<
h4
className
=
"font-bold m-0"
>
Creators
</
h4
>
</
div
>
<
Divider
/>
<
Grid
container
spacing
=
{
0
}
className
=
"p-20"
>
<
Grid
item
xs
=
{
12
}
>
<
Properties
>
{
dataset
.
creators
&&
dataset
.
creators
.
map
((
e
:
Creator
,
i
)
=>
(
<
PropertiesItem
title
=
{
e
.
role
}
key
=
{
e
.
id
}
>
<
p
><
b
>
{
e
.
fullName
}
</
b
></
p
>
{
e
.
institutionalAffiliation
&&
<
p
>
{
e
.
institutionalAffiliation
}
</
p
>
}
{
e
.
email
&&
<
div
><
a
href
=
{
`mailto:
${
e
.
email
}
`
}
>
{
e
.
email
}
</
a
></
div
>
}
</
PropertiesItem
>
))
}
</
Properties
>
</
Grid
>
</
Grid
>
<
Divider
/>
</
div
>
<
Divider
/>
<
Grid
container
spacing
=
{
0
}
className
=
"p-20"
>
<
Grid
item
xs
=
{
12
}
>
{
dataset
.
creators
&&
dataset
.
creators
.
map
((
e
:
Creator
,
i
)
=>
(
<
Grid
container
spacing
=
{
0
}
key
=
{
i
}
className
=
{
`
${
classes
.
dataContainer
}
${
classes
.
grayRowsOdd
}
`
}
>
<
Grid
item
xs
=
{
12
}
md
=
{
3
}
>
<
h3
className
=
{
`font-bold
${
classes
.
margin1
}
${
classes
.
gray
}
${
classes
.
grayTitleSmall
}
`
}
>
{
`
${
e
.
fullName
}
`
}
</
h3
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
4
}
className
=
{
`
${
classes
.
margin1
}
${
classes
.
gray
}
`
}
>
<
a
href
=
{
`mailto:
${
e
.
email
}
`
}
className
=
{
`
${
classes
.
grayTitleA
}
`
}
>
{
e
.
email
}
</
a
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
5
}
className
=
{
`
${
classes
.
margin1
}
${
classes
.
gray
}
`
}
>
<
p
className
=
{
`
${
classes
.
grayTitleSmall
}
${
classes
.
pdTop0
}
`
}
>
{
e
.
institutionalAffiliation
}
</
p
>
</
Grid
>
</
Grid
>
))
}
</
Grid
>
</
Grid
>
<
Divider
/>
}
<
div
className
=
"pt-15 pb-15 pl-20 pr-20"
>
<
h4
className
=
"font-bold m-0"
>
Dataset use and licensing
</
h4
>
</
div
>
...
...
@@ -271,6 +263,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</
Properties
>
</
Grid
>
}
<
Divider
/>
<
div
className
=
"pt-15 pb-15 pl-20 pr-20"
>
<
h4
className
=
"font-bold m-0"
>
...
...
@@ -280,32 +273,22 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<
Divider
/>
<
Grid
container
spacing
=
{
0
}
className
=
"p-20"
>
<
Grid
item
xs
=
{
12
}
>
<
Properties
>
{
dataset
.
repositoryFiles
&&
dataset
.
repositoryFiles
.
map
((
e
:
RepositoryFile
,
i
)
=>
(
<
Grid
container
spacing
=
{
0
}
key
=
{
i
}
className
=
{
`
${
classes
.
dataContainer
}
${
classes
.
grayRowsEven
}
`
}
>
<
Grid
item
xs
=
{
3
}
className
=
{
`
${
classes
.
dataName
}
`
}
>
<
h3
className
=
{
`
${
classes
.
gray
}
${
classes
.
grayTitleBig
}
`
}
>
{
e
.
title
||
'
Dataset file
'
}
</
h3
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
lg
=
{
9
}
className
=
{
`
${
classes
.
gray
}
${
classes
.
rightTextWrapper
}
${
classes
.
centerAlign
}
`
}
>
<
Hidden
implementation
=
"css"
mdDown
>
{
e
.
originalFilename
}
</
Hidden
>
<
Hidden
implementation
=
"css"
mdDown
>
<
a
href
=
{
`/proxy/api/v0/repository/download/
${
e
.
uuid
}
`
}
><
Button
raised
component
=
"span"
className
=
{
`
${
classes
.
buttonGreen
}
${
classes
.
button
}
`
}
>
Download
</
Button
></
a
>
</
Hidden
>
<
Hidden
implementation
=
"css"
mdUp
>
<
a
href
=
{
`/proxy/api/v0/repository/download/
${
e
.
uuid
}
`
}
><
Button
raised
component
=
"span"
className
=
{
`
${
classes
.
buttonGreen
}
${
classes
.
button
}
`
}
>
Download dataset
</
Button
></
a
>
</
Hidden
>
</
Grid
>
</
Grid
>
dataset
.
repositoryFiles
&&
dataset
.
repositoryFiles
.
map
((
e
:
RepositoryFile
)
=>
(
<
PropertiesItem
key
=
{
e
.
uuid
}
title
=
{
<
a
href
=
{
`/proxy/api/v0/repository/download/
${
e
.
uuid
}
`
}
>
<
Button
raised
component
=
"span"
className
=
{
`
${
classes
.
buttonGreen
}
${
classes
.
button
}
`
}
>
Download
</
Button
>
</
a
>
}
>
<
p
>
{
e
.
title
||
'
Dataset file
'
}
</
p
>
<
p
>
{
e
.
originalFilename
}
</
p
>
</
PropertiesItem
>
))
}
</
Properties
>
</
Grid
>
</
Grid
>
<
Divider
/>
...
...
@@ -330,36 +313,6 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</
Grid
>
</
Grid
>
<
Divider
/>
<
div
className
=
"pt-15 pb-15 pl-20 pr-20"
>
<
h4
className
=
"font-bold m-0"
>
Creators
</
h4
>
</
div
>
<
Divider
/>
<
Grid
container
spacing
=
{
0
}
className
=
"p-20"
>
<
Grid
item
xs
=
{
12
}
>
{
dataset
.
creators
&&
dataset
.
creators
.
map
((
e
:
Creator
,
i
)
=>
(
<
Grid
container
spacing
=
{
0
}
key
=
{
i
}
className
=
{
`
${
classes
.
dataContainer
}
${
classes
.
grayRowsOdd
}
`
}
>
<
Grid
item
xs
=
{
12
}
md
=
{
3
}
>
<
h3
className
=
{
`font-bold
${
classes
.
margin1
}
${
classes
.
gray
}
${
classes
.
grayTitleSmall
}
`
}
>
{
`
${
e
.
fullName
}
`
}
</
h3
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
4
}
className
=
{
`
${
classes
.
margin1
}
${
classes
.
gray
}
`
}
>
<
a
href
=
{
`mailto:
${
e
.
email
}
`
}
className
=
{
`
${
classes
.
grayTitleA
}
`
}
>
{
e
.
email
}
</
a
>
</
Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
5
}
className
=
{
`
${
classes
.
margin1
}
${
classes
.
gray
}
`
}
>
<
p
className
=
{
`
${
classes
.
grayTitleSmall
}
${
classes
.
pdTop0
}
`
}
>
{
e
.
institutionalAffiliation
}
</
p
>
</
Grid
>
</
Grid
>
))
}
</
Grid
>
</
Grid
>
<
Divider
/>
<
div
className
=
"pt-15 pb-15 pl-20 pr-20"
>
<
h4
className
=
"font-bold m-0"
>
Other Metadata
...
...
@@ -396,7 +349,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</
Grid
>
)
}
{
dataset
.
descriptors
&&
(
{
dataset
.
descriptors
&&
dataset
.
descriptors
.
length
>
0
&&
(
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
lg
=
{
12
}
className
=
"p-10"
>
<
Section
title
=
"Traits observed"
>
<
List
>
...
...
@@ -411,7 +364,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
</
Grid
>
)
}
{
dataset
.
accessionIdentifiers
&&
(
{
dataset
.
accessionIdentifiers
&&
dataset
.
accessionIdentifiers
.
length
>
0
&&
(
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
lg
=
{
12
}
className
=
"p-10"
>
<
Section
title
=
"Accessions evaluated"
>
<
div
className
=
"p-20"
>
...
...
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