Merge remote-tracking branch 'remotes/origin/#423' into allfunctionality

m2ms · Nov 13, 2020 · a1929e8 · a1929e8
2 parents 23fb842 + b1dc90e
commit a1929e8
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 8 deletions.
diff --git a/js/components/common/Surfaces/Panel/index.js b/js/components/common/Surfaces/Panel/index.js
@@ -114,7 +114,7 @@ export const Panel = memo(
                 {title && (
                   <Grid
                     item
-                    xs={hasExpansion || headerActions ? (headerActions && headerActions.length > 2 ? 4 : 6) : 12}
+                    xs={hasExpansion || headerActions ? (headerActions && headerActions.length > 1 ? 5 : 6) : 12}
                     className={classes.headerTitle}
                   >
                     {withTooltip ? (
@@ -136,7 +136,7 @@ export const Panel = memo(
                     container
                     direction="row"
                     justify="flex-end"
-                    xs={title ? (headerActions && headerActions.length > 2 ? 8 : 6) : 12}
+                    xs={title ? (headerActions && headerActions.length > 1 ? 7 : 6) : 12}
                   >
                     {headerActions &&
                       headerActions.map((action, index) => (

diff --git a/js/components/datasets/datasetMoleculeView.js b/js/components/datasets/datasetMoleculeView.js
@@ -739,7 +739,7 @@ export const DatasetMoleculeView = memo(
                             setRef(ref.current);
                           }
                         }}
-                        disabled={disableUserInteraction}
+                        disabled={true}
                       >
                         X
                       </Button>

diff --git a/js/components/datasets/selectedCompoundsList.js b/js/components/datasets/selectedCompoundsList.js
@@ -1,6 +1,7 @@
 import React, { memo, useContext, useEffect, useRef, useState } from 'react';
 import { Panel } from '../common/Surfaces/Panel';
-import { CircularProgress, Grid, makeStyles, Typography } from '@material-ui/core';
+import { CircularProgress, Grid, makeStyles, Typography, Button } from '@material-ui/core';
+import { CloudDownload } from '@material-ui/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { getMoleculesObjectIDListOfCompoundsToBuy } from './redux/selectors';
 import InfiniteScroll from 'react-infinite-scroller';
@@ -19,6 +20,8 @@ import {
 import MoleculeView from '../preview/molecule/moleculeView';
 import { NglContext } from '../nglView/nglProvider';
 import { VIEWS } from '../../constants/constants';
+import FileSaver from 'file-saver';
+import JSZip from 'jszip';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -35,6 +38,9 @@ const useStyles = makeStyles(theme => ({
   },
   notFound: {
     paddingTop: theme.spacing(2)
+  },
+  sdfButton: {
+    marginRight: theme.spacing(1)
   }
 }));
 
@@ -46,8 +52,7 @@ export const SelectedCompoundList = memo(({ height }) => {
   const moleculesPerPage = 5;
   const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(0);
-  const moleculesObjectIDListOfCompoundsToBuy = useSelector(getMoleculesObjectIDListOfCompoundsToBuy);
-  const isOpenInspirationDialog = useSelector(state => state.datasetsReducers.isOpenInspirationDialog);
+  const moleculesObjectIDListOfCompoundsToBuy = useSelector(getMoleculesObjectIDListOfCompoundsToBuy);  const isOpenInspirationDialog = useSelector(state => state.datasetsReducers.isOpenInspirationDialog);
   const isOpenCrossReferenceDialog = useSelector(state => state.datasetsReducers.isOpenCrossReferenceDialog);
   const [selectedMoleculeRef, setSelectedMoleculeRef] = useState(null);
   const inspirationDialogRef = useRef();
@@ -132,8 +137,56 @@ export const SelectedCompoundList = memo(({ height }) => {
     };
   }, [dispatch]);
 
+  const downloadAsCsv = () => {
+    let data = 'smiles,dataset';
+    moleculesObjectIDListOfCompoundsToBuy.forEach(compound => {
+      data += `\n${compound.molecule.smiles},${compound.datasetID}`;
+    });
+    const dataBlob = new Blob([data], {type: 'text/csv;charset=utf-8'});
+
+    FileSaver.saveAs(dataBlob, 'selectedCompounds.csv');
+  };
+
+  const downloadAsSdf = async () => {
+    const zip = new JSZip();
+    const folders = {};
+
+    moleculesObjectIDListOfCompoundsToBuy.forEach(compound => {
+      const datasetID = compound.datasetID;
+      let folder = folders[datasetID];
+      if (!folder) {
+        folder = zip.folder(datasetID);
+        folders[datasetID] = folder;
+      }
+
+      const { name, sdf_info } = compound.molecule;
+      folder.file(`${name}.sdf`, sdf_info);
+    });
+
+    const zipBlob = await zip.generateAsync({ type: 'blob' });
+    FileSaver.saveAs(zipBlob, 'selectedCompounds.zip');
+  };
+
   return (
-    <Panel hasHeader title="Selected Compounds" withTooltip>
+    <Panel hasHeader title="Selected Compounds" withTooltip headerActions={[
+      <Button
+        color="inherit"
+        variant="text"
+        onClick={downloadAsCsv}
+        startIcon={<CloudDownload />}
+      >
+        Download CSV
+      </Button>,
+      <Button
+        color="inherit"
+        variant="text"
+        className={classes.sdfButton}
+        onClick={downloadAsSdf}
+        startIcon={<CloudDownload />}
+      >
+        Download SDF
+      </Button>
+    ]}>
       {isOpenInspirationDialog && (
         <InspirationDialog
           open

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fragalysis-frontend",
-  "version": "0.9.20",
+  "version": "0.9.21",
   "description": "Frontend for fragalysis",
   "main": "webpack.config.js",
   "scripts": {