Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
Datahub
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
93
Issues
93
List
Boards
Labels
Service Desk
Milestones
Jira
Jira
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ICAT
Datahub
Commits
c4ff7a8c
Commit
c4ff7a8c
authored
Sep 02, 2020
by
Loic Huder
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Date to filter investigations is now persisted in the URL
parent
868122d9
Pipeline
#32572
passed with stage
in 4 minutes and 26 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
165 additions
and
133 deletions
+165
-133
src/components/Investigation/InvestigationTable.js
src/components/Investigation/InvestigationTable.js
+53
-119
src/components/Investigation/utils.js
src/components/Investigation/utils.js
+112
-14
No files found.
src/components/Investigation/InvestigationTable.js
View file @
c4ff7a8c
import
React
,
{
useState
}
from
'
react
'
;
import
{
Col
,
Glyphicon
,
Grid
,
Row
}
from
'
react-bootstrap
'
;
import
React
from
'
react
'
;
import
{
Glyphicon
}
from
'
react-bootstrap
'
;
import
moment
from
'
moment
'
;
import
{
DATASET_COUNT
,
FILE_COUNT
,
VOLUME
,
}
from
'
../../constants/parameterTypes
'
;
import
DOIBadge
from
'
../doi/DOIBadge
'
;
import
ResponsiveTable
from
'
../Table/ResponsiveTable
'
;
import
InvestigationWidget
from
'
./InvestigationWidget
'
;
import
{
beamlineFormatter
,
dateFormatter
,
nameFormatter
}
from
'
./utils
'
;
import
{
stringifyBytesSize
}
from
'
../../helpers
'
;
import
{
beamlineFormatter
,
dateFormatter
,
nameFormatter
,
experimentFormatter
,
datasetCountFormatter
,
fileCountFormatter
,
}
from
'
./utils
'
;
import
InvestigationDateFilter
from
'
./InvestigationDateFilter
'
;
import
styles
from
'
./InvestigationTable.module.css
'
;
function
volumeFormatter
(
cell
,
investigation
)
{
const
volume
=
investigation
.
parameters
.
find
((
o
)
=>
o
.
name
===
VOLUME
);
if
(
volume
&&
volume
.
value
&&
volume
.
value
!==
0
)
{
return
stringifyBytesSize
(
volume
.
value
);
}
}
function
experimentFormatter
(
cell
,
investigation
,
rowIndex
,
extraData
)
{
return
(
<
Grid
style
=
{{
textAlign
:
'
center
'
}}
>
<
Row
className
=
"
show-grid
"
>
<
Col
xs
=
{
12
}
md
=
{
12
}
>
{
nameFormatter
(
investigation
,
extraData
.
props
.
withProposalLinks
,
extraData
.
props
.
user
.
isAdministrator
)}
<
/Col
>
<
/Row
>
<
Row
className
=
"
show-grid
"
>
<
Col
xs
=
{
12
}
md
=
{
12
}
>
<
span
style
=
{{
fontWeight
:
'
bold
'
}}
>
{
beamlineFormatter
(
investigation
,
investigation
.
visitId
)}
<
/span
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
show-grid
"
>
<
Col
xs
=
{
12
}
>
<
div
style
=
{{
color
:
'
gray
'
,
fontStyle
:
'
italic
'
}}
>
{
investigation
.
summary
}
<
/div
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
show-grid
"
style
=
{{
fontSize
:
10
}}
>
<
Col
xs
=
{
12
}
>
<
DOIBadge
doi
=
{
investigation
.
doi
}
/
>
<
/Col
>
<
/Row
>
<
/Grid
>
);
}
/**
* This looks into the parameters of the investigation
*/
function
getParameter
(
investigation
,
parameterName
)
{
const
parameter
=
investigation
.
parameters
.
find
(
(
o
)
=>
o
.
name
===
parameterName
);
if
(
parameter
&&
parameter
.
value
)
{
return
parameter
.
value
;
}
}
function
fileCountFormatter
(
cell
,
investigation
)
{
const
fileCount
=
getParameter
(
investigation
,
FILE_COUNT
);
if
(
!
fileCount
)
{
return
undefined
;
}
return
(
<
span
style
=
{{
width
:
50
,
textAlign
:
'
right
'
,
float
:
'
left
'
}}
>
{
fileCount
}
<
/span
>
);
}
function
datasetCountFormatter
(
cell
,
investigation
)
{
const
datasetCount
=
investigation
.
parameters
.
find
(
(
o
)
=>
o
.
name
===
DATASET_COUNT
);
if
(
datasetCount
&&
datasetCount
.
value
)
{
return
(
<>
<
span
style
=
{{
width
:
40
,
textAlign
:
'
right
'
,
float
:
'
left
'
}}
>
{
datasetCount
.
value
}
<
/span
>
<
span
style
=
{{
width
:
70
,
marginLeft
:
5
,
float
:
'
left
'
,
fontStyle
:
'
italic
'
,
color
:
'
#999
'
,
fontSize
:
12
,
}}
>
({
volumeFormatter
(
cell
,
investigation
)})
<
/span
>
<
/
>
);
}
}
import
{
useHistory
,
useLocation
}
from
'
react-router
'
;
import
{
useQuery
}
from
'
../../helpers/hooks
'
;
function
getLgHeaderStyle
(
width
,
hidden
)
{
return
{
...
...
@@ -143,13 +51,10 @@ function getColumns(props) {
{
text
:
'
Proposal
'
,
dataField
:
'
name
'
,
formatter
:
(
_
,
investigation
,
__
,
props
)
=>
nameFormatter
(
investigation
,
props
.
withProposalLinks
,
props
.
user
.
isAdministrator
),
formatExtraData
:
props
,
formatter
:
(
_
,
investigation
,
__
,
showLink
)
=>
nameFormatter
(
investigation
,
showLink
),
formatExtraData
:
props
.
withProposalLinks
||
props
.
user
.
isUserAdministrator
,
sort
:
true
,
hidden
:
false
,
headerStyle
:
()
=>
({
width
:
'
50%
'
,
textAlign
:
'
center
'
}),
...
...
@@ -231,7 +136,32 @@ function getColumns(props) {
function
InvestigationTable
(
props
)
{
const
{
expanded
,
user
,
investigations
}
=
props
;
const
[
selectedDate
,
setSelectedDate
]
=
useState
();
const
history
=
useHistory
();
const
query
=
useQuery
();
const
location
=
useLocation
();
const
dateForFiltering
=
query
.
has
(
'
date
'
)
?
moment
(
query
.
get
(
'
date
'
),
moment
.
HTML5_FMT
.
DATE
)
:
undefined
;
function
handleDateChange
(
date
)
{
const
newQuery
=
new
URLSearchParams
(
query
);
if
(
date
)
{
newQuery
.
set
(
'
date
'
,
moment
(
date
).
format
(
moment
.
HTML5_FMT
.
DATE
));
}
else
{
newQuery
.
delete
(
'
date
'
);
}
history
.
replace
(
`
${
location
.
pathname
}
?
${
newQuery
.
toString
()}
`
);
}
function
handleDateClear
()
{
const
newQuery
=
new
URLSearchParams
(
query
);
newQuery
.
delete
(
'
date
'
);
history
.
replace
(
`
${
location
.
pathname
}
?
${
newQuery
.
toString
()}
`
);
}
const
expandRow
=
{
showExpandColumn
:
true
,
...
...
@@ -265,15 +195,19 @@ function InvestigationTable(props) {
),
};
function
dateFilter
(
investigation
)
{
function
isInvestigationMatching
(
investigation
)
{
if
(
!
dateForFiltering
)
{
return
true
;
}
return
investigation
.
endDate
?
selectedDate
.
isBetween
(
?
dateForFiltering
.
isBetween
(
investigation
.
startDate
,
investigation
.
endDate
,
'
day
'
,
'
[]
'
)
:
selectedDate
.
isSame
(
investigation
.
startDate
,
'
day
'
);
:
dateForFiltering
.
isSame
(
investigation
.
startDate
,
'
day
'
);
}
return
(
...
...
@@ -281,13 +215,13 @@ function InvestigationTable(props) {
<
div
className
=
{
styles
.
wrapper
}
>
<
InvestigationDateFilter
rootClassName
=
{
styles
.
filter
}
value
=
{
selectedDate
&&
selectedDate
.
toDate
()}
onDayChange
=
{
(
date
)
=>
setSelectedDate
(
moment
(
date
))
}
onClear
=
{
()
=>
setSelectedDate
(
undefined
)
}
value
=
{
dateForFiltering
&&
dateForFiltering
.
toDate
()}
onDayChange
=
{
handleDateChange
}
onClear
=
{
handleDateClear
}
/
>
<
/div
>
<
ResponsiveTable
data
=
{
selectedDate
?
investigations
.
filter
(
dateFilter
)
:
investigations
}
data
=
{
investigations
.
filter
(
isInvestigationMatching
)
}
columns
=
{
getColumns
(
props
)}
expandRow
=
{
expandRow
}
/
>
...
...
src/components/Investigation/utils.js
View file @
c4ff7a8c
import
React
from
'
react
'
;
import
{
Button
,
Glyphicon
}
from
'
react-bootstrap
'
;
import
{
Button
,
G
rid
,
Row
,
Col
,
G
lyphicon
}
from
'
react-bootstrap
'
;
import
moment
from
'
moment
'
;
import
{
DATASET_COUNT
,
FILE_COUNT
,
VOLUME
,
}
from
'
../../constants/parameterTypes
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
{
INVESTIGATION_DATE_FORMAT
}
from
'
../../constants
'
;
import
DOIBadge
from
'
../doi/DOIBadge
'
;
import
{
stringifyBytesSize
}
from
'
../../helpers
'
;
export
function
getInstrumentName
(
investigation
)
{
if
(
!
investigation
)
{
...
...
@@ -25,20 +32,111 @@ export function beamlineFormatter(investigation, placeHolder = '') {
return
instrumentName
?
instrumentName
.
toUpperCase
()
:
placeHolder
;
}
export
function
nameFormatter
(
investigation
,
withProposalLinks
,
isUserAdministrator
)
{
if
(
withProposalLinks
||
isUserAdministrator
)
{
export
function
nameFormatter
(
investigation
,
showLink
)
{
if
(
!
showLink
)
{
return
<
span
style
=
{{
fontWeight
:
'
bold
'
}}
>
{
investigation
.
name
}
<
/span>
;
}
return
(
<
Link
to
=
{
`/investigation/
${
investigation
.
id
}
/datasets`
}
>
<
Button
bsSize
=
"
xsmall
"
style
=
{{
width
:
120
,
textAlign
:
'
left
'
}}
>
<
Glyphicon
glyph
=
"
circle-arrow-right
"
/>
<
span
style
=
{{
marginLeft
:
10
}}
>
{
investigation
.
name
}
<
/span
>
<
/Button
>
<
/Link
>
);
}
export
function
volumeFormatter
(
cell
,
investigation
)
{
const
volume
=
investigation
.
parameters
.
find
((
o
)
=>
o
.
name
===
VOLUME
);
if
(
volume
&&
volume
.
value
&&
volume
.
value
!==
0
)
{
return
stringifyBytesSize
(
volume
.
value
);
}
}
export
function
experimentFormatter
(
cell
,
investigation
,
rowIndex
,
extraData
)
{
return
(
<
Grid
style
=
{{
textAlign
:
'
center
'
}}
>
<
Row
className
=
"
show-grid
"
>
<
Col
xs
=
{
12
}
md
=
{
12
}
>
{
nameFormatter
(
investigation
,
extraData
.
props
.
withProposalLinks
||
extraData
.
props
.
user
.
isAdministrator
)}
<
/Col
>
<
/Row
>
<
Row
className
=
"
show-grid
"
>
<
Col
xs
=
{
12
}
md
=
{
12
}
>
<
span
style
=
{{
fontWeight
:
'
bold
'
}}
>
{
beamlineFormatter
(
investigation
,
investigation
.
visitId
)}
<
/span
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
show-grid
"
>
<
Col
xs
=
{
12
}
>
<
div
style
=
{{
color
:
'
gray
'
,
fontStyle
:
'
italic
'
}}
>
{
investigation
.
summary
}
<
/div
>
<
/Col
>
<
/Row
>
<
Row
className
=
"
show-grid
"
style
=
{{
fontSize
:
10
}}
>
<
Col
xs
=
{
12
}
>
<
DOIBadge
doi
=
{
investigation
.
doi
}
/
>
<
/Col
>
<
/Row
>
<
/Grid
>
);
}
/**
* This looks into the parameters of the investigation
*/
export
function
getParameter
(
investigation
,
parameterName
)
{
const
parameter
=
investigation
.
parameters
.
find
(
(
o
)
=>
o
.
name
===
parameterName
);
if
(
parameter
&&
parameter
.
value
)
{
return
parameter
.
value
;
}
}
export
function
fileCountFormatter
(
cell
,
investigation
)
{
const
fileCount
=
getParameter
(
investigation
,
FILE_COUNT
);
if
(
!
fileCount
)
{
return
undefined
;
}
return
(
<
span
style
=
{{
width
:
50
,
textAlign
:
'
right
'
,
float
:
'
left
'
}}
>
{
fileCount
}
<
/span
>
);
}
export
function
datasetCountFormatter
(
cell
,
investigation
)
{
const
datasetCount
=
investigation
.
parameters
.
find
(
(
o
)
=>
o
.
name
===
DATASET_COUNT
);
if
(
datasetCount
&&
datasetCount
.
value
)
{
return
(
<
Link
to
=
{
`/investigation/
${
investigation
.
id
}
/datasets`
}
>
<
Button
bsSize
=
"
xsmall
"
style
=
{{
width
:
120
,
textAlign
:
'
left
'
}}
>
<
Glyphicon
glyph
=
"
circle-arrow-right
"
/>
<
span
style
=
{{
marginLeft
:
10
}}
>
{
investigation
.
name
}
<
/span
>
<
/Button
>
<
/Link
>
<>
<
span
style
=
{{
width
:
40
,
textAlign
:
'
right
'
,
float
:
'
left
'
}}
>
{
datasetCount
.
value
}
<
/span
>
<
span
style
=
{{
width
:
70
,
marginLeft
:
5
,
float
:
'
left
'
,
fontStyle
:
'
italic
'
,
color
:
'
#999
'
,
fontSize
:
12
,
}}
>
({
volumeFormatter
(
cell
,
investigation
)})
<
/span
>
<
/
>
);
}
return
<
span
style
=
{{
fontWeight
:
'
bold
'
}}
>
{
investigation
.
name
}
<
/span>
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a 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