New csv2aim feature

src/components/annotationSearch/index.jsx

@@ -19,7 +19,7 @@ import {
   RiCloseCircleFill
 } from 'react-icons/ri';
 import { FcAbout, FcClearFilters } from 'react-icons/fc';
-import { BiSearch, BiX, BiTrash, BiDownload, BiPlay } from 'react-icons/bi';
+import { BiSearch, BiX, BiTrash, BiDownload, BiPlay, BiUpload } from 'react-icons/bi';
 import { BsEyeFill } from 'react-icons/bs';
 import { AiOutlineSortAscending, AiOutlineSortDescending } from 'react-icons/ai';
 import ReactTooltip from 'react-tooltip';
@@ -35,6 +35,7 @@ import { clearSelection, selectAnnotation, updateSearchTableIndex, refreshPage }
 import AnnotationDownloadModal from '../searchView/annotationDownloadModal';
 import UploadModal from '../searchView/uploadModal';
 import DeleteAlert from '../management/common/alertDeletionModal';
+import CSV2AIM from '../csv2aim/csv2aim'
 import {
   getPluginsForProject,
   addPluginsToQueue,
@@ -1292,6 +1293,7 @@ const AnnotationSearch = props => {
             {/* <button type="button" className="btn btn-sm" onClick={() => { setShowProjects(!showProjects) }}><BiDownload /><br />Copy to Project</button>
           {showProjects && (<Projects className='btn btn-sm worklist' onClose={() => { setShowProjects(false) }} />)} */}
             <button type="button" className="btn btn-sm" onClick={() => { setShowDeleteModal(true) }}><BiTrash /><br />Delete</button>
+            <CSV2AIM />
           </div>
         </div>
         {(showPlugins && mode !== 'teaching') && (<div style={{

src/components/csv2aim/csv2aim.jsx

@@ -0,0 +1,23 @@
+import React, { Component, useState } from "react";
+import { BiUpload } from 'react-icons/bi';
+import UploadCSV from './uploadcsv';
+
+export default function CSV2AIM() {
+    const [uploadClicked, setUploadClicked] = useState(false);
+
+    const handleSubmitUpload = () => {
+        setUploadClicked(false);
+    };
+
+    return (
+        <>
+            <button type="button" className="btn btn-sm" onClick={() => { setUploadClicked(true) }}><BiUpload /><br />Convert CSV to AIM files</button>
+            {uploadClicked && (
+            <UploadCSV
+                onCancel={() => setUploadClicked(false)}
+                onResolve={handleSubmitUpload}
+            />
+            )}
+        </>
+    );
+}

src/components/csv2aim/uploadcsv.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button } from 'react-bootstrap';
+import { uploadCsv }from '../../services/annotationServices';
+import { getTemplates } from '../annotationsList/action';
+
+class UploadCSV extends React.Component {
+  mode = sessionStorage.getItem('mode');
+  state = {
+    tiff: false,
+    osirix: false,
+    projects: [],
+    files: [],
+    projectID: ''
+  };
+
+  onSelect = e => {
+    const { name, checked } = e.target;
+    this.setState({ [name]: checked });
+  };
+
+  onSelectFile = e => {
+    this.setState({ files: Array.from(e.target.files) });
+  };
+
+  onUpload = () => {
+    let {
+      clearTreeData,
+      onResolve,
+      onCancel,
+      onSubmit,
+      clearTreeExpand
+    } = this.props;
+
+    const promises = [];
+    const formData = new FormData();
+    this.state.files.forEach((file, index) => {
+      formData.append(`file${index + 1}`, file);
+    });
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data'
+      }
+    };
+
+    if (onSubmit) onSubmit();
+    promises.push(uploadCsv(formData, config))
+
+    Promise.all(promises)
+      .then(() => {
+        if (clearTreeData) {
+          localStorage.setItem('treeData', JSON.stringify({}));
+          clearTreeExpand();
+        }
+        this.props.dispatch(getTemplates());
+        if (onResolve) onResolve();
+      })
+      .catch(err => {
+        console.error(err);
+        if (onResolve) onResolve();
+      });
+    onCancel();
+    this.setState({ projectID: '' });
+  };
+
+  selectProject = e => {
+    this.setState({ projectID: e.target.value });
+  };
+
+  renderUploadFileButton = () => {
+    return (
+      <div className="upload-file">
+        <span className="tiffForm-label__select">Select file: </span>
+        <input
+          type="file"
+          className="upload-display"
+          multiple={true}
+          // name="tiff"
+          onChange={this.onSelectFile}
+        />
+      </div>
+    );
+  };
+
+  render = () => {
+    let disabled = this.state.files.length === 0;
+    let className = 'alert-upload';
+    className = this.props.className
+      ? `${className} ${this.props.className}`
+      : className;
+    const { projects } = this.state;
+    return (
+      <Modal.Dialog id="modal-fix">
+        <Modal.Header className="modal-header">
+          <Modal.Title>Upload CSV</Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="notification-modal">
+          {this.renderUploadFileButton()}
+        </Modal.Body>
+        <Modal.Footer className="modal-footer__buttons">
+          <Button variant="secondary" onClick={this.onUpload} disabled={disabled}>
+            Submit
+          </Button>
+          <Button variant="secondary" onClick={this.props.onCancel}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Dialog>
+    );
+  };
+}
+
+UploadCSV.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  clearTreeData: PropTypes.func,
+  onResolve: PropTypes.func,
+  onSubmit: PropTypes.func,
+  pid: PropTypes.string,
+  clearTreeExpand: PropTypes.func
+
+};
+
+export default UploadCSV;

src/services/annotationServices.js

@@ -205,3 +205,15 @@ export function uploadSegmentation(segmentation, segName, projectId = "lite") {
 //   };
 //   return http.post(url, segData, config);
 // }
+
+export function uploadCsv(csvData, config) {
+  let url = http.apiUrl() + "/processCsv";
+//   const aimData = new FormData();
+//   aimData.append("file", csv);
+//   const config = {
+//     headers: {
+//       "content-type": "multipart/form-data",
+//     },
+//   };
+  return http.post(url, csvData, config);
+}