Implements #1373 and f/e part of the #1393 (#421)

boriskovar-m2ms · web-flow · commit 1b8268b6b4a8 · 2024-04-12T09:00:28.000+02:00
* - first implementation of #1354 * - updated message for #1354 * - cleanup for #1354 * - implemented #1361 - improvements for #1354 * - implemented #1376 - also fixed bug in download structures dialog where only first download got added to the dropdown menu * - partial fix for purple release for #1370 * - using official backend version * - DELETE button disabled for #1357 * - added requirements * Squashed commit of the following: commit 07ba57d Author: Boris Kovar <boris.kovar@m2ms.sk> Date: Mon Mar 25 08:23:53 2024 +0100 - #1393 - all columns are now included * Squashed commit of the following: commit e1e3c2c Author: Boris Kovar <boris.kovar@m2ms.sk> Date: Wed Apr 10 15:31:02 2024 +0200 - implemented #1373
diff --git a/M2MS_Fragalysis_front-end_requirements_v0.5.docx b/M2MS_Fragalysis_front-end_requirements_v0.5.docx
diff --git a/js/components/datasets/compoundSetList.js b/js/components/datasets/compoundSetList.js
@@ -3,7 +3,7 @@
  */
 import React, { useEffect, memo, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { clearDatasetSettings, initializeDatasetFilter } from './redux/dispatchActions';
+import { clearDatasetSettings, getInspirationsForMol, initializeDatasetFilter } from './redux/dispatchActions';
 import { setExpandCompoundSets, setDataset, setSelectedDatasetIndex, setUpdatedDatasets } from './redux/actions';
 import DatasetMoleculeList from './datasetMoleculeList';
 import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, Tooltip } from '@material-ui/core';
@@ -13,6 +13,7 @@ import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined
 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';
 
 const useStyles = makeStyles(theme => ({
   table: {
@@ -63,6 +64,23 @@ export const CompoundSetList = () => {
   const scoreDatasetMap = useSelector(state => state.datasetsReducers.scoreDatasetMap);
   const moleculeLists = useSelector(state => state.datasetsReducers.moleculeLists);
 
+  const allInspirations = useSelector(state => state.datasetsReducers.allInspirations);
+  const compoundColors = useSelector(state => state.datasetsReducers.compoundColorByDataset);
+
+  const blueInput = useSelector(state => state.previewReducers.compounds[compoundsColors.blue.key]);
+  const redInput = useSelector(state => state.previewReducers.compounds[compoundsColors.red.key]);
+  const greenInput = useSelector(state => state.previewReducers.compounds[compoundsColors.green.key]);
+  const purpleInput = useSelector(state => state.previewReducers.compounds[compoundsColors.purple.key]);
+  const apricotInput = useSelector(state => state.previewReducers.compounds[compoundsColors.apricot.key]);
+
+  const inputs = {
+    [compoundsColors.blue.key]: blueInput,
+    [compoundsColors.red.key]: redInput,
+    [compoundsColors.green.key]: greenInput,
+    [compoundsColors.purple.key]: purpleInput,
+    [compoundsColors.apricot.key]: apricotInput
+  };
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [searchString, setSearchString] = useState(null);
   const [defaultSelectedValue, setDefaultSelectedValue] = useState();
@@ -74,13 +92,20 @@ export const CompoundSetList = () => {
    * @param {*} scoreName
    * @returns {string}
    */
-  const getCommonScore = useCallback((datasetID, scoreName) => {
-    let value = '';
-    if (datasetID && scoreDatasetMap.hasOwnProperty(datasetID) && scoreDatasetMap[datasetID].hasOwnProperty(scoreName)) {
-      value = scoreDatasetMap[datasetID][scoreName].description;
-    }
-    return value;
-  }, [scoreDatasetMap]);
+  const getCommonScore = useCallback(
+    (datasetID, scoreName) => {
+      let value = '';
+      if (
+        datasetID &&
+        scoreDatasetMap.hasOwnProperty(datasetID) &&
+        scoreDatasetMap[datasetID].hasOwnProperty(scoreName)
+      ) {
+        value = scoreDatasetMap[datasetID][scoreName].description;
+      }
+      return value;
+    },
+    [scoreDatasetMap]
+  );
 
   /**
    * Download molecule list of given dataset as CSV file
@@ -91,12 +116,81 @@ export const CompoundSetList = () => {
     const listOfMols = [];
     const moleculeList = moleculeLists[datasetID] || [];
 
+    let maxNumOfInspirations = 0;
+    moleculeList.forEach(cmp => {
+      const inspirations = getInspirationsForMol(allInspirations, datasetID, cmp.id);
+      if (inspirations?.length > maxNumOfInspirations) {
+        maxNumOfInspirations = inspirations.length;
+      }
+    });
+
+    let colorsTemplate = {};
+    moleculeList.forEach(compound => {
+      let shoppingCartColors = [];
+      const cmpColorsForDataset = compoundColors[datasetID];
+      if (cmpColorsForDataset) {
+        shoppingCartColors = cmpColorsForDataset[compound.id];
+        shoppingCartColors.forEach(color => {
+          if (!colorsTemplate.hasOwnProperty(color)) {
+            colorsTemplate[color] = '';
+            if (inputs.hasOwnProperty(color) && inputs[color]) {
+              colorsTemplate[`${color}-text`] = inputs[color];
+            }
+          }
+        });
+      }
+    });
+
     moleculeList.forEach(molecule => {
       let molObj = {};
 
       molObj['smiles'] = molecule.smiles;
       molObj['name'] = molecule.name;
 
+      if (molecule.hasOwnProperty('numerical_scores')) {
+        Object.keys(molecule.numerical_scores).forEach(key => {
+          molObj[key] = molecule.numerical_scores[key];
+        });
+      }
+      if (molecule.hasOwnProperty('text_scores')) {
+        Object.keys(molecule.text_scores).forEach(key => {
+          molObj[key] = molecule.text_scores[key];
+        });
+      }
+
+      if (maxNumOfInspirations) {
+        const inspirations = getInspirationsForMol(allInspirations, datasetID, molecule.id);
+        for (let i = 0; i < maxNumOfInspirations; i++) {
+          if (inspirations?.[i]) {
+            molObj[`inspiration_${i + 1}`] = inspirations[i].code;
+          } else {
+            molObj[`inspiration_${i + 1}`] = '';
+          }
+        }
+      }
+
+      let shoppingCartColors = [];
+
+      const cmpColorsForDataset = compoundColors[datasetID];
+      if (cmpColorsForDataset) {
+        shoppingCartColors = cmpColorsForDataset[molecule.id];
+        let colorsTemplateCopy = { ...colorsTemplate };
+        shoppingCartColors.forEach(color => {
+          colorsTemplateCopy[color] = true;
+        });
+
+        Object.keys(colorsTemplateCopy)
+          .filter(key => key.includes('-text'))
+          .forEach(key => {
+            const color = key.split('-')[0];
+            if (colorsTemplateCopy.hasOwnProperty(color) && !colorsTemplateCopy[color]) {
+              colorsTemplateCopy[key] = '';
+            }
+          });
+
+        molObj = { ...molObj, ...colorsTemplateCopy };
+      }
+
       listOfMols.push(molObj);
     });
 
@@ -118,7 +212,9 @@ export const CompoundSetList = () => {
 
   useEffect(() => {
     if (selectedDatasetIndex === 0) {
-      const filteredDataset = searchString ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase())) : customDatasets;
+      const filteredDataset = searchString
+        ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase()))
+        : customDatasets;
       const newDataset = filteredDataset.map((dataSet, index) =>
         index === 0 ? { ...dataSet, visibility: true } : { ...dataSet, visibility: false }
       );
@@ -138,7 +234,9 @@ export const CompoundSetList = () => {
   };
 
   const handleChangeVisibility = index => {
-    const filteredDataset = searchString ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase())) : customDatasets;
+    const filteredDataset = searchString
+      ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase()))
+      : customDatasets;
     const newDataset = filteredDataset.map((dataSetValue, i) =>
       i === index ? { ...dataSetValue, visibility: true } : { ...dataSetValue, visibility: false }
     );
@@ -171,30 +269,14 @@ export const CompoundSetList = () => {
         <Table className={classes.table}>
           <TableHead>
             <TableRow style={{ padding: 0 }}>
-              <TableCell style={{ width: 25, padding: 0 }}>
-                {/* Select */}
-              </TableCell>
-              <TableCell style={{ width: 60, padding: 0 }}>
-                Name
-              </TableCell>
-              <TableCell style={{ width: 15, padding: 0 }}>
-                #
-              </TableCell>
-              <TableCell style={{ width: 70, padding: 0 }}>
-                Submitter
-              </TableCell>
-              <TableCell style={{ width: 55, padding: 0 }}>
-                Institution
-              </TableCell>
-              <TableCell style={{ width: 60, padding: 0 }}>
-                Date
-              </TableCell>
-              <TableCell style={{ width: 70, padding: 0 }}>
-                Method
-              </TableCell>
-              <TableCell style={{ width: 30, padding: 0 }}>
-                CSV
-              </TableCell>
+              <TableCell style={{ width: 25, padding: 0 }}>{/* Select */}</TableCell>
+              <TableCell style={{ width: 60, padding: 0 }}>Name</TableCell>
+              <TableCell style={{ width: 15, padding: 0 }}>#</TableCell>
+              <TableCell style={{ width: 70, padding: 0 }}>Submitter</TableCell>
+              <TableCell style={{ width: 55, padding: 0 }}>Institution</TableCell>
+              <TableCell style={{ width: 60, padding: 0 }}>Date</TableCell>
+              <TableCell style={{ width: 70, padding: 0 }}>Method</TableCell>
+              <TableCell style={{ width: 30, padding: 0 }}>CSV</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -220,23 +302,36 @@ export const CompoundSetList = () => {
                     </TableCell>
                   </Tooltip>
                   <Tooltip title="Number of compounds">
-                    <TableCell className={classes.tableCell} style={{ maxWidth: 15 }}>{moleculeList.length}</TableCell>
+                    <TableCell className={classes.tableCell} style={{ maxWidth: 15 }}>
+                      {moleculeList.length}
+                    </TableCell>
                   </Tooltip>
                   <Tooltip title={getCommonScore(dataset.id, 'submitter_name')}>
-                    <TableCell className={classes.tableCell} style={{ maxWidth: 100 }}>{getCommonScore(dataset.id, 'submitter_name')}</TableCell>
+                    <TableCell className={classes.tableCell} style={{ maxWidth: 100 }}>
+                      {getCommonScore(dataset.id, 'submitter_name')}
+                    </TableCell>
                   </Tooltip>
                   <Tooltip title={getCommonScore(dataset.id, 'submitter_institution')}>
-                    <TableCell className={classes.tableCell} style={{ maxWidth: 70 }}>{getCommonScore(dataset.id, 'submitter_institution')}</TableCell>
+                    <TableCell className={classes.tableCell} style={{ maxWidth: 70 }}>
+                      {getCommonScore(dataset.id, 'submitter_institution')}
+                    </TableCell>
                   </Tooltip>
                   <Tooltip title={getCommonScore(dataset.id, 'generation_date')}>
-                    <TableCell className={classes.tableCell} style={{ maxWidth: 60 }}>{getCommonScore(dataset.id, 'generation_date')}</TableCell>
+                    <TableCell className={classes.tableCell} style={{ maxWidth: 60 }}>
+                      {getCommonScore(dataset.id, 'generation_date')}
+                    </TableCell>
                   </Tooltip>
                   <Tooltip title={getCommonScore(dataset.id, 'method')}>
-                    <TableCell className={classes.tableCell} style={{ maxWidth: 150 }}>{getCommonScore(dataset.id, 'method')}</TableCell>
+                    <TableCell className={classes.tableCell} style={{ maxWidth: 150 }}>
+                      {getCommonScore(dataset.id, 'method')}
+                    </TableCell>
                   </Tooltip>
                   <TableCell style={{ padding: 0 }}>
                     <Tooltip title="Download as CSV">
-                      <CloudDownloadOutlinedIcon className={classes.downloadIcon} onClick={() => downloadCSV(dataset.id)} />
+                      <CloudDownloadOutlinedIcon
+                        className={classes.downloadIcon}
+                        onClick={() => downloadCSV(dataset.id)}
+                      />
                     </Tooltip>
                   </TableCell>
                 </TableRow>
diff --git a/js/components/datasets/selectedCompoundsList.js b/js/components/datasets/selectedCompoundsList.js
@@ -297,8 +297,9 @@ export const SelectedCompoundList = memo(() => {
     };
   }, [dispatch]);
 
-  const getSetOfProps = usedDatasets => {
+  const getSetOfProps = filteredCompounds => {
     const unionOfProps = new Set();
+    const usedDatasets = {};
 
     unionOfProps.add('smiles');
 
@@ -313,6 +314,26 @@ export const SelectedCompoundList = memo(() => {
       }
     });
 
+    filteredCompounds.forEach(compound => {
+      const datasetName = compound.datasetID;
+      if (!usedDatasets.hasOwnProperty(datasetName)) {
+        const mol = compound.molecule;
+        if (mol.hasOwnProperty('numerical_scores')) {
+          const numericalScores = mol['numerical_scores'];
+          Object.keys(numericalScores).forEach(key => {
+            unionOfProps.add(key);
+          });
+        }
+        if (mol.hasOwnProperty('text_scores')) {
+          const textScores = mol['text_scores'];
+          Object.keys(textScores).forEach(key => {
+            unionOfProps.add(key);
+          });
+        }
+        usedDatasets[datasetName] = true;
+      }
+    });
+
     return [...unionOfProps];
   };
 
@@ -417,17 +438,6 @@ export const SelectedCompoundList = memo(() => {
     return result;
   };
 
-  const getUsedDatasets = mols => {
-    const setOfDataSets = {};
-    mols.forEach(mol => {
-      if (!setOfDataSets.hasOwnProperty(mol.datasetID)) {
-        setOfDataSets[mol.datasetID] = mol.datasetID;
-      }
-    });
-
-    return setOfDataSets;
-  };
-
   const getEmptyMolObject = (props, ids) => {
     let molObj = {};
 
@@ -470,8 +480,7 @@ export const SelectedCompoundList = memo(() => {
         return isVisible;
       });
 
-      const usedDatasets = getUsedDatasets(filteredCompounds);
-      const props = getSetOfProps(usedDatasets);
+      const props = getSetOfProps(filteredCompounds);
       const ids = getCompoundIds(filteredCompounds);
 
       const listOfMols = [];
@@ -520,7 +529,7 @@ export const SelectedCompoundList = memo(() => {
           const inspirations = getInspirationsForMol(allInspirations, compound.datasetID, compound.molecule.id);
           for (let i = 0; i < maxNumOfInspirations; i++) {
             if (inspirations?.[i]) {
-              molObj[`inspiration_${i + 1}`] = inspirations[i].protein_code;
+              molObj[`inspiration_${i + 1}`] = inspirations[i].code;
             } else {
               molObj[`inspiration_${i + 1}`] = '';
             }
@@ -534,11 +543,9 @@ export const SelectedCompoundList = memo(() => {
           const cmpColorsForDataset = compoundColors[compound.datasetID];
           shoppingCartColors = cmpColorsForDataset[compound.molecule.id];
         }
-        // let colorTagsToDisplay = '';
         let colorsTemplateCopy = { ...colorsTemplate };
         shoppingCartColors.forEach(color => {
           colorsTemplateCopy[color] = true;
-          // colorTagsToDisplay = colorTagsToDisplay + `${color}: ${inputs[color] || ''}|`;
         });
 
         Object.keys(colorsTemplateCopy)
@@ -550,7 +557,6 @@ export const SelectedCompoundList = memo(() => {
             }
           });
 
-        // molObj['color_groups'] = colorTagsToDisplay;
         molObj = { ...molObj, ...colorsTemplateCopy };
 
         listOfMols.push(molObj);
diff --git a/js/components/nglView/generatingObjects.js b/js/components/nglView/generatingObjects.js
@@ -25,7 +25,7 @@ export const assignRepresentationArrayToComp = (representations, comp) => {
 
 export const generateProteinObject = data => {
   // Now deal with this target
-  const prot_to_load = window.location.protocol + '//' + window.location.host + data.template_protein;
+  const prot_to_load = data.template_protein;
   if (JSON.stringify(prot_to_load) !== JSON.stringify(undefined)) {
     return {
       name: OBJECT_TYPE.PROTEIN + '_' + data.id.toString(),
diff --git a/js/components/preview/tags/details/tagDetails.js b/js/components/preview/tags/details/tagDetails.js
@@ -198,8 +198,8 @@ const TagDetails = memo(() => {
   const moleculesToEditIds = useSelector(state => state.selectionReducers.moleculesToEdit);
   const moleculesToEdit =
     moleculesToEditIds &&
-      moleculesToEditIds.length > 0 &&
-      !(moleculesToEditIds.length === 1 && moleculesToEditIds[0] === null)
+    moleculesToEditIds.length > 0 &&
+    !(moleculesToEditIds.length === 1 && moleculesToEditIds[0] === null)
       ? moleculesToEditIds.map(id => dispatch(getMoleculeForId(id)))
       : [];
 
