Skip to content
GitLab
Commit 43d3f6db authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files

Institute details: Loading indicator

parent c81b1508
Hide whitespace changes
Inline Side-by-side
src/ui/pages/accessions/DisplayPage.tsx
View file @ 43d3f6db
......@@ -86,159 +86,162 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<ScrollToTopOnMount />
<ContentHeader title="Accession details" subtitle="Passport data and everything else" />
{ stillLoading && <Loading /> }
{ error && <div>{ JSON.stringify(error) }</div> }
{ stillLoading ? <Loading /> :
<div>
{ error && <div>{ JSON.stringify(error) }</div> }
{ accession &&
<PageContents>
<MainSection title={
<div>
Accession: { accession.accessionNumber }
<div className="float-right">
<ReduxCheckbox
label={
<b>
{ isChecked ? `Remove ${accession.accessionNumber} from my list` : `Add ${accession.accessionNumber} to my list` }
</b>
}
input={ {
value: isChecked,
onChange: this.onCheckboxChange,
} }
/>
</div>
</div>
}
>
<Properties>
{ accession.doi && <PropertiesItem title="DOI"><DOI noPrefix value={ accession.doi } /></PropertiesItem> }
<PropertiesItem title="Accession number">{ accession.accessionNumber }</PropertiesItem>
<PropertiesItem title="Holding institute">
<InstituteLink to={ accession.institute }>
{ accession.institute.fullName }
</InstituteLink>
</PropertiesItem>
<PropertiesItem title="Country of holding institute">{ accession.institute.country.name }</PropertiesItem>
<PropertiesItem title="Institute code">{ accession.institute.code }</PropertiesItem>
<PropertiesItem title="Acquisition date">{ accession.acquisitionDate }</PropertiesItem>
<PropertiesItem title="Biological status of accession">{ accession.sampStat }</PropertiesItem>
<PropertiesItem title="Availability for distribution">{ t(`accession.available.${accession.available}`) }</PropertiesItem>
{ accession &&
<PageContents>
<MainSection title={
<div>
Accession: { accession.accessionNumber }
<div className="float-right">
<ReduxCheckbox
label={
<b>
{ isChecked ? `Remove ${accession.accessionNumber} from my list` : `Add ${accession.accessionNumber} to my list` }
</b>
}
input={ {
value: isChecked,
onChange: this.onCheckboxChange,
} }
/>
</div>
</div>
}
>
<Properties>
{ accession.doi && <PropertiesItem title="DOI"><DOI noPrefix value={ accession.doi } /></PropertiesItem> }
<PropertiesItem title="Accession number">{ accession.accessionNumber }</PropertiesItem>
<PropertiesItem title="Holding institute">
<InstituteLink to={ accession.institute }>
{ accession.institute.fullName }
</InstituteLink>
</PropertiesItem>
<PropertiesItem title="Country of holding institute">{ accession.institute.country.name }</PropertiesItem>
<PropertiesItem title="Institute code">{ accession.institute.code }</PropertiesItem>
<PropertiesItem title="Acquisition date">{ accession.acquisitionDate }</PropertiesItem>
{ accession.storage && accession.storage.length > 0 && <PropertiesItem title="Type of Germplasm storage">
{ accession.storage.map((storage, i) => (
<div key={ storage }>{ t(`accession.storage.${storage}`) }</div>
)) }
</PropertiesItem> }
<PropertiesItem title="Donor institute">{ accession.donorCode }</PropertiesItem>
<PropertiesItem title="Donor accession number">{ accession.donorNumb }</PropertiesItem>
<PropertiesItem title="Biological status of accession">{ accession.sampStat }</PropertiesItem>
<PropertiesItem title="Availability for distribution">{ t(`accession.available.${accession.available}`) }</PropertiesItem>
{ accession.duplSite && accession.duplSite.length > 0 && <PropertiesItem title="Safety duplication institute">
{ accession.duplSite.map((duplSite, i) => (
<div key={ duplSite }>{ duplSite }</div>
)) }
</PropertiesItem> }
{ accession.storage && accession.storage.length > 0 && <PropertiesItem title="Type of Germplasm storage">
{ accession.storage.map((storage, i) => (
<div key={ storage }>{ t(`accession.storage.${storage}`) }</div>
)) }
</PropertiesItem> }
<PropertiesItem title="Donor institute">{ accession.donorCode }</PropertiesItem>
<PropertiesItem title="Donor accession number">{ accession.donorNumb }</PropertiesItem>
{ accession.acceUrl && <PropertiesItem title="Accession URL"><ExternalLink link={ accession.acceUrl } /></PropertiesItem> }
</Properties>
</MainSection>
{ accession.duplSite && accession.duplSite.length > 0 && <PropertiesItem title="Safety duplication institute">
{ accession.duplSite.map((duplSite, i) => (
<div key={ duplSite }>{ duplSite }</div>
)) }
</PropertiesItem> }
<PageSection title="Taxonomy">
<Properties>
<PropertiesItem title="Genus">{ accession.taxonomy.genus }</PropertiesItem>
<PropertiesItem title="Species">
{ accession.taxonomy.species }
{ ' — ' }
<Link to={ '/a' }>View <i>{ `${accession.taxonomy.genus} ${accession.taxonomy.species}` }</i> at { accession.institute.code }</Link>
</PropertiesItem>
<PropertiesItem title="Scientific name"><SciName taxa={ accession.taxonomy.taxonNameHtml } /></PropertiesItem>
{ accession.crop && <PropertiesItem title="Crop name"><CropChips crops={ accession.crop.shortName } /></PropertiesItem> }
<PropertiesItem title="Provided crop name">{ accession.cropName }</PropertiesItem>
</Properties>
</PageSection>
{ accession.acceUrl && <PropertiesItem title="Accession URL"><ExternalLink link={ accession.acceUrl } /></PropertiesItem> }
</Properties>
</MainSection>
<PageSection title="Accession names">
<Properties>
{ accession.coll && accession.coll.collNumb && <PropertiesItem title={ t('accession.alias.COLLNUMB') }>{ accession.coll.collNumb } { accession.coll.collCode }</PropertiesItem> }
{ accession.donorCode && <PropertiesItem title={ t('accession.alias.DONORNUMB') }>{ accession.donorNumb } { accession.donorCode }</PropertiesItem> }
{ accession.aliases && accession.aliases.map((alias) => (
<PropertiesItem key={ alias.id } title={ t(`accession.alias.${alias.aliasType}`) }>{ alias.name } { alias.usedBy }</PropertiesItem>
)) }
</Properties>
</PageSection>
<PageSection title="Taxonomy">
<Properties>
<PropertiesItem title="Genus">{ accession.taxonomy.genus }</PropertiesItem>
<PropertiesItem title="Species">
{ accession.taxonomy.species }
{ ' — ' }
<Link to={ '/a' }>View <i>{ `${accession.taxonomy.genus} ${accession.taxonomy.species}` }</i> at { accession.institute.code }</Link>
</PropertiesItem>
<PropertiesItem title="Scientific name"><SciName taxa={ accession.taxonomy.taxonNameHtml } /></PropertiesItem>
{ accession.crop && <PropertiesItem title="Crop name"><CropChips crops={ accession.crop.shortName } /></PropertiesItem> }
<PropertiesItem title="Provided crop name">{ accession.cropName }</PropertiesItem>
</Properties>
</PageSection>
<PageSection title="Collecting information">
<Properties>
{ accession.countryOfOrigin && <PropertiesItem title="Country of origin">{ accession.countryOfOrigin.name }</PropertiesItem> }
{ accession.coll &&
[ 'collDate', 'collMissId', 'collNumb', 'collSite', 'collSrc' ]
.filter((prop) => accession.coll[prop] !== null).map((prop) => (
<PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
))
}
{ accession.coll &&
[ 'collCode', 'collName' ]
.filter((prop) => accession.coll[prop].length).map((prop) => (
<PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
))
}
{ accession.geo &&
[ 'latitude', 'longitude', 'datum', 'method', 'uncertainty', 'elevation' ]
.filter((prop) => accession.geo[prop] !== null).map((prop) => (
<PropertiesItem key={ prop } title={ t(`accession.geo.${prop}`) }>{ accession.geo[prop] }</PropertiesItem>
))
}
</Properties>
<PageSection title="Accession names">
<Properties>
{ accession.coll && accession.coll.collNumb && <PropertiesItem title={ t('accession.alias.COLLNUMB') }>{ accession.coll.collNumb } { accession.coll.collCode }</PropertiesItem> }
{ accession.donorCode && <PropertiesItem title={ t('accession.alias.DONORNUMB') }>{ accession.donorNumb } { accession.donorCode }</PropertiesItem> }
{ accession.aliases && accession.aliases.map((alias) => (
<PropertiesItem key={ alias.id } title={ t(`accession.alias.${alias.aliasType}`) }>{ alias.name } { alias.usedBy }</PropertiesItem>
)) }
</Properties>
</PageSection>
{ hasLatLon &&
<LocationMap
location={
{
id: accession.geo.id,
lat: accession.geo.latitude,
lng: accession.geo.longitude,
<PageSection title="Collecting information">
<Properties>
{ accession.countryOfOrigin && <PropertiesItem title="Country of origin">{ accession.countryOfOrigin.name }</PropertiesItem> }
{ accession.coll &&
[ 'collDate', 'collMissId', 'collNumb', 'collSite', 'collSrc' ]
.filter((prop) => accession.coll[prop] !== null).map((prop) => (
<PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
))
}
{ accession.coll &&
[ 'collCode', 'collName' ]
.filter((prop) => accession.coll[prop].length).map((prop) => (
<PropertiesItem key={ prop } title={ t(`accession.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
))
}
{ accession.geo &&
[ 'latitude', 'longitude', 'datum', 'method', 'uncertainty', 'elevation' ]
.filter((prop) => accession.geo[prop] !== null).map((prop) => (
<PropertiesItem key={ prop } title={ t(`accession.geo.${prop}`) }>{ accession.geo[prop] }</PropertiesItem>
))
}
</Properties>
{ hasLatLon &&
<LocationMap
location={
{
id: accession.geo.id,
lat: accession.geo.latitude,
lng: accession.geo.longitude,
}
}
/>
}
/>
}
</PageSection>
</PageSection>
{ accession.remarks && accession.remarks.length > 0 && <PageSection title="Remarks">
<Properties>
{ accession.remarks && accession.remarks.map((remark) => (
<PropertiesItem key={ remark.id } title={ remark.fieldName }>{ remark.remark }</PropertiesItem>
)) }
</Properties>
</PageSection> }
{ accession.remarks && accession.remarks.length > 0 && <PageSection title="Remarks">
<Properties>
{ accession.remarks && accession.remarks.map((remark) => (
<PropertiesItem key={ remark.id } title={ remark.fieldName }>{ remark.remark }</PropertiesItem>
)) }
</Properties>
</PageSection> }
{ accession.pdci && <PageSection title="Passport Data Completeness Index">
<div style={ { marginBottom: '2em', padding: '2em', backgroundColor: '#b6c1b4', borderRadius: '6px' } }>
<span style={ { fontSize: '1.5em' } }>
{ t('accession.pdciScore', { score: accession.pdci.score }) }
{ /*<p>{ t(`accession.pdciInstitute`, { score: accession.pdci.score }) }</p>*/ }
</span>
{ ' ' }
<a href="#">Read about Passport Data Completeness Index</a>
</div>
<Properties>
{ accession.pdci.independentItems.map((item) => (
<PropertiesItem small key={ item } title={ item.toUpperCase() }>{ accession.pdci[item] }</PropertiesItem>
)) }
{ accession.pdci.dependentItems.map((item) => (
<PropertiesItem small key={ item } title={ item.toUpperCase() }>{ accession.pdci[item] }</PropertiesItem>
)) }
</Properties>
</PageSection> }
{ accession.pdci && <PageSection title="Passport Data Completeness Index">
<div style={ { marginBottom: '2em', padding: '2em', backgroundColor: '#b6c1b4', borderRadius: '6px' } }>
<span style={ { fontSize: '1.5em' } }>
{ t('accession.pdciScore', { score: accession.pdci.score }) }
{ /*<p>{ t(`accession.pdciInstitute`, { score: accession.pdci.score }) }</p>*/ }
</span>
{ ' ' }
<a href="#">Read about Passport Data Completeness Index</a>
</div>
<Properties>
{ accession.pdci.independentItems.map((item) => (
<PropertiesItem small key={ item } title={ item.toUpperCase() }>{ accession.pdci[item] }</PropertiesItem>
)) }
{ accession.pdci.dependentItems.map((item) => (
<PropertiesItem small key={ item } title={ item.toUpperCase() }>{ accession.pdci[item] }</PropertiesItem>
)) }
</Properties>
</PageSection> }
<PageSection title="Metadata">
<Properties>
<PropertiesItem title="UUID">{ `urn:uuid:${accession.uuid}` }</PropertiesItem>
<PropertiesItem title="Permanent URL"><ExternalLink link={ `https://purl.org/germplasm/id/${accession.uuid}` } /></PropertiesItem>
<PropertiesItem title="Last updated"><PrettyDate value={ accession.lastModifiedDate } /></PropertiesItem>
<PropertiesItem title="Created"><PrettyDate value={ accession.createdDate } /></PropertiesItem>
</Properties>
</PageSection>
</PageContents>
<PageSection title="Metadata">
<Properties>
<PropertiesItem title="UUID">{ `urn:uuid:${accession.uuid}` }</PropertiesItem>
<PropertiesItem title="Permanent URL"><ExternalLink link={ `https://purl.org/germplasm/id/${accession.uuid}` } /></PropertiesItem>
<PropertiesItem title="Last updated"><PrettyDate value={ accession.lastModifiedDate } /></PropertiesItem>
<PropertiesItem title="Created"><PrettyDate value={ accession.createdDate } /></PropertiesItem>
</Properties>
</PageSection>
</PageContents>
}
</div>
}
</PageLayout>
);
......
src/ui/pages/institutes/DisplayPage.tsx
View file @ 43d3f6db
......@@ -81,125 +81,128 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<ScrollToTopOnMount />
<ContentHeader title="Institute details" subtitle="smt" />
{ stillLoading && <Loading /> }
{ error && <div>{ JSON.stringify(error) }</div> }
{ institute &&
<PageContents>
<MainSection title={ `${institute.details.fullName}` }>
<Properties>
<PropertiesItem title="Institute code">{ institute.details.code }</PropertiesItem>
<PropertiesItem title="Type">{ institute.details.type }</PropertiesItem>
<PropertiesItem title="Country">{ institute.details.country.name }</PropertiesItem>
{ institute.details.url &&
<PropertiesItem title="Web link">
<a href={ institute.details.url }> { institute.details.url }</a>
</PropertiesItem>
}
<PropertiesItem title="Accessions in Genesys">{ <a onClick={ this.applyInstituteCodeFilter }> { institute.details.accessionCount } </a> }</PropertiesItem>
</Properties>
</MainSection>
{ institute.details.latitude !== null && institute.details.longitude !== null &&
<PageSection title="Location">
<Properties>
<PropertiesItem title="latitude">{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title="longitude">{ institute.details.longitude }</PropertiesItem>
</Properties>
<LocationMap
location={
{
id: institute.details.id,
lat: institute.details.latitude,
lng: institute.details.longitude,
{ stillLoading ? <Loading /> :
<div>
{ error && <div>{ JSON.stringify(error) }</div> }
{ institute &&
<PageContents>
<MainSection title={ `${institute.details.fullName}` }>
<Properties>
<PropertiesItem title="Institute code">{ institute.details.code }</PropertiesItem>
<PropertiesItem title="Type">{ institute.details.type }</PropertiesItem>
<PropertiesItem title="Country">{ institute.details.country.name }</PropertiesItem>
{ institute.details.url &&
<PropertiesItem title="Web link">
<a href={ institute.details.url }> { institute.details.url }</a>
</PropertiesItem>
}
<PropertiesItem title="Accessions in Genesys">{ <a onClick={ this.applyInstituteCodeFilter }> { institute.details.accessionCount } </a> }</PropertiesItem>
</Properties>
</MainSection>
{ institute.details.latitude !== null && institute.details.longitude !== null &&
<PageSection title="Location">
<Properties>
<PropertiesItem title="latitude">{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title="longitude">{ institute.details.longitude }</PropertiesItem>
</Properties>
<LocationMap
location={
{
id: institute.details.id,
lat: institute.details.latitude,
lng: institute.details.longitude,
}
}
/>
</PageSection>
}
<GridLayout>
{ cropShortNameOverview && cropShortNameOverview.terms && cropShortNameOverview.terms.length > 0 &&
<PropertiesCard
title="Most represented Crops"
propertiesList={ cropShortNameOverview.terms.map((term) => ({title: term.term, value: term.count})) }
small
/>
}
/>
</PageSection>
}
<GridLayout>
{ cropShortNameOverview && cropShortNameOverview.terms && cropShortNameOverview.terms.length > 0 &&
<PropertiesCard
title="Most represented Crops"
propertiesList={ cropShortNameOverview.terms.map((term) => ({title: term.term, value: term.count})) }
small
/>
}
{ cropNameOverview && cropNameOverview.terms && cropNameOverview.terms.length > 0 &&
<PropertiesCard
title="Most represented Crop names"
propertiesList={ cropNameOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small
>
<PieChart
data={
cropNameOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
}
{ taxonomyGenusOverview && taxonomyGenusOverview.terms && taxonomyGenusOverview.terms.length > 0 &&
<PropertiesCard
title="Most represented Genera"
propertiesList={ taxonomyGenusOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small
>
<PieChart
data={
taxonomyGenusOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
}
{ taxonomyGenusSpeciesOverview && taxonomyGenusSpeciesOverview.terms && taxonomyGenusSpeciesOverview.terms.length > 0 &&
<PropertiesCard
title="Most represented Species"
propertiesList={ taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small
>
<PieChart
data={
taxonomyGenusSpeciesOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
}
{ institute.lastUpdates && institute.lastUpdates.length > 0 &&
<PropertiesCard
title="Last updates of passport data"
propertiesList={ institute.lastUpdates.map((lastUpdate) => ({title: PrettyDate({value: new Date(lastUpdate[0], lastUpdate[1], lastUpdate[2])}) , value: lastUpdate[3]})) }
small
/>
}
</GridLayout>
{ institute.blurb && institute.blurb.body &&
<PageSection title="About">
<Properties>
<div style={ !isMobile ? {columnCount: 2} : {} } dangerouslySetInnerHTML={ {__html: institute.blurb.body} }/>
</Properties>
</PageSection>
{ cropNameOverview && cropNameOverview.terms && cropNameOverview.terms.length > 0 &&
<PropertiesCard
title="Most represented Crop names"
propertiesList={ cropNameOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small
>
<PieChart
data={
cropNameOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
}
{ taxonomyGenusOverview && taxonomyGenusOverview.terms && taxonomyGenusOverview.terms.length > 0 &&
<PropertiesCard
title="Most represented Genera"
propertiesList={ taxonomyGenusOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small
>
<PieChart
data={
taxonomyGenusOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
}
{ taxonomyGenusSpeciesOverview && taxonomyGenusSpeciesOverview.terms && taxonomyGenusSpeciesOverview.terms.length > 0 &&
<PropertiesCard
title="Most represented Species"
propertiesList={ taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small
>
<PieChart
data={
taxonomyGenusSpeciesOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
}
{ institute.lastUpdates && institute.lastUpdates.length > 0 &&
<PropertiesCard
title="Last updates of passport data"
propertiesList={ institute.lastUpdates.map((lastUpdate) => ({title: PrettyDate({value: new Date(lastUpdate[0], lastUpdate[1], lastUpdate[2])}) , value: lastUpdate[3]})) }
small
/>
}
</GridLayout>
{ institute.blurb && institute.blurb.body &&
<PageSection title="About">
<Properties>
<div style={ !isMobile ? {columnCount: 2} : {} } dangerouslySetInnerHTML={ {__html: institute.blurb.body} }/>
</Properties>
</PageSection>
}
</PageContents>
}
</PageContents>
</div>
}
</PageLayout>
);
......
src/ui/pages/subsets/DisplayPage.tsx
View file @ 43d3f6db
......@@ -50,9 +50,12 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<ContentHeader title="Subset" />
<PageContents>
{ stillLoading && <Loading /> }
{ error && <div>{ JSON.stringify(error) }</div> }
{ subset && <SubsetCard subset={ subset } /> }
{ stillLoading ? <Loading /> :
<div>
{ error && <div>{ JSON.stringify(error) }</div> }
{ subset && <SubsetCard subset={ subset } /> }
</div>
}
</PageContents>
</PageLayout>
);
......