Commit 9bdbb679 authored by Alejandro De Maria Antolinos's avatar Alejandro De Maria Antolinos
Browse files

It fixes #521

parent 179af00a
Pipeline #51551 passed with stage
in 3 minutes and 29 seconds
import React from 'react';
import { Glyphicon } from 'react-bootstrap';
import moment from 'moment';
import DOIBadge from '../doi/DOIBadge';
import ResponsiveTable from '../Table/ResponsiveTable';
import InvestigationWidget from './InvestigationWidget';
import {
beamlineFormatter,
startDateFormatter,
......@@ -219,7 +217,7 @@ function InvestigationTable(props) {
const totalSize = data && data.length > 0 ? data[0].meta?.page?.total : 0;
const user = useSelector((state) => state.user);
const { sessionId, isAdministrator } = user;
const { isAdministrator } = user;
function handleStartDateChange(date) {
setStartDate(date);
......@@ -254,38 +252,6 @@ function InvestigationTable(props) {
setPage(1);
}
const expandRow = {
showExpandColumn: true,
expandColumnPosition: 'right',
expandHeaderColumnRenderer: ({ isAnyExpands }) => {
if (isAnyExpands) {
return (
<span style={{ fontSize: 18 }}>
<Glyphicon glyph="zoom-out" />
</span>
);
}
return (
<span style={{ fontSize: 18 }}>
<Glyphicon glyph="zoom-in" />
</span>
);
},
expandColumnRenderer: ({ expanded }) => {
if (expanded) {
return <Glyphicon glyph="zoom-out" />;
}
return <Glyphicon glyph="zoom-in" />;
},
renderer: (investigation) => (
<InvestigationWidget
investigation={investigation}
sessionId={sessionId}
user={user}
/>
),
};
return (
<>
<div className={styles.wrapper}>
......
import React from 'react';
import { Panel, Tab, Tabs, Well } from 'react-bootstrap';
import SamplesTable from './SamplesTable';
import ParticipantsPanel from './ParticipantsPanel';
import LoadingBoundary from '../LoadingBoundary';
function InvestigationWidget(props) {
const { investigation, user } = props;
return (
<Panel>
<Panel.Body>
<h2>{investigation.title}</h2>
<Well>
<h4>Abstract</h4>
<p>{investigation.summary}</p>
</Well>
<Tabs id="tabs">
<Tab style={{ margin: 30 }} eventKey={1} title="Participants">
<LoadingBoundary message="Loading participants...">
<ParticipantsPanel
investigationId={investigation.id}
name={user.name}
/>
</LoadingBoundary>
</Tab>
<Tab style={{ margin: 30 }} eventKey={2} title="Samples">
<LoadingBoundary message="Loading samples">
<SamplesTable investigationId={investigation.id} />
</LoadingBoundary>
</Tab>
</Tabs>
</Panel.Body>
<Panel.Footer></Panel.Footer>
</Panel>
);
}
export default InvestigationWidget;
......@@ -131,7 +131,12 @@ function ParticipantsPanel(props) {
keyField="id"
data={investigationUsers}
columns={[
{ text: 'id', dataField: 'id', hidden: true, searchable: false },
{
text: 'id',
dataField: 'id',
hidden: true,
searchable: false,
},
{
text: 'Name',
dataField: 'fullName',
......
import React from 'react';
import React, { useEffect, useRef } from 'react';
import { Badge, Glyphicon, Nav, NavItem } from 'react-bootstrap';
import { useSelector } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import { useParams } from 'react-router';
import { LinkContainer } from 'react-router-bootstrap';
import UI from '../../config/ui';
import { useResource } from 'rest-hooks';
import InvestigationResource from '../../resources/investigation';
import { setInvestigationBreadCrumbs } from '../../containers/investigation-breadcrumbs';
function TabContainerMenu(props) {
const { doi } = props;
const { isAnonymous } = useSelector((state) => state.user);
const datasetCount = useSelector((state) => state.datasets.data.length);
const { investigationId } = useParams();
const breadcrumbsList = useSelector((state) => state.breadcrumbsList);
const currentBreadcrumbsList = useRef(); // work around stale breadcrumbsList reference
currentBreadcrumbsList.current = breadcrumbsList;
const investigation = useResource(InvestigationResource.detailShape(), {
id: investigationId,
});
const dispatch = useDispatch();
useEffect(() => {
if (investigation) {
dispatch(
setInvestigationBreadCrumbs(
investigation,
currentBreadcrumbsList.current
)
);
}
}, [dispatch, investigation, currentBreadcrumbsList]); // eslint-disable-line react-hooks/exhaustive-deps
const routePrefix = `/investigation/${investigationId}`;
return (
<Nav bsStyle="tabs">
{UI.investigationContainer.isDatasetListVisible && (
<LinkContainer to={doi ? `/public/${doi}` : `${routePrefix}/datasets`}>
<NavItem eventKey="datasets" href="">
<Glyphicon glyph="list" />
<span style={{ marginLeft: 2 }}> Dataset List &nbsp;</span>
<Badge bsClass="ourBadges-m"> {datasetCount} </Badge>
</NavItem>
</LinkContainer>
)}
{!doi && (
<>
<LinkContainer to={`${routePrefix}/events`}>
<NavItem eventKey="events" href="">
<Glyphicon glyph="comment" />
<span style={{ marginLeft: 2 }}> Logbook </span>
<>
<Nav bsStyle="tabs">
{UI.investigationContainer.isDatasetListVisible && (
<LinkContainer
to={doi ? `/public/${doi}` : `${routePrefix}/datasets`}
>
<NavItem eventKey="datasets" href="">
<Glyphicon glyph="list" />
<span style={{ marginLeft: 2 }}> Dataset List &nbsp;</span>
<Badge bsClass="ourBadges-m"> {datasetCount} </Badge>
</NavItem>
</LinkContainer>
)}
{!doi && (
<>
<LinkContainer to={`${routePrefix}/events`}>
<NavItem eventKey="events" href="">
<Glyphicon glyph="comment" />
<span style={{ marginLeft: 2 }}> Logbook </span>
</NavItem>
</LinkContainer>
{UI.sampleTracking.enabled && !isAnonymous && (
<>
<LinkContainer to={`${routePrefix}/shipping`}>
<NavItem eventKey="shipping" href="">
<Glyphicon glyph="plane" />
<span style={{ marginLeft: 2 }}> Shipping </span>
</NavItem>
</LinkContainer>
</>
)}
</>
)}
{!isAnonymous && (
<>
<LinkContainer to={`${routePrefix}/participants`}>
<NavItem eventKey="shipping" href="">
<Glyphicon glyph="user" />
<span style={{ marginLeft: 2 }}> Participants </span>
</NavItem>
</LinkContainer>
{UI.sampleTracking.enabled && !isAnonymous && (
<>
<LinkContainer to={`${routePrefix}/shipping`}>
<NavItem eventKey="shipping" href="">
<Glyphicon glyph="plane" />
<span style={{ marginLeft: 2 }}> Shipping </span>
</NavItem>
</LinkContainer>
</>
)}
</>
)}
<>
<LinkContainer to={`${routePrefix}/participants`}>
<NavItem eventKey="shipping" href="">
<Glyphicon glyph="user" />
<span style={{ marginLeft: 2 }}> Participants </span>
</NavItem>
</LinkContainer>
</>
</Nav>
<LinkContainer to={`${routePrefix}/samples`}>
<NavItem eventKey="shipping" href="">
<Glyphicon glyph="user" />
<span style={{ marginLeft: 2 }}> Samples </span>
</NavItem>
</LinkContainer>
</>
)}
</Nav>
</>
);
}
......
import React, { useEffect, useRef } from 'react';
import React, { useEffect } from 'react';
import { Col, Grid, Row, Alert } from 'react-bootstrap';
import { useParams } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';
......@@ -9,7 +9,6 @@ import PageNotFound from './PageNotFound';
import { fetchDatasetsByInvestigationId } from '../actions/datasets';
import { useResource } from 'rest-hooks';
import InvestigationResource from '../resources/investigation';
import { setInvestigationBreadCrumbs } from './investigation-breadcrumbs';
function DatasetsPage() {
const { investigationId } = useParams();
......@@ -19,32 +18,13 @@ function DatasetsPage() {
const sessionId = useSelector((state) => state.user.sessionId);
const datasets = useSelector((state) => state.datasets);
const breadcrumbsList = useSelector((state) => state.breadcrumbsList);
const currentBreadcrumbsList = useRef(); // work around stale breadcrumbsList reference
currentBreadcrumbsList.current = breadcrumbsList;
const dispatch = useDispatch();
/* eslint-disable react-hooks/exhaustive-deps */
useEffect(() => {
dispatch(fetchDatasetsByInvestigationId(sessionId, investigationId));
if (investigation) {
dispatch(
setInvestigationBreadCrumbs(
investigation,
currentBreadcrumbsList.current
)
);
}
// `investigation` object can be duplicated in store, so we use `investigation.id` as effect dependency
}, [
dispatch,
investigationId,
sessionId,
investigation?.id,
currentBreadcrumbsList,
]);
}, [dispatch, investigationId, sessionId, investigation?.id]);
if (!investigation) {
return <PageNotFound />;
......
import React, { useEffect, useRef } from 'react';
import { Col, Grid, Row, Alert } from 'react-bootstrap';
import React from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { useParams } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';
import { useSelector } from 'react-redux';
import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
import Loader from '../components/Loader';
import DatasetTable from '../components/Dataset/DatasetTable';
import PageNotFound from './PageNotFound';
import { fetchDatasetsByInvestigationId } from '../actions/datasets';
import { useResource } from 'rest-hooks';
import InvestigationResource from '../resources/investigation';
import { setInvestigationBreadCrumbs } from './investigation-breadcrumbs';
import ParticipantsPanel from '../components/Investigation/ParticipantsPanel';
function ParticipantsPage() {
const { investigationId } = useParams();
const user = useSelector((state) => state.user);
const investigation = useResource(InvestigationResource.detailShape(), {
id: investigationId,
});
if (!investigation) {
return <PageNotFound />;
}
return (
<Grid fluid>
<Row>
......
import React, { useEffect, useRef } from 'react';
import { Col, Grid, Row, Alert } from 'react-bootstrap';
import React from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { useParams } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';
import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
import Loader from '../components/Loader';
import DatasetTable from '../components/Dataset/DatasetTable';
import PageNotFound from './PageNotFound';
import { fetchDatasetsByInvestigationId } from '../actions/datasets';
import { useResource } from 'rest-hooks';
import InvestigationResource from '../resources/investigation';
import { setInvestigationBreadCrumbs } from './investigation-breadcrumbs';
import ParticipantsPanel from '../components/Investigation/ParticipantsPanel';
import LoadingBoundary from '../components/LoadingBoundary';
import SamplesTable from '../components/Investigation/SamplesTable';
function SamplesPage() {
const { investigationId } = useParams();
const user = useSelector((state) => state.user);
return (
<Grid fluid>
<Row>
<Col sm={12}>
<TabContainerMenu />
<div style={{ margin: 20 }}>
<ParticipantsPanel
investigationId={investigationId}
name={user.name}
/>
<LoadingBoundary message="Loading samples">
<SamplesTable investigationId={investigationId} />
</LoadingBoundary>
</div>
</Col>
</Row>
......
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