From 1ec9788be865160762b35b81ff5192f04a154e79 Mon Sep 17 00:00:00 2001
From: Boris Kovar <boris.kovar@m2ms.sk>
Date: Tue, 23 Jul 2024 08:47:00 +0200
Subject: [PATCH] - ported csv generation functionality from backend to
 frontend

---
 js/components/datasets/compoundSetList.js     | 26 ++++----
 .../datasets/selectedCompoundsList.js         | 29 +++++----
 js/utils/csv.js                               | 64 +++++++++++++++++++
 3 files changed, 93 insertions(+), 26 deletions(-)
 create mode 100644 js/utils/csv.js

diff --git a/js/components/datasets/compoundSetList.js b/js/components/datasets/compoundSetList.js
index 09d68b0f5..29220ce8f 100644
--- a/js/components/datasets/compoundSetList.js
+++ b/js/components/datasets/compoundSetList.js
@@ -14,6 +14,7 @@ import SearchField from '../common/Components/SearchField';
 import { base_url } from '../routes/constants';
 import { METHOD, api } from '../../utils/api';
 import { compoundsColors } from '../preview/compounds/redux/constants';
+import { downloadRHSCSVExport } from '../../utils/csv';
 
 const useStyles = makeStyles(theme => ({
   table: {
@@ -197,19 +198,20 @@ export const CompoundSetList = () => {
 
     const fileName = `${datasetID}.csv`;
     const reqObj = { title: datasetID, filename: fileName, dict: listOfMols };
-    const jsonString = JSON.stringify(reqObj);
+    downloadRHSCSVExport(reqObj);
+    // const jsonString = JSON.stringify(reqObj);
 
-    api({
-      url: `${base_url}/api/dicttocsv/`,
-      method: METHOD.POST,
-      data: jsonString
-    }).then(resp => {
-      var anchor = document.createElement('a');
-      anchor.href = `${base_url}/api/dicttocsv/?file_url=${resp.data['file_url']}`;
-      anchor.target = '_blank';
-      anchor.download = `${fileName}`; //'download';
-      anchor.click();
-    });
+    // api({
+    //   url: `${base_url}/api/dicttocsv/`,
+    //   method: METHOD.POST,
+    //   data: jsonString
+    // }).then(resp => {
+    //   var anchor = document.createElement('a');
+    //   anchor.href = `${base_url}/api/dicttocsv/?file_url=${resp.data['file_url']}`;
+    //   anchor.target = '_blank';
+    //   anchor.download = `${fileName}`; //'download';
+    //   anchor.click();
+    // });
   };
 
   useEffect(() => {
diff --git a/js/components/datasets/selectedCompoundsList.js b/js/components/datasets/selectedCompoundsList.js
index 7cc277d8e..338932cc5 100644
--- a/js/components/datasets/selectedCompoundsList.js
+++ b/js/components/datasets/selectedCompoundsList.js
@@ -72,6 +72,7 @@ import { ARROW_TYPE, VIEWS } from '../../constants/constants';
 import { useScrollToCompound } from './useScrollToCompound';
 import useDisableNglControlButtons from '../preview/molecule/useDisableNglControlButtons';
 import useDisableDatasetNglControlButtons from './useDisableDatasetNglControlButtons';
+import { downloadRHSCSVExport } from '../../utils/csv';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -572,20 +573,20 @@ export const SelectedCompoundList = memo(() => {
       const fileName = `${targetName}-RHS-selection.csv`;
       // console.log(`href - ${fileName}`);
       const reqObj = { title: sharedSnapshot.url, filename: fileName, dict: listOfMols };
-      const jsonString = JSON.stringify(reqObj);
-
-      api({
-        url: `${base_url}/api/dicttocsv/`,
-        method: METHOD.POST,
-        data: jsonString
-      }).then(resp => {
-        var anchor = document.createElement('a');
-        anchor.href = `${base_url}/api/dicttocsv/?file_url=${resp.data['file_url']}`;
-        // console.log(`href - ${base_url}/api/dicttocsv/?file_url=${resp.data['file_url']}`);
-        anchor.target = '_blank';
-        anchor.download = `${fileName}`; //'download';
-        anchor.click();
-      });
+      downloadRHSCSVExport(reqObj);
+      // const jsonString = JSON.stringify(reqObj);
+
+      // api({
+      //   url: `${base_url}/api/dicttocsv/`,
+      //   method: METHOD.POST,
+      //   data: jsonString
+      // }).then(resp => {
+      //   var anchor = document.createElement('a');
+      //   anchor.href = `${base_url}/api/dicttocsv/?file_url=${resp.data['file_url']}`;
+      //   anchor.target = '_blank';
+      //   anchor.download = `${fileName}`; //'download';
+      //   anchor.click();
+      // });
     });
   };
 
diff --git a/js/utils/csv.js b/js/utils/csv.js
new file mode 100644
index 000000000..7ad10516f
--- /dev/null
+++ b/js/utils/csv.js
@@ -0,0 +1,64 @@
+export const downloadRHSCSVExport = data => {
+  const csvContent = generateCSVExportFromObject(data);
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', data.filename);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+export const generateCSVExportFromObject = data => {
+  let csvContent = '';
+  const filename = data.filename;
+
+  let newLine = '\r\n';
+
+  csvContent += data.title + newLine;
+
+  if (data?.dict?.length < 1) {
+    return '';
+  }
+
+  const headerKeys = getReferenceDataForHeader(data.dict[0]);
+  csvContent += generateCSVHeaderFromKeys(headerKeys) + newLine;
+
+  for (let i = 0; i < data.dict.length; i++) {
+    const row = data.dict[i];
+    csvContent += generateCSVRowFromObject(row, headerKeys) + newLine;
+  }
+
+  return csvContent;
+};
+
+const generateCSVRowFromObject = (row, keys) => {
+  let csvRow = '';
+
+  for (let i = 0; i < keys.length; i++) {
+    csvRow += row[keys[i]] ? row[keys[i]] : '';
+    if (i < keys.length - 1) {
+      csvRow += ',';
+    }
+  }
+
+  return csvRow;
+};
+
+const generateCSVHeaderFromKeys = keys => {
+  let csvHeader = '';
+
+  for (let i = 0; i < keys.length; i++) {
+    csvHeader += keys[i];
+    if (i < keys.length - 1) {
+      csvHeader += ',';
+    }
+  }
+
+  return csvHeader;
+};
+
+const getReferenceDataForHeader = data => {
+  return Object.keys(data);
+};