DisplayPage.tsx 16 KB
Newer Older
1
2
3
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
Matija Obreza's avatar
Matija Obreza committed
4
import { translate } from 'react-i18next';
5
import { withStyles } from '@material-ui/core/styles';
6
7

// Actions
8
import { loadAccession } from 'accessions/actions/public';
9
import {addAccessionToMyList, removeAccessionFromMyList} from 'list/actions/public';
10
11

// Models
12
import AccessionDetails from 'model/accession/AccessionDetails';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
13
import RepositoryFile from 'model/repository/RepositoryFile';
14
15

// UI
Matija Obreza's avatar
Matija Obreza committed
16
17
18
import { Link } from 'react-router-dom';
import PrettyDate from 'ui/common/time/PrettyDate';
import PageLayout, { PageContents, MainSection, PageSection } from 'ui/layout/PageLayout';
19
20
import ContentHeader from 'ui/common/heading/ContentHeader';
import Loading from 'ui/common/Loading';
Matija Obreza's avatar
Matija Obreza committed
21
22
23
24
25
import { Properties, PropertiesItem } from 'ui/common/Properties';
import DOI from 'ui/common/DOI';
import { ExternalLink } from 'ui/common/Links';
import SciName from 'ui/genesys/SciName';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
26
import ReduxCheckbox from 'ui/common/checkbox';
27
import CropChips from 'crop/ui/c/CropChips';
28
import LocationMap from 'ui/common/LocationMap';
29
30
import {CountryLink, DatasetLink, InstituteLink, SubsetLink} from 'ui/genesys/Links';
import PropertiesCard from 'ui/common/PropertiesCard';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
31
import GridContainer from 'ui/layout/GridContainer';
32
import McpdDate from 'ui/common/time/McpdDate';
33
import PdciTable from './c/PdciTable';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
34
35
import ImageGalleryView from 'repository/ui/c/ImageGalleryView';
import Button from '@material-ui/core/Button/Button';
Matija Obreza's avatar
Matija Obreza committed
36

37
38
39
40
const styles = (theme) => ({
  pageSection: {
    marginBottom: '1em',
  },
Matija Obreza's avatar
Matija Obreza committed
41
42
43
44
45
46
  selected: {
    background: '#c9e2cb',
  },
  historic: {
    background: '#ffe2e2 !important',
  },
47
48
});

49

50
51
52
interface IBrowsePageProps {
  t?: any;
  classes?: any;
53

54
  uuid: string;
55
  doi: string; // DOI comes from the route without the '10.'
56
  accession: AccessionDetails;
57
58
  error: any;
  loadAccession: any;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
59
60
61
  accessions: any;
  addAccessionToMyList: any;
  removeAccessionFromMyList: any;
62
63
64
65
66
}

class BrowsePage extends React.Component<IBrowsePageProps, any> {

  protected static needs = [
67
    ({ params: { uuid, doi } }) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
68
        return doi ? loadAccession({ doi: `10.${doi}` }) :  loadAccession({ uuid });
69
70
71
72
73
74
75
76
    },
  ];

  constructor(props: IBrowsePageProps, context: any) {
      super(props, context);
  }

  public componentWillMount() {
77
78
79
    const { doi, uuid, loadAccession } = this.props;
    const accession = this.props.accession ? this.props.accession.details : null;

80
81
82
83
    const theDoi = `10.${doi}`;
    if (doi && (! accession || theDoi !== accession.doi)) {
      loadAccession({ doi: theDoi });
    }
84
    if (uuid && (! accession || uuid !== accession.uuid)) {
85
      loadAccession({ uuid });
86
87
88
    }
  }

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
89
  private onCheckboxChange = (event, checked) => {
90
      const {accession: {details: accession}, addAccessionToMyList, removeAccessionFromMyList} = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
91
92
93
94
95
96
97
      if (checked) {
          addAccessionToMyList(accession.uuid);
      } else {
          removeAccessionFromMyList(accession.uuid);
        }
  }

98
  public render() {
99
100
    const { t, error, uuid, doi, accessions, classes } = this.props;
    const { details: accession, pdci, datasets, subsets, files, imageGallery } = this.props.accession ?
101
102
      this.props.accession
      :
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
103
      {details: null, pdci: null, datasets: null, subsets: null, files: null, imageGallery: null};
104

Matija Obreza's avatar
Matija Obreza committed
105
    const isChecked  =  accession && accessions && accessions.includes(accession.uuid);
106
107
108
109
    const theDoi = `10.${doi}`;
    const stillLoading: boolean = ! error && (! accession
      || (doi && accession && accession.doi !== theDoi)
      || (uuid && accession && accession.uuid !== uuid));
110

Matija Obreza's avatar
Matija Obreza committed
111
112
    const hasLatLon = accession && accession.geo && accession.geo.latitude !== null && accession.geo.longitude !== null;

113
    return (
Oleksii Savran's avatar
Oleksii Savran committed
114
      <PageLayout withFooter>
Matija Obreza's avatar
Matija Obreza committed
115
        <ScrollToTopOnMount />
Matija Obreza's avatar
Matija Obreza committed
116
        <ContentHeader title={ t('accessions.public.p.display.title') } subtitle={ t('accessions.public.p.display.subTitle') } />
Matija Obreza's avatar
Matija Obreza committed
117

118
119
120
        { stillLoading ? <Loading /> :
          <div>
            { error && <div>{ JSON.stringify(error) }</div> }
Matija Obreza's avatar
Matija Obreza committed
121

122
            { accession &&
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
123
              <PageContents className="pt-1rem">
Matija Obreza's avatar
Matija Obreza committed
124
                <MainSection className={ isChecked ? classes.selected : accession.historic ?  classes.historic : '' } title={
125
                  <div>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
126
                    { t('accessions.common.modelName') }: { accession.accessionNumber }
127
128
129
130
                    <div className="float-right">
                        <ReduxCheckbox
                            label={
                                <b>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
131
                                    { isChecked ? t('accessions.public.p.display.removeFromMyList', {accessionNumber: accession.accessionNumber}) : t('accessions.public.p.display.addToMyList', {accessionNumber: accession.accessionNumber}) }
132
133
134
135
136
137
138
139
140
141
142
143
                                </b>
                            }
                            input={ {
                                value: isChecked,
                                onChange: this.onCheckboxChange,
                            } }
                        />
                    </div>
                  </div>
                  }
                >
                  <Properties>
144
145
146
                    { accession.doi && <PropertiesItem title={ t('accessions.public.p.display.DOI') }><DOI noPrefix value={ accession.doi } /></PropertiesItem> }
                    <PropertiesItem title={ t('accessions.common.acceNumb') } >{ accession.accessionNumber }</PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.holdingInstitute') }>
147
148
149
                      <InstituteLink to={ accession.institute }>
                        { accession.institute.fullName }
                      </InstituteLink>
Matija Obreza's avatar
Matija Obreza committed
150
151
                      <span> &mdash; </span>
                      <CountryLink noflag country={ accession.institute.country }/>
152
                    </PropertiesItem>
Matija Obreza's avatar
Matija Obreza committed
153
                    { accession.historic && <PropertiesItem className={ accession.historic ?  classes.historic : '' } title={ t('accessions.public.p.display.historic') }>{ t('accessions.public.p.display.isHistoric') }</PropertiesItem> }
154
155
156
157
158
                    <PropertiesItem title={ t('accessions.common.instituteCode') }>{ accession.institute.code }</PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.acquisitionDate') }><McpdDate value={ accession.acquisitionDate } /></PropertiesItem>
                    { accession.countryOfOrigin && <PropertiesItem title={ t('accessions.common.countryOfOrigin') }>{ <CountryLink country={ accession.countryOfOrigin }/> }</PropertiesItem> }
                    { accession.sampStat && <PropertiesItem title={ t('accessions.common.sampStat') }>{ t(`accessions.common.sampleStatus.${accession.sampStat}`) }</PropertiesItem> }
                    { accession.storage && accession.storage.length > 0 && <PropertiesItem title={ t('accessions.common.storageType') }>
159
                      { accession.storage.map((storage, i) => (
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
160
                        <div key={ storage } style={ {width: '100%', paddingTop: '.25rem'} }>{ t(`accessions.common.storage.${storage}`) }</div>
161
162
                      )) }
                    </PropertiesItem> }
163
164
165
166
                    <PropertiesItem title={ t('accessions.public.p.display.availability') } keepEmpty>{ t(`accessions.common.available.${accession.available}`) }</PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.ITPGRFAMLS') } keepEmpty>{ t(`accessions.common.mlsStatus.${accession.mlsStatus}`) }</PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.donorInstitute') }>{ accession.donorCode }</PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.donorAccessionNumber') }>{ accession.donorNumb }</PropertiesItem>
Matija Obreza's avatar
Matija Obreza committed
167

168
                    { accession.duplSite && accession.duplSite.length > 0 && <PropertiesItem title={ t('accessions.public.p.display.safetyDuplicationInstitute') }>
169
                      { accession.duplSite.map((duplSite, i) => (
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
170
                        <div key={ duplSite } style={ {width: '100%', paddingTop: '.25rem'} }>{ duplSite }</div>
171
172
                      )) }
                    </PropertiesItem> }
Matija Obreza's avatar
Matija Obreza committed
173

174
                    { accession.acceUrl && <PropertiesItem title={ t('accessions.public.p.display.accessionURL') }><ExternalLink link={ accession.acceUrl } /></PropertiesItem> }
175
176
                  </Properties>
                </MainSection>
Matija Obreza's avatar
Matija Obreza committed
177

178
179
180
181
                { imageGallery &&
                  <ImageGalleryView className={ classes.pageSection } imageGallery={ imageGallery }/>
                }

182
                <PageSection title={ t('accessions.common.taxonomy') }>
183
                  <Properties>
184
185
                    <PropertiesItem title={ t('accessions.common.genus') }>{ accession.taxonomy.genus }</PropertiesItem>
                    <PropertiesItem title={ t('accessions.common.species') }>
186
187
188
189
                      { accession.taxonomy.species }
                      { '' }
                      <Link to={ '/a' }>View <i>{ `${accession.taxonomy.genus} ${accession.taxonomy.species}` }</i> at { accession.institute.code }</Link>
                    </PropertiesItem>
190
191
192
                    <PropertiesItem title={ t('accessions.public.p.display.scientificName') }><SciName taxa={ accession.taxonomy.taxonNameHtml } /></PropertiesItem>
                    { accession.crop && <PropertiesItem title={ t('accessions.public.p.display.cropName') }><CropChips crops={ accession.crop.shortName } /></PropertiesItem> }
                    <PropertiesItem title={ t('accessions.public.p.display.providedCropName') }>{ accession.cropName }</PropertiesItem>
193
194
                  </Properties>
                </PageSection>
Matija Obreza's avatar
Cleanup  
Matija Obreza committed
195
196

                { (accession.donorCode || (accession.aliases && accession.aliases.length > 0)) &&
197
                  <PageSection title={ t('accessions.public.p.display.accessionNames') }>
198
                    <Properties>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
199
                      { accession.donorCode && <PropertiesItem title={ t('accessions.common.alias.DONORNUMB') }>{ accession.donorNumb } <em>{ accession.donorCode }</em></PropertiesItem> }
200
                      { accession.aliases && accession.aliases.map((alias) => (
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
201
                        <PropertiesItem key={ alias.id } title={ t(`accessions.common.alias.${alias.aliasType}`) }>{ alias.name } <em>{ alias.usedBy }</em></PropertiesItem>
202
203
204
205
                      )) }
                    </Properties>
                  </PageSection>
                }
206

207
                { accession.coll &&
208
                  <PageSection title={ t('accessions.public.p.display.collectingInformation') }>
209
                    <Properties>
210
                      { accession.countryOfOrigin && <PropertiesItem title={ t('accessions.common.countryOfOrigin') }>{ <CountryLink country={ accession.countryOfOrigin }/> }</PropertiesItem> }
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
211
                      { accession.coll.collDate && <PropertiesItem key="collDate" title={ t(`accessions.common.coll.collDate`) }><McpdDate value={ accession.coll.collDate } /></PropertiesItem> }
212
213
214
                      { accession.coll &&
                        [ 'collMissId', 'collNumb', 'collSite', 'collSrc' ]
                          .filter((prop) => accession.coll[prop] !== null).map((prop) => (
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
215
                          <PropertiesItem key={ prop } title={ t(`accessions.common.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
216
                        ))
217
                      }
218
219
220
                      { accession.coll &&
                        [ 'collCode', 'collName' ]
                          .filter((prop) => accession.coll[prop].length).map((prop) => (
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
221
                          <PropertiesItem key={ prop } title={ t(`accessions.common.coll.${prop}`) }>{ accession.coll[prop] }</PropertiesItem>
222
223
224
225
226
                        ))
                      }
                      { accession.geo &&
                        [ 'latitude', 'longitude', 'datum', 'method', 'uncertainty', 'elevation' ]
                          .filter((prop) => accession.geo[prop] !== null).map((prop) => (
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
227
                          <PropertiesItem key={ prop } title={ t(`accessions.common.geo.${prop}`) }>{ accession.geo[prop] }</PropertiesItem>
228
229
230
231
232
                        ))
                      }
                    </Properties>

                    { hasLatLon &&
Maxym Borodenko's avatar
Maxym Borodenko committed
233
                      <LocationMap locations={ [{ id: accession.geo.id, lat: accession.geo.latitude, lng: accession.geo.longitude }] }/>
234
235
236
                    }
                  </PageSection>
                }
Matija Obreza's avatar
Matija Obreza committed
237

238
                { accession.remarks && accession.remarks.length > 0 && <PageSection title={ t('accessions.public.p.display.remarks') }>
239
240
241
242
243
244
                  <Properties>
                    { accession.remarks && accession.remarks.map((remark) => (
                      <PropertiesItem key={ remark.id } title={ remark.fieldName }>{ remark.remark }</PropertiesItem>
                    )) }
                  </Properties>
                </PageSection> }
Matija Obreza's avatar
Matija Obreza committed
245

246
247
248
249
250
251
                { files &&
                  <PageSection title={ t('accessions.public.p.display.relatedResources') }>
                    <Properties>
                      { files.map((e: RepositoryFile) => (
                        <PropertiesItem key={ e.uuid } title={
                          <a href={ `/proxy/api/v1/repository/download/${e.uuid}` }>
252
                            <Button variant="contained" component="span">
253
254
255
256
257
258
259
260
261
262
263
                              { t('common:action.download') }
                            </Button>
                          </a>
                        }>
                          <b>{ e.originalFilename }</b>
                        </PropertiesItem>
                      )) }
                    </Properties>
                  </PageSection>
                }

264
                { pdci && <PdciTable pdci={ pdci } title={ t('accessions.public.p.display.pdci') }/> }
Matija Obreza's avatar
Matija Obreza committed
265

266
                <PageSection title={ t('accessions.public.p.display.metadata') }>
267
                  <Properties>
268
269
270
271
                    <PropertiesItem title={ t('common:label.UUID') }>{ `urn:uuid:${accession.uuid}` }</PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.permanentURL') }><ExternalLink link={ `https://purl.org/germplasm/id/${accession.uuid}` } /></PropertiesItem>
                    <PropertiesItem title={ t('common:label.lastUpdated') }><PrettyDate value={ accession.lastModifiedDate } /></PropertiesItem>
                    <PropertiesItem title={ t('common:label.created') }><PrettyDate value={ accession.createdDate } /></PropertiesItem>
272
273
                  </Properties>
                </PageSection>
274

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
275
                <GridContainer className="mb-15">
276
277
278
                  { datasets && datasets.length > 0 &&
                  <PropertiesCard
                    small
279
                    title={ t('accessions.public.p.display.associatedDatasets') }
280
                    propertyItemProps={ { keepEmpty: true } }
Matija Obreza's avatar
Matija Obreza committed
281
                    propertiesList={ datasets.map((dataset) => ({ value: <DatasetLink to={ dataset } /> })) }
282
283
284
285
286
                  />
                  }
                  { subsets && subsets.length > 0 &&
                  <PropertiesCard
                    small
287
                    title={ t('accessions.public.p.display.associatedSubsets') }
288
                    propertyItemProps={ { keepEmpty: true } }
Matija Obreza's avatar
Matija Obreza committed
289
                    propertiesList={ subsets.map((subset) => ({ value: <SubsetLink to={ subset } /> })) }
290
291
                  />
                  }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
292
                </GridContainer>
293
294
295
              </PageContents>
            }
          </div>
Matija Obreza's avatar
Matija Obreza committed
296
        }
297
298
299
300
301
302
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
303
304
  accession: state.accessions.public.accession,
  error: state.accessions.public.accessionError,
305
  uuid: ownProps.match.params.uuid,
306
  doi: ownProps.match.params.doi,
307
  accessions: state.list.public.myList.accessions,
308
309
310
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
311
312
  addAccessionToMyList,
  removeAccessionFromMyList,
313
314
315
316
  loadAccession,
}, dispatch);


317
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(BrowsePage)));