csv download

package.json

@@ -58,6 +58,7 @@
     "body-parser": "^1.20.0",
     "bootstrap": "^3.4.1",
     "core-js": "^3.6.5",
+    "csv-stringify": "^6.5.2",
     "d3": "^6.5.0",
     "d3-force": "^2.1.1",
     "dotenv": "^8.6.0",

src/components/DownloadDialog.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import csv from 'csv-stringify';
+
+const jsonToCsvString = (json) => new Promise((res, rej) => {
+  csv.stringify(json, (err, output) => {
+    if (err) rej(err);
+    else res(output);
+  });
+});
+
+export default function DownloadDialog({
+  open, setOpen, message,
+}) {
+  const [type, setType] = React.useState('json');
+  const [fileName, setFileName] = React.useState('ROBOKOP_message');
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleClickDownload = async () => {
+    let blob;
+    if (type === 'json') {
+      blob = new Blob([JSON.stringify({ message }, null, 2)], { type: 'application/json' });
+    }
+    if (type === 'csv') {
+      const subsetMessage = message.results.map((r) => [...Object.values(r.node_bindings).map((nb) => nb[0].id), r.score]);
+      const csvString = await jsonToCsvString(subsetMessage);
+      blob = new Blob([csvString], { type: 'text/csv' });
+    }
+
+    const a = document.createElement('a');
+    a.download = `${fileName}.${type}`;
+    a.href = window.URL.createObjectURL(blob);
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+
+    handleClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="alert-dialog-title"
+    >
+      <DialogTitle id="alert-dialog-title">Download Answer</DialogTitle>
+      <DialogContent style={{ width: 600 }}>
+        <TextField
+          label="File name"
+          fullWidth
+          variant="outlined"
+          style={{ marginBottom: '2rem' }}
+          value={fileName}
+          onChange={(e) => { setFileName(e.target.value); }}
+        />
+
+        <FormControl component="fieldset">
+          <RadioGroup aria-label="gender" name="gender1" value={type} onChange={(e) => { setType(e.target.value); }}>
+            <FormControlLabel value="json" control={<Radio />} label="JSON" />
+            <FormControlLabel value="csv" control={<Radio />} label="CSV" />
+          </RadioGroup>
+        </FormControl>
+
+        {
+          type === 'csv' && (
+            <DialogContentText style={{ fontSize: '1em' }}>
+              The CSV download contains a smaller subset of the answer information. To analyze the complete properties of the answer graphs, consider using JSON.
+            </DialogContentText>
+          )
+        }
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={handleClickDownload} color="primary" variant="contained">
+          Download
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/pages/answer/leftDrawer/LeftDrawer.jsx

@@ -12,6 +12,7 @@ import PublishIcon from '@material-ui/icons/Publish';
 import GetAppIcon from '@material-ui/icons/GetApp';
 
 import ConfirmDialog from '~/components/ConfirmDialog';
+import DownloadDialog from '~/components/DownloadDialog';
 
 import './leftDrawer.css';
 
@@ -29,24 +30,12 @@ export default function LeftDrawer({
   onUpload, displayState, updateDisplayState, message, deleteAnswer,
 }) {
   const [confirmOpen, setConfirmOpen] = useState(false);
+  const [downloadOpen, setDownloadOpen] = useState(false);
 
   function toggleDisplay(component, show) {
     updateDisplayState({ type: 'toggle', payload: { component, show } });
   }
 
-  /**
-   * Download the current message
-   */
-  async function download() {
-    const blob = new Blob([JSON.stringify({ message }, null, 2)], { type: 'application/json' });
-    const a = document.createElement('a');
-    a.download = 'ROBOKOP_message.json';
-    a.href = window.URL.createObjectURL(blob);
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-  }
-
   return (
     <Drawer
       container={document.getElementById('contentContainer')}
@@ -78,7 +67,7 @@ export default function LeftDrawer({
           component="label"
           button
           disabled={!Object.keys(message).length}
-          onClick={download}
+          onClick={() => { setDownloadOpen(true); }}
         >
           <ListItemIcon>
             <IconButton
@@ -127,6 +116,11 @@ export default function LeftDrawer({
         title="Confirm Answer Deletion"
         confirmText="Delete Answer"
       />
+      <DownloadDialog
+        open={downloadOpen}
+        setOpen={setDownloadOpen}
+        message={message}
+      />
     </Drawer>
   );
 }