Dataset accession ref with Loading indicator

locales/en/translations.json

@@ -726,6 +726,7 @@
           "excel": "Copy and paste the table from Excel into the text field \"List of accessions described in the dataset\".",
           "listDescribed": "List of accessions described in the dataset",
           "rowCount": "{{count, number}} accession",
+          "rowCount_pural": "{{count, number}} accessions",
           "placeholder": "Paste accessions data here (comma separated)",
           "rematch": "Rematch accessions",
           "clearList": "Clear list"

src/datasets/actions/editor.ts

@@ -122,9 +122,11 @@ function updateDatasetAccessionRefs(dataset: Dataset, accessionRefs: AccessionRe
       .then((saved) => {
         dispatch(receiveDataset(saved));
         dispatch(loadMoreAccessions(saved.uuid));
+        return saved;
       }).catch((error) => {
         log('Publish error', error);
-      });
+        throw error;
+    });
   };
 }
 

src/datasets/translations.json

@@ -115,6 +115,7 @@
           "excel": "Copy and paste the table from Excel into the text field \"List of accessions described in the dataset\".",
           "listDescribed": "List of accessions described in the dataset",
           "rowCount": "{{count, number}} accession",
+          "rowCount_pural": "{{count, number}} accessions",
           "placeholder": "Paste accessions data here (comma separated)",
           "rematch": "Rematch accessions",
           "clearList": "Clear list"

src/datasets/ui/dashboard/dataset-stepper/steps/accessions-list/ListOfAccessions.tsx

@@ -15,10 +15,11 @@ import { CSV, ICsvConfiguration } from 'utilities/CSV';
 import CSVConfiguration, { CSVConfig } from 'ui/common/csv-configuration/CSVConfiguration';
 import ActionButton from 'ui/common/buttons/ActionButton';
 import ButtonBar from 'ui/common/buttons/ButtonBar';
+import Loading from 'ui/common/Loading';
 
 interface IListOfAccession extends React.ClassAttributes<any> {
   classes: any;
-  onAccessionsUpdated: (accessionRefs: AccessionRef[]) => void;
+  onAccessionsUpdated: (AccessionRefs: AccessionRef[]) => Promise<Dataset>;
   accessionRefs: Page<AccessionRef>;
   loadAccessions: (uuid: string, page?: number, pageSize?: number) => any;
   t: any;
@@ -46,8 +47,12 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
   public dataPasted = (e) => {
     e.preventDefault();
     console.log('Pasted', e.clipboardData);
+    this.setState({ ...this.state, uploading: true, uploadText: 'Parsing' });
     // console.log(e.clipboardData.getData('text/plain'));
-    this.parseCsv(e.clipboardData.getData('text/plain'));
+
+    // Delay parsing a little bit for UI to update
+    const data = e.clipboardData.getData('text/plain');
+    setTimeout(() => this.parseCsv(data), 50);
   }
   public textBlurred = (e) => {
     this.parseCsv(e.target.value);
@@ -74,12 +79,14 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
         quote: '"',
         autodetect: false,
       },
+      uploading: false,
     };
   }
 
   public render() {
 
-    const {classes, accessionRefs, t, loadAccessions} = this.props;
+    const { classes, accessionRefs, t, loadAccessions } = this.props;
+    const { uploading, uploadText } = this.state;
 
     return (
       <div className={ `${ classes.root } m-20 p-20 even-row` }>
@@ -113,14 +120,18 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
 
         </div>
 
+        { uploading && <Loading message={ uploadText } /> }
+
         <h3>
           { t('datasets.dashboard.p.stepper.listOfAccessions.rowCount', { count: accessionRefs ? accessionRefs.totalElements : 0 }) }
-          <span className="float-right">
-            <ButtonBar>
-              <ActionButton title={ t('datasets.dashboard.p.stepper.listOfAccessions.rematch') }  action={ this.rematchAccessions }/>
-              <ActionButton title={ t('datasets.dashboard.p.stepper.listOfAccessions.clearList') }  action={ this.clearList }/>
-            </ButtonBar>
-          </span>
+          { !uploading &&
+            <span className="float-right">
+              <ButtonBar>
+                <ActionButton title={ t('datasets.dashboard.p.stepper.listOfAccessions.rematch') }  action={ this.rematchAccessions }/>
+                <ActionButton title={ t('datasets.dashboard.p.stepper.listOfAccessions.clearList') }  action={ this.clearList }/>
+              </ButtonBar>
+            </span>
+          }
         </h3>
         <AccessionRefsTable
           loadNextPage={ loadAccessions }
@@ -133,6 +144,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
   private parseCsv(csvText: string) {
     // log('CSV text', csvText);
     if (!csvText) {
+      this.setState({ ...this.state, uploading: false, uploadText: undefined });
       return;
     }
 
@@ -150,8 +162,15 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
         // log(aid);
       }).then(() => {
       log('All CSV parsed');
-      this.setState({ ...this.state, uploading: true, uploadText: 'Uploading to server' });
-      this.props.onAccessionsUpdated(newIdentifiers);
+      this.setState({ ...this.state, uploading: true, uploadText: `Uploading ${newIdentifiers.length} references to server` });
+      this.props.onAccessionsUpdated(newIdentifiers)
+        .then((dataset) => {
+          console.log('Done', dataset);
+          this.setState({ ...this.state, uploading: false });
+        }).catch((err) => {
+          this.setState({ ...this.state, uploading: false });
+          console.log('Error uploading', err);
+        });
     });
   }
 }

src/datasets/ui/dashboard/dataset-stepper/steps/accessions-list/index.tsx

@@ -59,7 +59,7 @@ class AccessionsListStep extends StepperTemplate<IAccessionsListStep> {
 
   protected updateAccessionsRefs = (AccessionRefs: AccessionRef[]) => {
     const { item: dataset, updateDatasetAccessionRefs } = this.props;
-    updateDatasetAccessionRefs(dataset, AccessionRefs);
+    return updateDatasetAccessionRefs(dataset, AccessionRefs);
   }
 
   public componentWillMount() {

src/subsets/ui/dashboard/subset-stepper/steps/accessions-list/ListOfAccessions.tsx

@@ -137,7 +137,7 @@ class ListOfAccession extends React.Component<IListOfAccession, any> {
         // log(aid);
       }).then(() => {
         log('All CSV parsed');
-        this.setState({ ...this.state, uploading: true, uploadText: 'Uploading to server' });
+        this.setState({ ...this.state, uploading: true, uploadText: `Uploading ${newIdentifiers.length} references to server` });
         this.props.onAccessionsUpdated(newIdentifiers)
           .then((dataset) => {
             console.log('Done', dataset);