ListOfAccessions.tsx 4.22 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
2
3
4
5
6
7
8
9
10
11
import * as React from 'react';
import {withStyles} from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';

// utility
import {log} from 'utilities/debug';
import {CSV, ICsvConfiguration} from 'utilities/CSV';

// models
12
13
14
import {AccessionRef} from 'model/accession/AccessionRef';
import Accession from 'model/accession/Accession';
import AccessionFilter from 'model/accession/AccessionFilter';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
15
16
import {IPageRequest} from 'model/FilteredPage';
import Page from 'model/Page';
17
import Subset from 'model/subset/Subset';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
18
19
20

// ui
import CSVConfiguration, {CSVConfig} from 'ui/common/csv-configuration/CSVConfiguration';
21
import AccessionRefsTable from 'ui/catalog/accession/AccessionRefsTable';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
22
23
24
25
26

interface IListOfAccession extends React.ClassAttributes<any> {
  classes: any;
  listAccessions: (filter: string | AccessionFilter, page: IPageRequest) => Promise<Page<Accession>>;
  subset: Subset;
27
  onAccessionsUpdated: (AccessionRefs: AccessionRef[]) => void;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
}

const styleSheet = {

  /* tslint:disable */
  root: {
    '& input[type="file"]': {
      display: 'none',
    },
  },
  /* tslint:enable */
  iconWrapper: {
    color: '#999',
  },
};

class ListOfAccession extends React.Component<IListOfAccession, any> {


  public dataPasted = (e) => {
    e.preventDefault();
    console.log('Pasted', e.clipboardData);
    // console.log(e.clipboardData.getData('text/plain'));
    this.parseCsv(e.clipboardData.getData('text/plain'));
  }
  public textBlurred = (e) => {
    this.parseCsv(e.target.value);
  }
  private onUpdateCsvConfig = (value: CSVConfig) => {
    this.setState({...this.state, csvConfig: value});
  }

  public constructor(props: any) {
    super(props);

    this.state = {
      csvConfig: {
        separator: '\t',
        escape: '\\',
        quote: '"',
        autodetect: false,
      },
    };
  }

  public render() {

75
    const {classes, subset} = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

    return (
      <div className={ `${ classes.root } m-20 p-20 even-row` }>
        <div>
          <h4>INSTRUCTIONS FOR USE</h4>
          <ul>
            <li>Use "Acccessions" sheet from template: <a href="/templates/genesys-subset-template.xlsx" target="_blank">Subset template</a>.</li>
            <li>Do not change header name in the template</li>
            <li>Fill the template with the information of the accessions, save it.</li>
            <li>Copy and paste the table from Excel into the text field below.</li>
          </ul>
        </div>

        <CSVConfiguration onChange={ this.onUpdateCsvConfig } config={ this.state.csvConfig }/>

        <div>
          <form>
            <FormControl fullWidth>
              <InputLabel>List of accessions described in the dataset</InputLabel>
              <Input multiline placeholder="Paste accessions data here (comma separated)" onPaste={ this.dataPasted } onBlur={ this.textBlurred }/>
            </FormControl>
          </form>

        </div>

101
102
103
104
105
106
107
108
109
110
        <h3>Accession list: { subset.accessionRefs ? subset.accessionRefs.length : 0 } rows</h3>
        { subset.accessionRefs &&
          <AccessionRefsTable AccessionRefs={ subset.accessionRefs.map((accessionRef) => (
            {
              doi: accessionRef.accession.doi,
              instCode: accessionRef.accession.institute.code,
              acceNumb: accessionRef.accession.accessionNumber,
              genus: accessionRef.accession.taxonomy.genus,
            }
          )) }/>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
        }
      </div>
    );
  }

  private parseCsv(csvText: string) {
    // log('CSV text', csvText);
    if (!csvText) {
      return;
    }

    const config: ICsvConfiguration = this.state.csvConfig.autodetect ? CSV.detectConfiguration(csvText) :
      this.state.csvConfig;

    log('CSV config', config);

127
    const newIdentifiers: AccessionRef[] = [];
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
128

129
    CSV.parse(csvText, config, {headers: [ 'instCode', 'acceNumb', 'genus', 'species', 'doi']})
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
130
      .subscribe((jsonObj) => {
131
        const aid: AccessionRef = new AccessionRef(jsonObj);
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
132
133
134
135
136
137
138
139
140
141
        newIdentifiers.push(aid);
        log(aid);
      }).then(() => {
      log('All CSV parsed');
      this.props.onAccessionsUpdated(newIdentifiers);
    });
  }
}

export default withStyles(styleSheet)(ListOfAccession);