DisplayPage.tsx 21 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, applyFilters, loadAccessionAuditLog } from 'accessions/actions/public';
9
import {addAccessionToMyList, removeAccessionFromMyList} from 'list/actions/public';
10

11
12
13
// Constants
import { ROLE_USER } from 'constants/userRoles';

14
// Models
15
import AccessionDetails from 'model/accession/AccessionDetails';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
16
import RepositoryFile from 'model/repository/RepositoryFile';
17
import AccessionAuditLog from 'model/accession/AccessionAuditLog';
18
19

// UI
Matija Obreza's avatar
Matija Obreza committed
20
21
import PrettyDate from 'ui/common/time/PrettyDate';
import PageLayout, { PageContents, MainSection, PageSection } from 'ui/layout/PageLayout';
22
23
import ContentHeader from 'ui/common/heading/ContentHeader';
import Loading from 'ui/common/Loading';
Matija Obreza's avatar
Matija Obreza committed
24
25
26
27
28
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
29
import ReduxCheckbox from 'ui/common/checkbox';
30
import CropChips from 'crop/ui/c/CropChips';
31
import LocationMap from 'ui/common/LocationMap';
32
33
import {CountryLink, DatasetLink, InstituteLink, SubsetLink} from 'ui/genesys/Links';
import PropertiesCard from 'ui/common/PropertiesCard';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
34
import GridContainer from 'ui/layout/GridContainer';
35
import McpdDate from 'ui/common/time/McpdDate';
36
import PdciTable from './c/PdciTable';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
37
38
import ImageGalleryView from 'repository/ui/c/ImageGalleryView';
import Button from '@material-ui/core/Button/Button';
39
40
import AuditedInfo from 'ui/common/AuditedInfo';
import Authorize from 'ui/common/authorized/Authorize';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
41
42
43
import TemperatureChart from './c/TemperatureChart';
import PrecipitationChart from './c/PrecipitationChart';
import ClimateTable from './c/ClimateTable';
Matija Obreza's avatar
Matija Obreza committed
44

45
46
47
48
const styles = (theme) => ({
  pageSection: {
    marginBottom: '1em',
  },
Matija Obreza's avatar
Matija Obreza committed
49
50
51
52
53
54
  selected: {
    background: '#c9e2cb',
  },
  historic: {
    background: '#ffe2e2 !important',
  },
55
56
});

57

58
59
60
interface IBrowsePageProps {
  t?: any;
  classes?: any;
61

62
  uuid: string;
63
  doi: string; // DOI comes from the route without the '10.'
64
  accession: AccessionDetails;
65
  auditLog: AccessionAuditLog;
66
67
  error: any;
  loadAccession: any;
68
  loadAccessionAuditLog: any;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
69
70
71
  accessions: any;
  addAccessionToMyList: any;
  removeAccessionFromMyList: any;
Matija Obreza's avatar
Matija Obreza committed
72
  applyFilters: any;
73
74
75
76
77
}

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

  protected static needs = [
78
    ({ params: { uuid, doi } }) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
79
        return doi ? loadAccession({ doi: `10.${doi}` }) :  loadAccession({ uuid });
80
81
82
83
84
85
86
87
    },
  ];

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

  public componentWillMount() {
88
89
90
    const { doi, uuid, loadAccession } = this.props;
    const accession = this.props.accession ? this.props.accession.details : null;

91
92
93
94
    const theDoi = `10.${doi}`;
    if (doi && (! accession || theDoi !== accession.doi)) {
      loadAccession({ doi: theDoi });
    }
95
    if (uuid && (! accession || uuid !== accession.uuid)) {
96
      loadAccession({ uuid });
97
98
99
    }
  }

100
101
102
103
104
105
106
107
108
109
110
  private loadAuditLog = () => {
    const { doi, uuid, loadAccessionAuditLog } = this.props;

    const theDoi = `10.${doi}`;
    if (doi) {
      loadAccessionAuditLog({ doi: theDoi });
    } else {
      loadAccessionAuditLog({uuid});
    }
  }

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
111
  private onCheckboxChange = (event, checked) => {
112
      const {accession: {details: accession}, addAccessionToMyList, removeAccessionFromMyList} = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
113
114
115
116
117
118
119
      if (checked) {
          addAccessionToMyList(accession.uuid);
      } else {
          removeAccessionFromMyList(accession.uuid);
        }
  }

Matija Obreza's avatar
Matija Obreza committed
120
121
122
123
124
125
126
127

  private applyFilterForInstituteSpecies = () => {
    const { accession: {details: accession}, applyFilters } = this.props;
    const filter = {holder: {code: [ accession.institute.code ]}, taxa: { genus: [ accession.taxonomy.genus ], species: [ accession.taxonomy.species ] }};
    applyFilters(filter);
  }


128
  public render() {
129
130
131
132
    const { t, error, uuid, doi, accessions, auditLog, classes } = this.props;

    const { auditAccession, auditAccessionId, auditAccessionCollect, auditAccessionGeo } = auditLog || { auditAccession: {}, auditAccessionId: {}, auditAccessionCollect: {}, auditAccessionGeo: {} };

133
    const { details: accession, pdci, datasets, subsets, files, imageGallery } = this.props.accession ?
134
135
      this.props.accession
      :
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
136
      {details: null, pdci: null, datasets: null, subsets: null, files: null, imageGallery: null};
137

Matija Obreza's avatar
Matija Obreza committed
138
    const isChecked  =  accession && accessions && accessions.includes(accession.uuid);
139
140
141
142
    const theDoi = `10.${doi}`;
    const stillLoading: boolean = ! error && (! accession
      || (doi && accession && accession.doi !== theDoi)
      || (uuid && accession && accession.uuid !== uuid));
143

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

146
    return (
Oleksii Savran's avatar
Oleksii Savran committed
147
      <PageLayout withFooter>
Matija Obreza's avatar
Matija Obreza committed
148
        <ScrollToTopOnMount />
Matija Obreza's avatar
Matija Obreza committed
149
        <ContentHeader title={ t('accessions.public.p.display.title') } subtitle={ t('accessions.public.p.display.subTitle') } />
Matija Obreza's avatar
Matija Obreza committed
150

151
152
153
        { stillLoading ? <Loading /> :
          <div>
            { error && <div>{ JSON.stringify(error) }</div> }
Matija Obreza's avatar
Matija Obreza committed
154

155
            { accession &&
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
156
              <PageContents className="pt-1rem">
Matija Obreza's avatar
Matija Obreza committed
157
                <MainSection className={ isChecked ? classes.selected : accession.historic ?  classes.historic : '' } title={
158
                  <div>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
159
                    { t('accessions.common.modelName') }: { accession.accessionNumber }
160
                    <div className="float-right">
161
162
163
                        <Authorize role={ ROLE_USER }>
                            <Button className="mr-20" variant="contained" onClick={ this.loadAuditLog }>{ t('accessions.public.p.display.loadChanges') }</Button>
                        </Authorize>
164
165
166
                        <ReduxCheckbox
                            label={
                                <b>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
167
                                    { isChecked ? t('accessions.public.p.display.removeFromMyList', {accessionNumber: accession.accessionNumber}) : t('accessions.public.p.display.addToMyList', {accessionNumber: accession.accessionNumber}) }
168
169
170
171
172
173
174
175
176
177
178
179
                                </b>
                            }
                            input={ {
                                value: isChecked,
                                onChange: this.onCheckboxChange,
                            } }
                        />
                    </div>
                  </div>
                  }
                >
                  <Properties>
180
                    { accession.doi && <PropertiesItem title={ t('accessions.public.p.display.DOI') }><DOI noPrefix value={ accession.doi } /></PropertiesItem> }
181
182
183
184
                    <PropertiesItem title={ t('accessions.common.acceNumb') } >
                      { accession.accessionNumber }
                      <AuditedInfo info={ auditAccession.accessionNumber }/>
                    </PropertiesItem>
185
                    <PropertiesItem title={ t('accessions.public.p.display.holdingInstitute') }>
186
187
188
                      <InstituteLink to={ accession.institute }>
                        { accession.institute.fullName }
                      </InstituteLink>
Matija Obreza's avatar
Matija Obreza committed
189
190
                      <span> &mdash; </span>
                      <CountryLink noflag country={ accession.institute.country }/>
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
                      <AuditedInfo info={ auditAccession.institute }/>
                    </PropertiesItem>
                    { accession.historic &&
                      <PropertiesItem className={ accession.historic ?  classes.historic : '' } title={ t('accessions.public.p.display.historic') }>
                        { t('accessions.public.p.display.isHistoric') }
                        <AuditedInfo info={ auditAccession.historic }/>
                      </PropertiesItem>
                    }
                    <PropertiesItem title={ t('accessions.common.instituteCode') }>
                      { accession.institute.code }
                      <AuditedInfo info={ auditAccession.instituteCode }/>
                    </PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.acquisitionDate') }>
                      <McpdDate value={ accession.acquisitionDate } />
                      <AuditedInfo info={ auditAccession.acquisitionDate }/>
206
                    </PropertiesItem>
207
208
209
210
211
212
213
                    { accession.countryOfOrigin && <PropertiesItem title={ t('accessions.common.countryOfOrigin') }>{ <CountryLink country={ accession.countryOfOrigin }/> }<AuditedInfo info={ auditAccession.countryOfOrigin }/></PropertiesItem> }
                    { accession.sampStat &&
                      <PropertiesItem title={ t('accessions.common.sampStat') }>
                        { t(`accessions.common.sampleStatus.${accession.sampStat}`) }
                        <AuditedInfo info={ auditAccession.sampStat }/>
                      </PropertiesItem>
                    }
214
                    { accession.storage && accession.storage.length > 0 && <PropertiesItem title={ t('accessions.common.storageType') }>
215
                      { accession.storage.map((storage, i) => (
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
216
                        <div key={ storage } style={ {width: '100%', paddingTop: '.25rem'} }>{ t(`accessions.common.storage.${storage}`) }</div>
217
218
                      )) }
                    </PropertiesItem> }
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
                    <PropertiesItem title={ t('accessions.public.p.display.availability') } keepEmpty>
                      { t(`accessions.common.available.${accession.available}`) }
                      <AuditedInfo info={ auditAccession.available }/>
                    </PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.ITPGRFAMLS') } keepEmpty>
                      { t(`accessions.common.mlsStatus.${accession.mlsStatus}`) }
                      <AuditedInfo info={ auditAccession.mlsStatus }/>
                    </PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.donorInstitute') }>
                      { accession.donorCode }
                      <AuditedInfo info={ auditAccession.donorCode }/>
                    </PropertiesItem>
                    <PropertiesItem title={ t('accessions.public.p.display.donorAccessionNumber') }>
                      { accession.donorNumb }
                      <AuditedInfo info={ auditAccession.donorNumb }/>
                    </PropertiesItem>
Matija Obreza's avatar
Matija Obreza committed
235

236
                    { accession.duplSite && accession.duplSite.length > 0 && <PropertiesItem title={ t('accessions.public.p.display.safetyDuplicationInstitute') }>
237
                      { accession.duplSite.map((duplSite, i) => (
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
238
                        <div key={ duplSite } style={ {width: '100%', paddingTop: '.25rem'} }>{ duplSite }</div>
239
240
                      )) }
                    </PropertiesItem> }
Matija Obreza's avatar
Matija Obreza committed
241

242
                    { accession.acceUrl && <PropertiesItem title={ t('accessions.public.p.display.accessionURL') }><ExternalLink link={ accession.acceUrl } /></PropertiesItem> }
243
244
                  </Properties>
                </MainSection>
Matija Obreza's avatar
Matija Obreza committed
245

246
247
248
249
                { imageGallery &&
                  <ImageGalleryView className={ classes.pageSection } imageGallery={ imageGallery }/>
                }

250
                <PageSection title={ t('accessions.common.taxonomy') }>
251
                  <Properties>
252
253
254
255
                    <PropertiesItem title={ t('accessions.common.genus') }>
                      { accession.taxonomy.genus }
                      <AuditedInfo info={ auditAccession.genus }/>
                    </PropertiesItem>
256
                    <PropertiesItem title={ t('accessions.common.species') }>
257
258
                      { accession.taxonomy.species }
                      { '' }
Matija Obreza's avatar
Matija Obreza committed
259
                      <a onClick={ this.applyFilterForInstituteSpecies }>View <i>{ `${accession.taxonomy.genus} ${accession.taxonomy.species}` }</i> at { accession.institute.code }</a>
260
                    </PropertiesItem>
261
262
263
                    <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>
264
265
                  </Properties>
                </PageSection>
Matija Obreza's avatar
Cleanup  
Matija Obreza committed
266
267

                { (accession.donorCode || (accession.aliases && accession.aliases.length > 0)) &&
268
                  <PageSection title={ t('accessions.public.p.display.accessionNames') }>
269
                    <Properties>
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
270
                      { accession.donorCode && <PropertiesItem title={ t('accessions.common.alias.DONORNUMB') }>{ accession.donorNumb } <em>{ accession.donorCode }</em></PropertiesItem> }
271
                      { accession.aliases && accession.aliases.map((alias) => (
Viacheslav Pavlov's avatar
i18n  
Viacheslav Pavlov committed
272
                        <PropertiesItem key={ alias.id } title={ t(`accessions.common.alias.${alias.aliasType}`) }>{ alias.name } <em>{ alias.usedBy }</em></PropertiesItem>
273
274
275
276
                      )) }
                    </Properties>
                  </PageSection>
                }
277

278
                { accession.coll &&
279
                  <PageSection title={ t('accessions.public.p.display.collectingInformation') }>
280
                    <Properties>
281
282
283
284
285
286
287
288
289
290
291
292
                      { accession.countryOfOrigin &&
                        <PropertiesItem title={ t('accessions.common.countryOfOrigin') }>
                          <CountryLink country={ accession.countryOfOrigin }/>
                          <AuditedInfo info={ auditAccessionCollect.countryOfOrigin }/>
                        </PropertiesItem>
                      }
                      { accession.coll.collDate &&
                        <PropertiesItem key="collDate" title={ t(`accessions.common.coll.collDate`) }>
                          <McpdDate value={ accession.coll.collDate } />
                          <AuditedInfo info={ auditAccessionCollect.collDate }/>
                        </PropertiesItem>
                      }
293
294
295
                      { accession.coll &&
                        [ 'collMissId', 'collNumb', 'collSite', 'collSrc' ]
                          .filter((prop) => accession.coll[prop] !== null).map((prop) => (
296
297
298
299
                          <PropertiesItem key={ prop } title={ t(`accessions.common.coll.${prop}`) }>
                            { accession.coll[prop] }
                            <AuditedInfo info={ auditAccessionCollect[prop] }/>
                          </PropertiesItem>
300
                        ))
301
                      }
302
303
304
                      { accession.coll &&
                        [ 'collCode', 'collName' ]
                          .filter((prop) => accession.coll[prop].length).map((prop) => (
305
306
307
308
                          <PropertiesItem key={ prop } title={ t(`accessions.common.coll.${prop}`) }>
                            { accession.coll[prop] }
                            <AuditedInfo info={ auditAccessionCollect[prop] }/>
                          </PropertiesItem>
309
310
311
312
313
                        ))
                      }
                      { accession.geo &&
                        [ 'latitude', 'longitude', 'datum', 'method', 'uncertainty', 'elevation' ]
                          .filter((prop) => accession.geo[prop] !== null).map((prop) => (
314
315
316
317
                          <PropertiesItem key={ prop } title={ t(`accessions.common.geo.${prop}`) }>
                            { accession.geo[prop] }
                            <AuditedInfo info={ auditAccessionGeo[prop] }/>
                          </PropertiesItem>
318
319
320
321
322
                        ))
                      }
                    </Properties>

                    { hasLatLon &&
Maxym Borodenko's avatar
Maxym Borodenko committed
323
                      <LocationMap locations={ [{ id: accession.geo.id, lat: accession.geo.latitude, lng: accession.geo.longitude }] }/>
324
325
326
                    }
                  </PageSection>
                }
Matija Obreza's avatar
Matija Obreza committed
327

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
                { accession.geo && accession.geo.climate &&
                  <PageSection title={ t('accessions.public.p.display.climateAtCollection') }>
                    <GridContainer className="container-spacing-vertical">
                      <TemperatureChart halfWidth climate={ accession.geo.climate }/>
                      <PrecipitationChart halfWidth climate={ accession.geo.climate }/>
                    </GridContainer>
                    <div>
                      <ClimateTable climate={ accession.geo.climate }/>
                    </div>
                  </PageSection>
                }

                { accession.geo && accession.geo.climate &&
                  <PageSection title={ t('accessions.public.p.display.additionalInfo') }>
                    <Properties>
                      { [...Array(19).keys()].map((i) => (
                        <PropertiesItem md numeric key={ `month-${i}` } title={ t(`accessions.climate.bio${i + 1}`) }>
                          { accession.geo.climate[`bio${i + 1}`] && Number(accession.geo.climate[`bio${i + 1}`]).toFixed(1) }
                        </PropertiesItem>
                      )) }
                    </Properties>
                  </PageSection>
                }

352
                { accession.remarks && accession.remarks.length > 0 && <PageSection title={ t('accessions.public.p.display.remarks') }>
353
354
355
356
357
358
                  <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
359

360
361
362
363
364
365
                { 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}` }>
366
                            <Button variant="contained" component="span">
367
368
369
370
371
372
373
374
375
376
377
                              { t('common:action.download') }
                            </Button>
                          </a>
                        }>
                          <b>{ e.originalFilename }</b>
                        </PropertiesItem>
                      )) }
                    </Properties>
                  </PageSection>
                }

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

380
                <PageSection title={ t('accessions.public.p.display.metadata') }>
381
                  <Properties>
382
383
384
385
                    <PropertiesItem title={ t('common:label.UUID') }>
                      { `urn:uuid:${accession.uuid}` }
                      <AuditedInfo info={ auditAccessionId.uuid }/>
                    </PropertiesItem>
386
387
388
                    <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>
389
390
                  </Properties>
                </PageSection>
391

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
392
                <GridContainer className="mb-15">
393
394
395
                  { datasets && datasets.length > 0 &&
                  <PropertiesCard
                    small
396
                    title={ t('accessions.public.p.display.associatedDatasets') }
397
                    propertyItemProps={ { keepEmpty: true } }
Matija Obreza's avatar
Matija Obreza committed
398
                    propertiesList={ datasets.map((dataset) => ({ value: <DatasetLink to={ dataset } /> })) }
399
400
401
402
403
                  />
                  }
                  { subsets && subsets.length > 0 &&
                  <PropertiesCard
                    small
404
                    title={ t('accessions.public.p.display.associatedSubsets') }
405
                    propertyItemProps={ { keepEmpty: true } }
Matija Obreza's avatar
Matija Obreza committed
406
                    propertiesList={ subsets.map((subset) => ({ value: <SubsetLink to={ subset } /> })) }
407
408
                  />
                  }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
409
                </GridContainer>
410
411
412
              </PageContents>
            }
          </div>
Matija Obreza's avatar
Matija Obreza committed
413
        }
414
415
416
417
418
419
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
420
  accession: state.accessions.public.accession,
421
  auditLog: state.accessions.public.auditLog,
422
  error: state.accessions.public.accessionError,
423
  uuid: ownProps.match.params.uuid,
424
  doi: ownProps.match.params.doi,
425
  accessions: state.list.public.myList.accessions,
426
427
428
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
429
430
  addAccessionToMyList,
  removeAccessionFromMyList,
431
  loadAccession,
432
  loadAccessionAuditLog,
Matija Obreza's avatar
Matija Obreza committed
433
  applyFilters,
434
435
436
}, dispatch);


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