Commit c4ff7a8c authored by Loic Huder's avatar Loic Huder

Date to filter investigations is now persisted in the URL

parent 868122d9
Pipeline #32572 passed with stage
in 4 minutes and 26 seconds
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}
/>
......
import React from 'react';
import { Button, Glyphicon } from 'react-bootstrap';
import { Button, Grid, Row, Col, Glyphicon } 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>;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment