Skip to content
GitLab
Commit d861574d authored by Matija Obreza's avatar Matija Obreza
Browse files

Subsets/Datasets: UI organized

parent 9e057cba
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.descriptorCount &&
{!!dataset.accessionCount &&
<Property
title={t('dataset.traitCount')} value={<p>{dataset.descriptorCount}</p>}
title={t('dataset.accessionCount')} 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.institute')} value={<a href={subset.source}>{subset.source}</a>}
title={t('subset.source')} 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>
......
Supports Markdown
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